@elite.framework/ng.ui.core 1.0.76 → 1.0.77

package/fesm2022/elite.framework-ng.ui.core-generic-search-advanced.mjs

@@ -1,29 +1,45 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, inject, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { NgModule, inject, Injectable, EventEmitter, Input, Output, Component, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i6$1 from '@ngx-formly/core';
-import { FieldType, FormlyForm, FormlyModule } from '@ngx-formly/core';
-import * as i7 from '@ngx-translate/core';
+import * as i4$1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormlyForm, FieldType, FormlyField, provideFormlyConfig } from '@ngx-formly/core';
+import * as i10 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { ToolbarModule } from 'primeng/toolbar';
-import * as i1$1 from 'primeng/button';
+import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import { PopoverModule } from 'primeng/popover';
 import { InputIconModule } from 'primeng/inputicon';
-import * as i3$1 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i4 from 'primeng/inputtext';
+import * as i5 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i5 from 'primeng/drawer';
+import * as i6 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
-import * as i6 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
+import { QueryParser } from '@elite.framework/ng.core/services';
+import * as i8 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i7 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i9 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import * as i2 from 'primeng/api';
 import * as i3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
+import * as i5$1 from 'primeng/dragdrop';
+import { DragDropModule } from 'primeng/dragdrop';
+import * as i6$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i7$1 from 'primeng/listbox';
+import { ListboxModule } from 'primeng/listbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import { DatePickerModule } from 'primeng/datepicker';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { MenuModule } from 'primeng/menu';
+import * as i6$2 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import * as i2$1 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
 
 class GenericSearchAdvancedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvancedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -39,81 +55,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
 
 // query-builder.service.ts
 class QueryBuilderService {
+    translate = inject(TranslateService);
+    // Field type configuration that matches QueryBuilderComponent
+    fieldTypeConfig = {
+        'input': { defaultOperator: 'contains', defaultValue: '', operators: ['eq', 'ne', 'contains', 'startswith', 'endswith'] },
+        'number': { defaultOperator: 'eq', defaultValue: null, operators: ['eq', 'ne', 'gt', 'ge', 'lt', 'le'] },
+        'datepicker': { defaultOperator: 'eq', defaultValue: null, operators: ['eq', 'ne', 'gt', 'ge', 'lt', 'le'] },
+        'select': { defaultOperator: 'eq', defaultValue: '', operators: ['eq', 'ne', 'in', 'notin'] },
+        'checkbox': { defaultOperator: 'eq', defaultValue: null, operators: ['eq', 'ne'] },
+        'generic-selector': { defaultOperator: 'eq', defaultValue: null, operators: ['eq', 'ne', 'in', 'notin'] },
+        'switch': { defaultOperator: 'eq', defaultValue: null, operators: ['eq', 'ne'] },
+        'radio': { defaultOperator: 'eq', defaultValue: '', operators: ['eq', 'ne'] },
+        'textarea': { defaultOperator: 'contains', defaultValue: '', operators: ['eq', 'ne', 'contains', 'startswith', 'endswith'] }
+    };
     buildQueryUIFields(fields) {
         return [
+            // {
+            //   key: 'quickSearch',
+            //   type: 'input',
+            //   props: {
+            //     label: 'بحث سريع',
+            //     placeholder: 'ابحث في جميع الحقول...',
+            //     icon: 'pi pi-search'
+            //   }
+            // },
             {
-                key: 'quickSearch',
-                type: 'input',
+                type: 'tab-type',
+                // key: 'queryTabs',
                 props: {
-                    label: 'بحث سريع',
-                    placeholder: 'ابحث في جميع الحقول...',
-                    icon: 'pi pi-search'
-                }
+                    tabViewClass: 'advanced-query-tabs',
+                    scrollable: false,
+                    lazy: true,
+                    activeIndex: 0
+                },
+                fieldGroup: this.getQueryTabs(fields)
+            }
+        ];
+    }
+    getQueryTabs(fields) {
+        return [
+            {
+                type: 'group',
+                props: {
+                    label: 'FILTERS',
+                    leftIcon: 'pi pi-filter',
+                    badge: (field) => {
+                        const fieldGroup = (field?.fieldGroup ?? [])[0];
+                        return (fieldGroup?.model?.advancedFilters ?? [])[0]?.conditions?.length || 0;
+                    },
+                },
+                fieldGroup: this.getFilterTabFields(fields)
+            },
+            {
+                type: 'group',
+                props: {
+                    label: 'SORTING',
+                    leftIcon: 'pi pi-sort-alt',
+                    badge: (field) => {
+                        const fieldGroup = (field?.fieldGroup ?? [])[0];
+                        return (fieldGroup?.model?.sorting ?? [])?.length || 0;
+                    },
+                },
+                fieldGroup: this.getSortingTabFields(fields)
             },
+            {
+                type: 'group',
+                props: {
+                    label: 'PAGINATION',
+                    leftIcon: 'pi pi-table',
+                    badge: (field) => {
+                        return field?.model?.pagination && field?.model?.pagination?.top ? 1 : 0;
+                    },
+                },
+                fieldGroup: this.getPaginationTabFields()
+            }
+        ];
+    }
+    getFilterTabFields(fields) {
+        return [
             {
                 key: 'advancedFilters',
                 type: 'query-builder',
                 props: {
                     label: 'مرشحات متقدمة',
+                    description: 'أنشئ مرشحات معقدة باستخدام مشغلين منطقيين',
                     fields: this.extractFilterableFields(fields)
                 }
-            },
+            }
+        ];
+    }
+    getSortingTabFields(fields) {
+        return [
             {
                 key: 'sorting',
                 type: 'sort-builder',
                 props: {
                     label: 'ترتيب النتائج',
+                    description: 'حدد أولوية وعرض ترتيب البيانات',
                     fields: this.extractSortableFields(fields)
                 }
-            },
+            }
+        ];
+    }
+    getPaginationTabFields() {
+        return [
             {
                 key: 'pagination',
                 type: 'group',
-                props: { label: 'التقسيم الصفحي' },
+                props: {
+                    label: '',
+                    description: '',
+                    collapsible: false,
+                    showFieldCount: true,
+                    variant: 'card'
+                },
                 fieldGroup: [
                     {
                         key: 'top',
                         type: 'input',
                         props: {
                             type: 'number',
-                            label: 'عدد السجلات',
+                            label: 'الحد الأقصى للسجلات',
                             min: 1,
                             max: 1000,
                             description: 'أقصى عدد للسجلات المراد عرضها'
                         }
                     },
-                    {
-                        key: 'skip',
-                        type: 'input',
-                        props: {
-                            type: 'number',
-                            label: 'تخطي السجلات',
-                            min: 0,
-                            description: 'عدد السجلات التي سيتم تخطيها'
-                        }
-                    }
+                    // {
+                    //   key: 'skip',
+                    //   type: 'input',
+                    //   props: {
+                    //     type: 'number',
+                    //     label: 'تخطي السجلات',
+                    //     min: 0,
+                    //     description: 'عدد السجلات التي سيتم تخطيها'
+                    //   }
+                    // }
                 ]
-            },
-            {
-                key: 'expand',
-                type: 'multiselect',
-                props: {
-                    label: 'توسيع الحقول',
-                    options: this.extractExpandableFields(fields),
-                    placeholder: 'اختر الحقول للتوسيع'
-                }
             }
         ];
     }
+    getFilterCount() {
+        return '0';
+    }
     extractFilterableFields(fields) {
         const filterableFields = [];
         this.traverseFields(fields, (field) => {
             if (field.key && field.props && field.props['filterable'] !== false && !field.props?.hidden) {
+                const fieldType = this.mapFieldType(field.type);
+                const fieldConfig = this.fieldTypeConfig[fieldType] || this.fieldTypeConfig.input;
                 filterableFields.push({
                     key: field.key,
-                    label: field.props.label || field.key,
-                    type: this.mapFieldType(field.type),
-                    operators: this.getOperatorsForType(field.type)
+                    label: this.translate.instant(field.props.label || field.key),
+                    type: fieldType,
+                    props: { ...field.props },
+                    operators: fieldConfig.operators,
+                    // Add default values for QueryBuilderComponent compatibility
+                    defaultOperator: fieldConfig.defaultOperator,
+                    defaultValue: fieldConfig.defaultValue
                 });
             }
         });
@@ -125,7 +224,7 @@ class QueryBuilderService {
             if (field.key && field.props && field.props['sortable'] !== false && !field.props?.hidden) {
                 sortableFields.push({
                     key: field.key,
-                    label: field.props.label || field.key
+                    label: this.translate.instant(field.props.label || field.key)
                 });
             }
         });
@@ -149,32 +248,28 @@ class QueryBuilderService {
             if (field.fieldGroup) {
                 this.traverseFields(field.fieldGroup, callback);
             }
-            if (field.fieldGroup) {
-                this.traverseFields(field.fieldGroup ?? [], callback);
-            }
         });
     }
     mapFieldType(type) {
         const typeMap = {
-            'input': 'string',
+            'input': 'input',
             'number': 'number',
-            'datepicker': 'date',
-            'select': 'string',
-            'checkbox': 'boolean',
-            'radio': 'string',
-            'textarea': 'string'
+            'datepicker': 'datepicker',
+            'select': 'select',
+            'checkbox': 'checkbox',
+            'generic-selector': 'generic-selector',
+            'switch': 'switch',
+            'radio': 'radio',
+            'textarea': 'textarea'
         };
-        return typeMap[type || 'input'] || 'string';
+        return typeMap[type || 'input'] || 'input';
     }
     getOperatorsForType(type) {
-        const operatorsMap = {
-            'string': ['eq', 'ne', 'contains', 'startswith', 'endswith'],
-            'number': ['eq', 'ne', 'gt', 'ge', 'lt', 'le'],
-            'date': ['eq', 'ne', 'gt', 'ge', 'lt', 'le'],
-            'boolean': ['eq', 'ne']
-        };
-        return operatorsMap[this.mapFieldType(type)] || ['eq', 'ne'];
+        const fieldType = this.mapFieldType(type);
+        const config = this.fieldTypeConfig[fieldType];
+        return config ? config.operators : ['eq', 'ne'];
     }
+    // OData methods remain the same
     buildODataFromQueryModel(model, originalFields) {
         const params = {
             filters: [],
@@ -185,38 +280,30 @@ class QueryBuilderService {
         // Quick search
         if (model.quickSearch) {
             const searchableFields = this.extractFilterableFields(originalFields);
-            searchableFields.forEach(field => {
+            const quickSearchConditions = searchableFields.map(field => ({
+                field: field.key,
+                operator: 'contains',
+                value: model.quickSearch
+            }));
+            if (quickSearchConditions.length > 0) {
                 params.filters.push({
-                    field: field.key,
-                    operator: 'contains',
-                    value: model.quickSearch,
-                    logicalOperator: 'or'
+                    logicalOperator: 'or',
+                    conditions: quickSearchConditions
                 });
-            });
+            }
         }
         // Advanced filters
         if (model.advancedFilters && Array.isArray(model.advancedFilters)) {
-            model.advancedFilters.forEach((filter) => {
-                if (filter.field && filter.operator && filter.value !== undefined && filter.value !== '') {
-                    params.filters.push({
-                        field: filter.field,
-                        operator: filter.operator,
-                        value: filter.value,
-                        logicalOperator: 'and'
-                    });
-                }
-            });
+            params.filters.push(...model.advancedFilters);
         }
         // Sorting
         if (model.sorting && Array.isArray(model.sorting)) {
-            model.sorting.forEach((sort) => {
-                if (sort.field && sort.direction) {
-                    params.orderBy.push({
-                        field: sort.field,
-                        direction: sort.direction
-                    });
-                }
-            });
+            params.orderBy = model.sorting
+                .filter((sort) => sort.field && sort.direction)
+                .map((sort) => ({
+                field: sort.field,
+                direction: sort.direction
+            }));
         }
         // Pagination
         if (model.pagination) {
@@ -230,60 +317,64 @@ class QueryBuilderService {
         return params;
     }
     toODataQueryString(params) {
-        const queryParts = [];
-        // Filters
-        if (params.filters.length > 0) {
-            const filterGroups = {};
-            params.filters.forEach(filter => {
-                const logicalOp = filter.logicalOperator || 'and';
-                if (!filterGroups[logicalOp]) {
-                    filterGroups[logicalOp] = [];
-                }
-                filterGroups[logicalOp].push(`${filter.field} ${filter.operator} ${this.formatODataValue(filter.value)}`);
-            });
-            let filterString = '';
-            Object.keys(filterGroups).forEach((op, index) => {
-                if (index > 0)
-                    filterString += ' and ';
-                if (filterGroups[op].length > 1) {
-                    filterString += `(${filterGroups[op].join(` ${op} `)})`;
-                }
-                else {
-                    filterString += filterGroups[op][0];
+        return QueryParser.toString(params);
+    }
+    parseODataQuery(queryString) {
+        return QueryParser.parse(queryString);
+    }
+    parseODataToQueryModel(queryString, originalFields) {
+        const params = this.parseODataQuery(queryString);
+        const model = {
+            advancedFilters: [],
+            sorting: [],
+            pagination: {}
+        };
+        // Parse filters back to UI model
+        if (params.filters && params.filters.length > 0) {
+            params.filters.forEach((group) => {
+                if (group.logicalOperator === 'or' && group.conditions.length > 1) {
+                    const firstValue = group.conditions[0].value;
+                    if (group.conditions.every(cond => cond.operator === 'contains' && cond.value === firstValue)) {
+                        model.quickSearch = firstValue;
+                        return;
+                    }
                 }
+                group.conditions.forEach(condition => {
+                    model.advancedFilters.push({
+                        field: condition.field,
+                        operator: condition.operator,
+                        value: condition.value
+                    });
+                });
             });
-            queryParts.push(`$filter=${encodeURIComponent(filterString)}`);
         }
-        // Order by
-        if (params.orderBy.length > 0) {
-            const orderByString = params.orderBy.map(order => `${order.field} ${order.direction}`).join(',');
-            queryParts.push(`$orderby=${encodeURIComponent(orderByString)}`);
+        // Parse sorting
+        if (params.orderBy) {
+            model.sorting = params.orderBy.map(order => ({
+                field: order.field,
+                direction: order.direction
+            }));
         }
-        // Expand
-        if (params.expand && params.expand.length > 0) {
-            queryParts.push(`$expand=${encodeURIComponent(params.expand.join(','))}`);
+        // Parse pagination
+        if (params.top !== undefined) {
+            model.pagination.top = params.top;
         }
-        // Top
-        if (params.top) {
-            queryParts.push(`$top=${params.top}`);
+        if (params.skip !== undefined) {
+            model.pagination.skip = params.skip;
         }
-        // Skip
-        if (params.skip) {
-            queryParts.push(`$skip=${params.skip}`);
+        // Parse expand
+        if (params.expand) {
+            model.expand = params.expand;
         }
-        return queryParts.length > 0 ? '?' + queryParts.join('&') : '';
+        return model;
     }
-    formatODataValue(value) {
-        if (typeof value === 'string') {
-            return `'${value.replace(/'/g, "''")}'`;
-        }
-        else if (value instanceof Date) {
-            return `'${value.toISOString()}'`;
-        }
-        else if (typeof value === 'boolean') {
-            return value.toString();
-        }
-        return value;
+    buildODataQueryString(model, originalFields) {
+        const params = this.buildODataFromQueryModel(model, originalFields);
+        return this.toODataQueryString(params);
+    }
+    // Helper method to get field configuration for QueryBuilderComponent
+    getFieldConfig(fieldKey, fields) {
+        return fields.find(f => f.key === fieldKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderService, providedIn: 'root' });
@@ -295,248 +386,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 
-// query-builder.component.ts
-class QueryBuilderComponent extends FieldType {
-    conditions = [];
+// generic-search.component.ts
+class GenericSearchAdvanced {
+    translate = inject(TranslateService);
+    queryBuilder = inject(QueryBuilderService);
+    drawerVisible = false;
+    search = new EventEmitter();
+    paginationChange = new EventEmitter();
+    odataSearch = new EventEmitter();
+    form = new FormGroup({});
+    model = {};
+    options = {};
+    fields = [];
+    fields_ = [];
+    enableQueryBuilder = true;
+    odataConfig = {};
     ngOnInit() {
-        if (this.formControl.value && Array.isArray(this.formControl.value)) {
-            this.conditions = [...this.formControl.value];
-        }
-    }
-    addCondition() {
-        this.conditions.push({ field: '', operator: 'eq', value: '' });
-        this.updateValue();
-    }
-    removeCondition(index) {
-        this.conditions.splice(index, 1);
-        this.updateValue();
+        this.buildQueryUIFields();
     }
-    onFieldChange(condition) {
-        condition.operator = 'eq';
-        condition.value = '';
-        this.updateValue();
+    get filterCount() {
+        const filters = ((this.model?.advancedFilters ?? [])[0]?.conditions?.length || 0) +
+            ((this.model?.sorting ?? [])?.length || 0) +
+            (this.model?.pagination && this.model?.pagination?.top ? 1 : 0);
+        return filters;
     }
-    updateValue() {
-        this.formControl.setValue([...this.conditions]);
-    }
-    getOperatorsForField(fieldKey) {
-        if (!fieldKey)
-            return [];
-        const field = this.props['fields'].find((f) => f.key === fieldKey);
-        const operators = field?.operators || ['eq', 'ne'];
-        return operators.map((op) => ({
-            label: this.getOperatorLabel(op),
-            value: op
-        }));
+    buildQueryUIFields() {
+        if (this.enableQueryBuilder) {
+            this.fields_ = this.queryBuilder.buildQueryUIFields(this.fields);
+        }
+        else {
+            this.fields_ = this.fields;
+        }
     }
-    getOperatorLabel(operator) {
-        const labels = {
-            'eq': 'يساوي',
-            'ne': 'لا يساوي',
-            'contains': 'يحتوي على',
-            'startswith': 'يبدأ بـ',
-            'endswith': 'ينتهي بـ',
-            'gt': 'أكبر من',
-            'ge': 'أكبر أو يساوي',
-            'lt': 'أصغر من',
-            'le': 'أصغر أو يساوي'
-        };
-        return labels[operator] || operator;
+    onSubmit() {
+        // Use the new QueryBuilderService methods
+        const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.fields);
+        // this.odataSearch.emit(odataParams);
+        // Generate query string using the unified method
+        const queryString = this.queryBuilder.toODataQueryString(odataParams);
+        // console.log('OData Query String:', queryString);
+        debugger;
+        if (this.model?.pagination && this.model?.pagination?.top) {
+            this.paginationChange.emit({
+                top: this.model?.pagination?.top,
+                // skip:,
+            });
+        }
+        this.search.emit({
+            filter: this.model['filter'],
+            query: queryString,
+            // sorting:,
+            // top:,
+            // skip:,
+        });
     }
-    getFieldType(fieldKey) {
-        const field = this.props['fields'].find((f) => f.key === fieldKey);
-        return field?.type || 'string';
+    onReset() {
+        this.model = {};
+        this.form.reset();
+        this.paginationChange.emit({
+            top: 10,
+            // skip:,
+        });
+        this.search.emit(this.model);
+        // Emit empty QueryParameters using the proper structure
+        // this.odataSearch.emit({
+        //   filters: [],
+        //   orderBy: [],
+        //   groupBy: [],
+        //   expand: []
+        // });
     }
-    getInputType(fieldKey) {
-        const type = this.getFieldType(fieldKey);
-        return type === 'number' ? 'number' : 'text';
+    // Toggle drawer visibility
+    toggleDrawer() {
+        this.drawerVisible = !this.drawerVisible;
     }
-    getValuePlaceholder(fieldKey) {
-        return 'القيمة';
+    // Close drawer
+    closeDrawer() {
+        this.drawerVisible = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: `
-    <div class="query-builder p-3 border-round border-1 surface-border">
-      <h4 class="mt-0">{{ props.label }}</h4>
-
-      <div *ngFor="let condition of conditions; let i = index" class="condition-row mb-2 p-2 border-round surface-card">
-        <div class="grid grid-nogutter align-items-center gap-2">
-          <!-- Field Selector -->
-          <div class="col">
-            <p-select
-              [options]="props['fields']"
-              optionLabel="label"
-              optionValue="key"
-              [(ngModel)]="condition.field"
-              (onChange)="onFieldChange(condition)"
-              placeholder="اختر الحقل"
-              [showClear]="true"
-              styleClass="w-full">
-            </p-select>
-          </div>
-
-          <!-- Operator Selector -->
-          <div class="col">
-            <p-select
-              [options]="getOperatorsForField(condition.field)"
-              [(ngModel)]="condition.operator"
-              placeholder="المعامل"
-              styleClass="w-full">
-            </p-select>
-          </div>
-
-          <!-- Value Input -->
-          <div class="col" *ngIf="condition.field && getFieldType(condition.field) !== 'boolean'">
-            <input
-              *ngIf="getFieldType(condition.field) !== 'date'"
-              pInputText
-              [(ngModel)]="condition.value"
-              [type]="getInputType(condition.field)"
-              [placeholder]="getValuePlaceholder(condition.field)"
-              styleClass="w-full">
-
-            <p-calendar
-              *ngIf="getFieldType(condition.field) === 'date'"
-              [(ngModel)]="condition.value"
-              dateFormat="yy-mm-dd"
-              styleClass="w-full">
-            </p-calendar>
-          </div>
-
-          <!-- Boolean Value -->
-          <div class="col" *ngIf="condition.field && getFieldType(condition.field) === 'boolean'">
-            <p-checkbox
-              [(ngModel)]="condition.value"
-              [binary]="true">
-            </p-checkbox>
-          </div>
-
-          <!-- Remove Button -->
-          <div class="col-fixed">
-            <button
-              pButton
-              icon="pi pi-times"
-              class="p-button-danger p-button-text"
-              (click)="removeCondition(i)">
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <button
-        pButton
-        icon="pi pi-plus"
-        label="إضافة شرط"
-        class="p-button-outlined w-full"
-        (click)="addCondition()">
-      </button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableQueryBuilder: "enableQueryBuilder", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\r\n  <!-- Search Input with Icon -->\r\n  <p-inputgroup class=\"w-full\">\r\n  <input\r\n    pInputText\r\n    type=\"text\"\r\n    [(ngModel)]=\"model['filter']\"\r\n    placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    (keyup.enter)=\"onSubmit()\"\r\n  />\r\n\r\n\r\n  <p-inputgroup-addon>\r\n    <p-button\r\n      icon=\"pi pi-search\"\r\n      severity=\"secondary\"\r\n      (click)=\"onSubmit()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n<p-inputgroup-addon>\r\n  <div class=\"relative inline-flex\">\r\n    <p-button\r\n      icon=\"pi pi-filter\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"drawerVisible = true\">\r\n    </p-button>\r\n\r\n    <p-badge\r\n      *ngIf=\"filterCount > 0\"\r\n      [value]=\"filterCount\"\r\n      severity=\"warn\"\r\n      size=\"small\"\r\n      class=\"absolute -top-0 -right-0\">\r\n    </p-badge>\r\n  </div>\r\n</p-inputgroup-addon>\r\n\r\n  <p-inputgroup-addon *ngIf=\"model['filter'] || filterCount > 0\">\r\n    <p-button\r\n      icon=\"pi pi-times\"\r\n      severity=\"danger\"\r\n      (click)=\"model['filter']=''; onReset()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n</p-inputgroup>\r\n\r\n\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n @if(drawerVisible){\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); drawerVisible=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i7.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i8.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'formly-query-builder',
-                    standalone: true,
-                    imports: [
+            args: [{ selector: 'lib-generic-search-advanced', standalone: true, imports: [
                         CommonModule,
+                        FormlyForm,
+                        TranslateModule,
+                        ToolbarModule,
+                        ButtonModule,
+                        ReactiveFormsModule,
                         FormsModule,
-                        SelectModule,
+                        InputIconModule,
+                        IconFieldModule,
                         InputTextModule,
-                        ButtonModule,
-                        DatePickerModule,
-                        CheckboxModule
-                    ],
-                    template: `
-    <div class="query-builder p-3 border-round border-1 surface-border">
-      <h4 class="mt-0">{{ props.label }}</h4>
-
-      <div *ngFor="let condition of conditions; let i = index" class="condition-row mb-2 p-2 border-round surface-card">
-        <div class="grid grid-nogutter align-items-center gap-2">
-          <!-- Field Selector -->
-          <div class="col">
-            <p-select
-              [options]="props['fields']"
-              optionLabel="label"
-              optionValue="key"
-              [(ngModel)]="condition.field"
-              (onChange)="onFieldChange(condition)"
-              placeholder="اختر الحقل"
-              [showClear]="true"
-              styleClass="w-full">
-            </p-select>
-          </div>
-
-          <!-- Operator Selector -->
-          <div class="col">
-            <p-select
-              [options]="getOperatorsForField(condition.field)"
-              [(ngModel)]="condition.operator"
-              placeholder="المعامل"
-              styleClass="w-full">
-            </p-select>
-          </div>
-
-          <!-- Value Input -->
-          <div class="col" *ngIf="condition.field && getFieldType(condition.field) !== 'boolean'">
-            <input
-              *ngIf="getFieldType(condition.field) !== 'date'"
-              pInputText
-              [(ngModel)]="condition.value"
-              [type]="getInputType(condition.field)"
-              [placeholder]="getValuePlaceholder(condition.field)"
-              styleClass="w-full">
-
-            <p-calendar
-              *ngIf="getFieldType(condition.field) === 'date'"
-              [(ngModel)]="condition.value"
-              dateFormat="yy-mm-dd"
-              styleClass="w-full">
-            </p-calendar>
-          </div>
-
-          <!-- Boolean Value -->
-          <div class="col" *ngIf="condition.field && getFieldType(condition.field) === 'boolean'">
-            <p-checkbox
-              [(ngModel)]="condition.value"
-              [binary]="true">
-            </p-checkbox>
-          </div>
-
-          <!-- Remove Button -->
-          <div class="col-fixed">
-            <button
-              pButton
-              icon="pi pi-times"
-              class="p-button-danger p-button-text"
-              (click)="removeCondition(i)">
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <button
-        pButton
-        icon="pi pi-plus"
-        label="إضافة شرط"
-        class="p-button-outlined w-full"
-        (click)="addCondition()">
-      </button>
-    </div>
-  `
-                }]
-        }] });
+                        DrawerModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        BadgeModule
+                    ], template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\r\n  <!-- Search Input with Icon -->\r\n  <p-inputgroup class=\"w-full\">\r\n  <input\r\n    pInputText\r\n    type=\"text\"\r\n    [(ngModel)]=\"model['filter']\"\r\n    placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    (keyup.enter)=\"onSubmit()\"\r\n  />\r\n\r\n\r\n  <p-inputgroup-addon>\r\n    <p-button\r\n      icon=\"pi pi-search\"\r\n      severity=\"secondary\"\r\n      (click)=\"onSubmit()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n<p-inputgroup-addon>\r\n  <div class=\"relative inline-flex\">\r\n    <p-button\r\n      icon=\"pi pi-filter\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"drawerVisible = true\">\r\n    </p-button>\r\n\r\n    <p-badge\r\n      *ngIf=\"filterCount > 0\"\r\n      [value]=\"filterCount\"\r\n      severity=\"warn\"\r\n      size=\"small\"\r\n      class=\"absolute -top-0 -right-0\">\r\n    </p-badge>\r\n  </div>\r\n</p-inputgroup-addon>\r\n\r\n  <p-inputgroup-addon *ngIf=\"model['filter'] || filterCount > 0\">\r\n    <p-button\r\n      icon=\"pi pi-times\"\r\n      severity=\"danger\"\r\n      (click)=\"model['filter']=''; onReset()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n</p-inputgroup>\r\n\r\n\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n @if(drawerVisible){\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); drawerVisible=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n" }]
+        }], propDecorators: { search: [{
+                type: Output
+            }], paginationChange: [{
+                type: Output
+            }], odataSearch: [{
+                type: Output
+            }], model: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], enableQueryBuilder: [{
+                type: Input
+            }], odataConfig: [{
+                type: Input
+            }] } });
 
 // sort-builder.component.ts
 class SortBuilderComponent extends FieldType {
     sorts = [];
     directionOptions = [
-        { label: 'تصاعدي', value: 'asc' },
-        { label: 'تنازلي', value: 'desc' }
+        { label: 'تصاعدي (أ → ي)', value: 'asc' },
+        { label: 'تنازلي (ي → أ)', value: 'desc' }
     ];
+    dragStartIndex = -1;
     ngOnInit() {
         if (this.formControl.value && Array.isArray(this.formControl.value)) {
-            this.sorts = [...this.formControl.value];
+            this.sorts = this.formControl.value.map((sort) => ({
+                field: sort.field || '',
+                direction: sort.direction || 'asc'
+            }));
         }
     }
     addSort() {
@@ -547,262 +525,1059 @@ class SortBuilderComponent extends FieldType {
         this.sorts.splice(index, 1);
         this.updateValue();
     }
+    moveSort(fromIndex, toIndex) {
+        if (toIndex >= 0 && toIndex < this.sorts.length) {
+            const movedItem = this.sorts.splice(fromIndex, 1)[0];
+            this.sorts.splice(toIndex, 0, movedItem);
+            this.updateValue();
+        }
+    }
+    onDragStart(index) {
+        this.dragStartIndex = index;
+    }
+    onDrop(event, dropIndex) {
+        if (this.dragStartIndex !== -1 && this.dragStartIndex !== dropIndex) {
+            this.moveSort(this.dragStartIndex, dropIndex);
+        }
+        this.dragStartIndex = -1;
+    }
+    reverseSorts() {
+        this.sorts.forEach(sort => {
+            sort.direction = sort.direction === 'asc' ? 'desc' : 'asc';
+        });
+        this.updateValue();
+    }
+    clearAll() {
+        this.sorts = [];
+        this.updateValue();
+    }
+    getAvailableFields(currentField) {
+        const usedFields = this.sorts.map(s => s.field).filter(f => f && f !== currentField);
+        return this.props['fields'].filter((field) => !usedFields.includes(field.key) || field.key === currentField);
+    }
+    getFieldLabel(fieldKey) {
+        const field = this.props['fields'].find((f) => f.key === fieldKey);
+        return field?.label || fieldKey;
+    }
+    getDirectionIcon(direction) {
+        return direction === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down';
+    }
+    getDirectionColor(direction) {
+        return direction === 'asc' ? 'text-green-500' : 'text-red-500';
+    }
     updateValue() {
-        this.formControl.setValue([...this.sorts]);
+        // Filter out empty sorts and update value
+        const validSorts = this.sorts.filter(sort => sort.field && sort.direction);
+        this.formControl.setValue(validSorts);
+    }
+    // Helper to check if it's the last item
+    get isLast() {
+        return false; // This is used in template context
+    }
+    // Method to get current sort configuration
+    getSortConfiguration() {
+        return this.sorts.filter(sort => sort.field && sort.direction);
+    }
+    // Method to load sort configuration
+    loadSortConfiguration(sortConfig) {
+        if (sortConfig && Array.isArray(sortConfig)) {
+            this.sorts = sortConfig.map(sort => ({
+                field: sort.field || '',
+                direction: sort.direction || 'asc'
+            }));
+            this.updateValue();
+        }
+    }
+    // Method to check if a field is already used in sorting
+    isFieldUsed(fieldKey) {
+        return this.sorts.some(sort => sort.field === fieldKey);
+    }
+    // Get the next available field
+    getNextAvailableField() {
+        const availableFields = this.props['fields'].filter((field) => !this.isFieldUsed(field.key));
+        return availableFields.length > 0 ? availableFields[0].key : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: SortBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: SortBuilderComponent, isStandalone: true, selector: "formly-sort-builder", usesInheritance: true, ngImport: i0, template: `
     <div class="sort-builder p-3 border-round border-1 surface-border">
-      <h4 class="mt-0">{{ props.label }}</h4>
-
-      <div *ngFor="let sort of sorts; let i = index" class="sort-row mb-2 p-2 border-round surface-card">
-        <div class="grid grid-nogutter align-items-center gap-2">
-          <!-- Field Selector -->
-          <div class="col">
-            <p-select
-              [options]="props['fields']"
-              optionLabel="label"
-              optionValue="key"
-              [(ngModel)]="sort.field"
-              placeholder="اختر الحقل للترتيب"
-              [showClear]="true"
-              styleClass="w-full">
-            </p-select>
-          </div>
+      <div class="flex justify-content-between align-items-center mb-3">
+        <h4 class="mt-0 mb-0">{{ props.label }}</h4>
+        <small class="text-500">الأولوية من الأعلى إلى الأسفل</small>
+      </div>
 
-          <!-- Direction Selector -->
-          <div class="col">
-            <p-select
-              [options]="directionOptions"
-              [(ngModel)]="sort.direction"
-              placeholder="الاتجاه"
-              styleClass="w-full">
-            </p-select>
-          </div>
+      <!-- Sort List -->
+      <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
+        <div
+          *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
+          class="sort-row p-2 border-round surface-card"
+          pDraggable
+          pDroppable
+          (onDragStart)="onDragStart(i)"
+          (onDrop)="onDrop($event, i)"
+          [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
+
+          <div class="grid grid-cols-4 align-items-center gap-2">
+            <!-- Drag Handle -->
+
+
+            <!-- Field Selector -->
+            <div class="col-span-2 flex">
+               <button
+                pButton
+                icon="pi pi-bars"
+                type="button"
+                class="p-button-text p-button-plain cursor-move"
+                pTooltip="اسحب لتغيير الأولوية"
+                tooltipPosition="top">
+              </button>
+              <p-select
+                [options]="getAvailableFields(sort.field)"
+                optionLabel="label"
+                optionValue="key"
+                [(ngModel)]="sort.field"
+                (onChange)="updateValue()"
+                placeholder="اختر الحقل للترتيب"
+                [showClear]="true"
+                appendTo="body"
+                styleClass="w-full">
+              </p-select>
+            </div>
+
+
+            <!-- Direction Icon -->
+            <div class="col-fixed">
+              <p-select
+                [options]="directionOptions"
+                [(ngModel)]="sort.direction"
+                (onChange)="updateValue()"
+                placeholder="الاتجاه"
+                appendTo="body"
+                styleClass="w-full">
+              </p-select>
+            </div>
+
+            <!-- Actions -->
+            <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
 
-          <!-- Remove Button -->
-          <div class="col-fixed">
-            <button
-              pButton
-              icon="pi pi-times"
-              class="p-button-danger p-button-text"
-              (click)="removeSort(i)">
-            </button>
+<!--
+               <button
+               outlined
+                pButton
+                [icon]="getDirectionIcon(sort.direction)"
+                type="button"
+                [ngClass]="'p-button-text p-button-sm' + getDirectionColor(sort.direction)"
+                pTooltip="{{ sort.direction === 'asc' ? 'تصاعدي' : 'تنازلي' }}"
+                tooltipPosition="top">
+              </button> -->
+              <!-- Move Up -->
+              <button
+              outlined
+                style="    width: var(--p-button-icon-only-width);"
+                *ngIf="!isFirst"
+                pButton
+                icon="pi pi-arrow-up"
+                type="button"
+                class=" p-button-sm p-button-success"
+                (click)="moveSort(i, i - 1)"
+                pTooltip="تحريك للأعلى"
+                tooltipPosition="top">
+              </button>
+
+              <!-- Move Down -->
+              <button
+              outlined
+                   style="    width: var(--p-button-icon-only-width);"
+                *ngIf="!isLast"
+                pButton
+                icon="pi pi-arrow-down"
+                type="button"
+                class=" p-button-sm p-button-success"
+                (click)="moveSort(i, i + 1)"
+                pTooltip="تحريك للأسفل"
+                tooltipPosition="top">
+              </button>
+
+              <!-- Remove -->
+              <button
+               style="    width: var(--p-button-icon-only-width);"
+                pButton
+                icon="pi pi-times"
+                type="button"
+                class=" p-button-sm p-button-danger"
+                (click)="removeSort(i)"
+                pTooltip="حذف الترتيب"
+                tooltipPosition="top">
+              </button>
+            </div>
           </div>
+
+          <!-- Field Info -->
+          <!-- <div *ngIf="sort.field" class="field-info mt-2 text-sm text-500">
+            <small>الحقل: {{ getFieldLabel(sort.field) }}</small>
+          </div> -->
         </div>
       </div>
 
-      <button
-        pButton
-        icon="pi pi-sort-alt"
-        label="إضافة ترتيب"
-        class="p-button-outlined w-full"
-        (click)="addSort()">
-      </button>
+      <!-- Empty State -->
+      <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
+        <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+        <p class="text-500 mb-3">لا توجد قواعد ترتيب محددة</p>
+        <p class="text-400 text-sm mb-3">سيتم استخدام الترتيب الافتراضي للبيانات</p>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex gap-2">
+        <button
+          pButton
+          icon="pi pi-sort-alt"
+          label="إضافة ترتيب"
+          type="button"
+          class="p-button-outlined flex-1"
+          (click)="addSort()">
+        </button>
+
+        <button
+          *ngIf="sorts.length > 1"
+          pButton
+          icon="pi pi-random"
+          label="عكس الترتيب"
+          type="button"
+          class="p-button-outlined"
+          (click)="reverseSorts()"
+          pTooltip="عكس اتجاه جميع قواعد الترتيب"
+          tooltipPosition="top">
+        </button>
+
+        <button
+          *ngIf="sorts.length > 0"
+          pButton
+          icon="pi pi-trash"
+          type="button"
+          class="p-button-outlined p-button-danger"
+          (click)="clearAll()"
+          pTooltip="مسح جميع قواعد الترتيب"
+          tooltipPosition="top">
+        </button>
+      </div>
+
+      <!-- Summary -->
+      <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
+        <h5 class="mt-0 mb-2 text-sm">ملخص الترتيب:</h5>
+        <div class="text-sm text-500">
+          <span *ngFor="let sort of sorts; let i = index" class="sort-step">
+            <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+            <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+              {{ sort.direction === 'asc' ? '▲' : '▼' }}
+            </span>
+            <span *ngIf="!isLast"> ثم </span>
+          </span>
+        </div>
+      </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i5$1.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: SortBuilderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'formly-sort-builder',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, SelectModule, ButtonModule],
-                    template: `
+            args: [{ selector: 'formly-sort-builder', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SelectModule,
+                        ButtonModule,
+                        DragDropModule,
+                        TooltipModule
+                    ], template: `
     <div class="sort-builder p-3 border-round border-1 surface-border">
-      <h4 class="mt-0">{{ props.label }}</h4>
-
-      <div *ngFor="let sort of sorts; let i = index" class="sort-row mb-2 p-2 border-round surface-card">
-        <div class="grid grid-nogutter align-items-center gap-2">
-          <!-- Field Selector -->
-          <div class="col">
-            <p-select
-              [options]="props['fields']"
-              optionLabel="label"
-              optionValue="key"
-              [(ngModel)]="sort.field"
-              placeholder="اختر الحقل للترتيب"
-              [showClear]="true"
-              styleClass="w-full">
-            </p-select>
-          </div>
+      <div class="flex justify-content-between align-items-center mb-3">
+        <h4 class="mt-0 mb-0">{{ props.label }}</h4>
+        <small class="text-500">الأولوية من الأعلى إلى الأسفل</small>
+      </div>
 
-          <!-- Direction Selector -->
-          <div class="col">
-            <p-select
-              [options]="directionOptions"
-              [(ngModel)]="sort.direction"
-              placeholder="الاتجاه"
-              styleClass="w-full">
-            </p-select>
-          </div>
+      <!-- Sort List -->
+      <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
+        <div
+          *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
+          class="sort-row p-2 border-round surface-card"
+          pDraggable
+          pDroppable
+          (onDragStart)="onDragStart(i)"
+          (onDrop)="onDrop($event, i)"
+          [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
 
-          <!-- Remove Button -->
-          <div class="col-fixed">
-            <button
-              pButton
-              icon="pi pi-times"
-              class="p-button-danger p-button-text"
-              (click)="removeSort(i)">
-            </button>
+          <div class="grid grid-cols-4 align-items-center gap-2">
+            <!-- Drag Handle -->
+
+
+            <!-- Field Selector -->
+            <div class="col-span-2 flex">
+               <button
+                pButton
+                icon="pi pi-bars"
+                type="button"
+                class="p-button-text p-button-plain cursor-move"
+                pTooltip="اسحب لتغيير الأولوية"
+                tooltipPosition="top">
+              </button>
+              <p-select
+                [options]="getAvailableFields(sort.field)"
+                optionLabel="label"
+                optionValue="key"
+                [(ngModel)]="sort.field"
+                (onChange)="updateValue()"
+                placeholder="اختر الحقل للترتيب"
+                [showClear]="true"
+                appendTo="body"
+                styleClass="w-full">
+              </p-select>
+            </div>
+
+
+            <!-- Direction Icon -->
+            <div class="col-fixed">
+              <p-select
+                [options]="directionOptions"
+                [(ngModel)]="sort.direction"
+                (onChange)="updateValue()"
+                placeholder="الاتجاه"
+                appendTo="body"
+                styleClass="w-full">
+              </p-select>
+            </div>
+
+            <!-- Actions -->
+            <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+
+<!--
+               <button
+               outlined
+                pButton
+                [icon]="getDirectionIcon(sort.direction)"
+                type="button"
+                [ngClass]="'p-button-text p-button-sm' + getDirectionColor(sort.direction)"
+                pTooltip="{{ sort.direction === 'asc' ? 'تصاعدي' : 'تنازلي' }}"
+                tooltipPosition="top">
+              </button> -->
+              <!-- Move Up -->
+              <button
+              outlined
+                style="    width: var(--p-button-icon-only-width);"
+                *ngIf="!isFirst"
+                pButton
+                icon="pi pi-arrow-up"
+                type="button"
+                class=" p-button-sm p-button-success"
+                (click)="moveSort(i, i - 1)"
+                pTooltip="تحريك للأعلى"
+                tooltipPosition="top">
+              </button>
+
+              <!-- Move Down -->
+              <button
+              outlined
+                   style="    width: var(--p-button-icon-only-width);"
+                *ngIf="!isLast"
+                pButton
+                icon="pi pi-arrow-down"
+                type="button"
+                class=" p-button-sm p-button-success"
+                (click)="moveSort(i, i + 1)"
+                pTooltip="تحريك للأسفل"
+                tooltipPosition="top">
+              </button>
+
+              <!-- Remove -->
+              <button
+               style="    width: var(--p-button-icon-only-width);"
+                pButton
+                icon="pi pi-times"
+                type="button"
+                class=" p-button-sm p-button-danger"
+                (click)="removeSort(i)"
+                pTooltip="حذف الترتيب"
+                tooltipPosition="top">
+              </button>
+            </div>
           </div>
+
+          <!-- Field Info -->
+          <!-- <div *ngIf="sort.field" class="field-info mt-2 text-sm text-500">
+            <small>الحقل: {{ getFieldLabel(sort.field) }}</small>
+          </div> -->
         </div>
       </div>
 
-      <button
-        pButton
-        icon="pi pi-sort-alt"
-        label="إضافة ترتيب"
-        class="p-button-outlined w-full"
-        (click)="addSort()">
-      </button>
+      <!-- Empty State -->
+      <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
+        <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+        <p class="text-500 mb-3">لا توجد قواعد ترتيب محددة</p>
+        <p class="text-400 text-sm mb-3">سيتم استخدام الترتيب الافتراضي للبيانات</p>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex gap-2">
+        <button
+          pButton
+          icon="pi pi-sort-alt"
+          label="إضافة ترتيب"
+          type="button"
+          class="p-button-outlined flex-1"
+          (click)="addSort()">
+        </button>
+
+        <button
+          *ngIf="sorts.length > 1"
+          pButton
+          icon="pi pi-random"
+          label="عكس الترتيب"
+          type="button"
+          class="p-button-outlined"
+          (click)="reverseSorts()"
+          pTooltip="عكس اتجاه جميع قواعد الترتيب"
+          tooltipPosition="top">
+        </button>
+
+        <button
+          *ngIf="sorts.length > 0"
+          pButton
+          icon="pi pi-trash"
+          type="button"
+          class="p-button-outlined p-button-danger"
+          (click)="clearAll()"
+          pTooltip="مسح جميع قواعد الترتيب"
+          tooltipPosition="top">
+        </button>
+      </div>
+
+      <!-- Summary -->
+      <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
+        <h5 class="mt-0 mb-2 text-sm">ملخص الترتيب:</h5>
+        <div class="text-sm text-500">
+          <span *ngFor="let sort of sorts; let i = index" class="sort-step">
+            <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+            <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+              {{ sort.direction === 'asc' ? '▲' : '▼' }}
+            </span>
+            <span *ngIf="!isLast"> ثم </span>
+          </span>
+        </div>
+      </div>
     </div>
-  `
-                }]
+  ` }]
         }] });
 
-// generic-search.component.ts
-class GenericSearchAdvanced {
-    overlay;
+// query-builder.component.ts
+class QueryBuilderComponent extends FieldType {
+    queryBuilderService = inject(QueryBuilderService);
+    cdr = inject(ChangeDetectorRef);
     translate = inject(TranslateService);
-    queryBuilder = inject(QueryBuilderService);
-    drawerVisible = false;
-    search = new EventEmitter();
-    odataSearch = new EventEmitter();
-    form = new FormGroup({});
-    model = {};
-    options = {};
-    fields = [];
-    fields_ = [];
-    enableQueryBuilder = false;
-    odataConfig = {};
-    ngOnInit() {
-        this.buildQueryUIFields();
+    groups = [];
+    logicalOperators = [
+        { label: this.translate.instant('and'), value: 'and' },
+        { label: this.translate.instant('or'), value: 'or' }
+    ];
+    onAndClick(group, event) {
+        group.logicalOperator = 'and';
+        this.updateValue();
     }
-    buildQueryUIFields() {
-        if (this.enableQueryBuilder) {
-            this.fields_ = this.queryBuilder.buildQueryUIFields(this.fields);
+    onOrClick(group, event) {
+        group.logicalOperator = 'or';
+        this.updateValue();
+    }
+    ngOnInit() {
+        // Initialize with existing value or default group with conditions
+        if (this.formControl.value && (Array.isArray(this.formControl.value) && this.formControl.value.length > 0)) {
+            this.groups = this.formControl.value.map((group, groupIndex) => ({
+                logicalOperator: group.logicalOperator || 'and',
+                groupLogicalOperator: group.groupLogicalOperator || 'and',
+                conditions: this.initializeConditionsWithFieldConfigs(group.conditions || [], groupIndex)
+            }));
         }
         else {
-            this.fields_ = this.fields;
+            // Start with default conditions for important fields
+            this.initializeDefaultConditions();
         }
     }
-    onSubmit() {
-        this.search.emit(this.model);
-        if (this.enableQueryBuilder) {
-            const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.fields);
-            this.odataSearch.emit(odataParams);
-            // Generate query string
-            const queryString = this.queryBuilder.toODataQueryString(odataParams);
-            console.log('OData Query String:', queryString);
+    getLogicalOperatorText(operator) {
+        const operatorMap = {
+            'and': this.translate.instant('and'),
+            'or': this.translate.instant('or'),
+            'not': this.translate.instant('not')
+        };
+        return operatorMap[operator] || operator;
+    }
+    initializeDefaultConditions() {
+        // Get default fields using the service logic
+        const defaultFields = this.getDefaultFields();
+        const defaultConditions = [];
+        for (let i = 0; i < defaultFields.length; i++) {
+            const field = defaultFields[i];
+            defaultConditions.push(this.createDefaultCondition(field, 0, i));
         }
-        else {
-            // Use existing logic for non-query-builder mode
-            const odataParams = this.buildODataQueryParameters(this.model);
-            this.odataSearch.emit(odataParams);
+        this.groups = [{
+                logicalOperator: 'and',
+                groupLogicalOperator: 'and',
+                conditions: defaultConditions
+            }];
+        this.updateValue();
+    }
+    getDefaultFields() {
+        // Get all filterable fields
+        const filterableFields = this.props['fields'].filter((field) => field.filterable !== false && field.key && this.isSupportedFieldType(field.type));
+        // If no filterable fields, return empty array
+        if (filterableFields.length === 0) {
+            return [];
         }
+        const selectedFields = filterableFields;
+        return selectedFields;
     }
-    onReset() {
-        this.model = {};
-        this.form.reset();
-        this.search.emit(this.model);
-        this.odataSearch.emit({
-            filters: [],
-            orderBy: [],
-            groupBy: [],
-            expand: []
-        });
+    isSupportedFieldType(fieldType) {
+        // Only include field types that make sense for filtering
+        const supportedTypes = ['input', 'number', 'datepicker', 'select', 'checkbox', 'generic-selector', 'switch', 'radio', 'textarea'];
+        return supportedTypes.includes(fieldType);
     }
-    // Existing OData building methods for backward compatibility
-    buildODataQueryParameters(model) {
-        const params = {
-            filters: [],
-            orderBy: [],
-            groupBy: [],
-            expand: this.odataConfig.expandFields || []
+    getFieldLabel(key) {
+        const f = this.props['fields']?.find((x) => x.key === key);
+        return f ? f.label : '';
+    }
+    createDefaultCondition(field, groupIndex, conditionIndex) {
+        const defaultCondition = {
+            field: field.key,
+            operator: this.getDefaultOperator(field.type),
+            value: this.getDefaultValue(field.type),
+            valueFieldConfig: null,
+            operatorsForField: this.getOperatorsForField(field),
         };
-        Object.keys(model).forEach(key => {
-            const value = model[key];
-            if (value === null || value === undefined || value === '' ||
-                (Array.isArray(value) && value.length === 0)) {
-                return;
-            }
-            if (typeof value === 'object' && value !== null) {
-                this.processComplexField(key, value, params);
-            }
-            else {
-                params.filters.push({
-                    field: key,
-                    operator: 'eq',
-                    value: value,
-                    logicalOperator: 'and'
-                });
+        // Generate field config for this condition
+        defaultCondition.valueFieldConfig = this.generateValueFieldConfig(defaultCondition, groupIndex, conditionIndex);
+        return defaultCondition;
+    }
+    initializeConditionsWithFieldConfigs(conditions, groupIndex) {
+        return conditions.map((condition, conditionIndex) => ({
+            ...condition,
+            operatorsForField: this.getOperatorsForField(condition.field),
+            valueFieldConfig: condition.field ?
+                this.generateValueFieldConfig(condition, groupIndex, conditionIndex) :
+                null
+        }));
+    }
+    // Field type and operator methods that use QueryBuilderService logic
+    getFieldType(fieldKey) {
+        const field = this.props['fields'].find((f) => f.key === fieldKey);
+        return field?.type || 'input';
+    }
+    getOperatorsForField(fieldKey) {
+        if (!fieldKey)
+            return [];
+        const field = this.props['fields'].find((f) => f.key === fieldKey);
+        // Use operators from the field configuration
+        const operators = field?.operators || this.queryBuilderService['getOperatorsForType'](field?.type);
+        return operators.map((op) => ({
+            label: this.getOperatorLabel(op).label,
+            icon: this.getOperatorLabel(op).icon,
+            value: op
+        }));
+    }
+    getOperatorLabel(operator) {
+        const map = {
+            eq: { label: this.translate.instant('eq'), icon: 'pi pi-equals' },
+            ne: { label: this.translate.instant('ne'), icon: 'pi pi-hashtag' },
+            contains: { label: this.translate.instant('contains'), icon: 'pi pi-search' },
+            startswith: { label: this.translate.instant('startswith'), icon: 'pi pi-arrow-right' },
+            endswith: { label: this.translate.instant('endswith'), icon: 'pi pi-arrow-left' },
+            gt: { label: this.translate.instant('gt'), icon: 'pi pi-chevron-right' },
+            ge: { label: this.translate.instant('ge'), icon: 'pi pi-angle-double-right' },
+            lt: { label: this.translate.instant('lt'), icon: 'pi pi-chevron-left' },
+            le: { label: this.translate.instant('le'), icon: 'pi pi-angle-double-left' },
+            in: { label: this.translate.instant('in'), icon: 'pi pi-list' },
+            notin: { label: this.translate.instant('notin'), icon: 'pi pi-ban' },
+        };
+        return map[operator] || { label: operator, icon: 'pi pi-question' };
+    }
+    getDefaultOperator(fieldType) {
+        // Use service's field type config
+        const fieldConfig = this.queryBuilderService['fieldTypeConfig'][fieldType];
+        return fieldConfig ? fieldConfig.defaultOperator : 'contains';
+    }
+    getDefaultValue(fieldType) {
+        // Use service's field type config
+        const fieldConfig = this.queryBuilderService['fieldTypeConfig'][fieldType];
+        return fieldConfig ? fieldConfig.defaultValue : '';
+    }
+    getFieldProps(fieldKey) {
+        const field = this.props['fields'].find((f) => f.key === fieldKey);
+        // Return props without label to avoid duplication
+        const props = { ...field?.props };
+        delete props.label;
+        delete props.loadDefault;
+        return props;
+    }
+    generateValueFieldConfig(condition, groupIndex, conditionIndex) {
+        const fieldType = this.getFieldType(condition.field);
+        const fieldProps = this.getFieldProps(condition.field);
+        const fieldKey = this.getConditionValueKey(groupIndex, conditionIndex);
+        return {
+            key: fieldKey,
+            type: fieldType,
+            wrappers: [],
+            props: {
+                ...fieldProps, // Include all other props from the original field
+                placeholder: '',
+                loadDefault: false,
+                change: (field, event) => {
+                    this.updateValue();
+                }
+            },
+            hooks: {
+                onInit: (field) => {
+                    if (field.formControl && condition.value !== undefined) {
+                        field.formControl.setValue(condition.value, { emitEvent: false });
+                    }
+                }
+            },
+            modelOptions: {
+                updateOn: 'change'
             }
+        };
+    }
+    getConditionValueKey(groupIndex, conditionIndex) {
+        return `condition_${groupIndex}_${conditionIndex}_value`;
+    }
+    // Group Management
+    addGroup() {
+        this.groups.push({
+            logicalOperator: 'and',
+            groupLogicalOperator: 'and',
+            conditions: []
         });
-        return params;
+        this.updateValue();
     }
-    processComplexField(key, value, params) {
-        if (value.from || value.to) {
-            if (value.from) {
-                params.filters.push({
-                    field: key,
-                    operator: 'ge',
-                    value: value.from,
-                    logicalOperator: 'and'
-                });
+    removeGroup(groupIndex) {
+        this.groups.splice(groupIndex, 1);
+        this.updateValue();
+    }
+    // Condition Management
+    addCondition(groupIndex = 0) {
+        if (!this.groups[groupIndex]) {
+            this.addGroup();
+        }
+        const newCondition = {
+            field: '',
+            operator: 'eq',
+            value: '',
+            valueFieldConfig: {}
+        };
+        const conditionIndex = this.groups[groupIndex].conditions.length;
+        newCondition.valueFieldConfig = this.generateValueFieldConfig(newCondition, groupIndex, conditionIndex);
+        this.groups[groupIndex].conditions.push(newCondition);
+        this.updateValue();
+    }
+    onFieldChange(condition, groupIndex, conditionIndex) {
+        condition.operator = this.getDefaultOperator(this.getFieldType(condition.field));
+        condition.value = this.getDefaultValue(this.getFieldType(condition.field));
+        // Generate and store the field config when field changes
+        condition.valueFieldConfig = this.generateValueFieldConfig(condition, groupIndex, conditionIndex);
+        condition.operatorsForField = this.getOperatorsForField(condition.field);
+        this.updateValue();
+    }
+    addConditionToLastGroup() {
+        const lastGroupIndex = this.groups.length - 1;
+        if (lastGroupIndex >= 0) {
+            this.addCondition(lastGroupIndex);
+        }
+        else {
+            this.addGroup();
+            this.addCondition(0);
+        }
+    }
+    removeCondition(groupIndex, conditionIndex) {
+        if (this.groups[groupIndex]) {
+            this.groups[groupIndex].conditions.splice(conditionIndex, 1);
+            // Remove empty groups
+            if (this.groups[groupIndex].conditions.length === 0 && this.groups.length > 1) {
+                this.removeGroup(groupIndex);
             }
-            if (value.to) {
-                params.filters.push({
-                    field: key,
-                    operator: 'le',
-                    value: value.to,
-                    logicalOperator: 'and'
-                });
+            this.updateValue();
+        }
+    }
+    // Value Management
+    updateValue() {
+        // Sync condition values from form model with safe access
+        for (let g = 0; g < this.groups.length; g++) {
+            const group = this.groups[g];
+            for (let c = 0; c < group.conditions.length; c++) {
+                const condition = group.conditions[c];
+                const fieldKey = this.getConditionValueKey(g, c);
+                const modelValue = this.model?.[fieldKey];
+                if (modelValue !== undefined) {
+                    condition.value = modelValue;
+                }
+            }
+        }
+        const filteredGroups = [];
+        for (let g = 0; g < this.groups.length; g++) {
+            const group = this.groups[g];
+            const validConditions = [];
+            for (let c = 0; c < group.conditions.length; c++) {
+                const condition = group.conditions[c];
+                if (condition.field &&
+                    condition.operator &&
+                    condition.value !== undefined &&
+                    condition.value !== null &&
+                    condition.value !== '') {
+                    validConditions.push(condition);
+                }
+            }
+            if (validConditions.length > 0) {
+                filteredGroups.push({ ...group, conditions: validConditions });
             }
         }
+        this.formControl.setValue(filteredGroups);
+        this.cdr.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableQueryBuilder: "enableQueryBuilder", odataConfig: "odataConfig" }, outputs: { search: "search", odataSearch: "odataSearch" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\r\n  <!-- Search Input with Icon -->\r\n  <p-iconfield iconPosition=\"left\">\r\n    <input\r\n      pInputText\r\n      type=\"text\"\r\n      (keyup.enter)=\"onSubmit()\"\r\n      [(ngModel)]=\"model['filter']\"\r\n      placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    />\r\n  </p-iconfield>\r\n\r\n  <!-- Filter Button -->\r\n  <p-button\r\n    icon=\"pi pi-filter\"\r\n    outlined\r\n    severity=\"secondary\"\r\n    (onClick)=\"drawerVisible = true\"\r\n  ></p-button>\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button type=\"submit\" pButton size=\"small\" label=\"{{ 'SEARCH' | translate }}\"></button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</p-drawer>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i6$1.LegacyFormlyForm, selector: "formly-form" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+    clearAll() {
+        this.groups = [];
+        this.addGroup();
+    }
+    // Helper methods
+    getQueryStructure() {
+        return this.groups;
+    }
+    loadQueryStructure(queryStructure) {
+        if (queryStructure && Array.isArray(queryStructure)) {
+            this.groups = queryStructure.map((group, groupIndex) => ({
+                logicalOperator: group.logicalOperator || 'and',
+                groupLogicalOperator: group.groupLogicalOperator || 'and',
+                conditions: this.initializeConditionsWithFieldConfigs(group.conditions || [], groupIndex)
+            }));
+            this.updateValue();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7$1.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-generic-search-advanced', standalone: true, imports: [
+            args: [{ selector: 'formly-query-builder', standalone: true, imports: [
                         CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
                         FormlyForm,
+                        TooltipModule,
+                        MenuModule,
                         TranslateModule,
-                        ToolbarModule,
-                        ButtonModule,
-                        ReactiveFormsModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
                         PopoverModule,
-                        FormsModule,
-                        InputIconModule,
-                        IconFieldModule,
-                        InputTextModule,
-                        DrawerModule,
-                        FormlyModule,
-                        QueryBuilderComponent,
-                        SortBuilderComponent
-                    ], template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\r\n  <!-- Search Input with Icon -->\r\n  <p-iconfield iconPosition=\"left\">\r\n    <input\r\n      pInputText\r\n      type=\"text\"\r\n      (keyup.enter)=\"onSubmit()\"\r\n      [(ngModel)]=\"model['filter']\"\r\n      placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    />\r\n  </p-iconfield>\r\n\r\n  <!-- Filter Button -->\r\n  <p-button\r\n    icon=\"pi pi-filter\"\r\n    outlined\r\n    severity=\"secondary\"\r\n    (onClick)=\"drawerVisible = true\"\r\n  ></p-button>\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button type=\"submit\" pButton size=\"small\" label=\"{{ 'SEARCH' | translate }}\"></button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</p-drawer>\r\n" }]
-        }], propDecorators: { overlay: [{
-                type: ViewChild,
-                args: ['overlay']
-            }], search: [{
-                type: Output
-            }], odataSearch: [{
-                type: Output
-            }], model: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], enableQueryBuilder: [{
-                type: Input
-            }], odataConfig: [{
-                type: Input
-            }] } });
+                        ListboxModule
+                    ], template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"] }]
+        }] });
+
+// tab-type.component.ts
+class TabTypeComponent extends FieldType {
+    activeTabValue = '0';
+    ngOnInit() {
+        if (this.props['activeIndex'] !== undefined) {
+            this.activeTabValue = this.props['activeIndex'].toString();
+        }
+    }
+    resolveBadge(tab) {
+        const badge = tab.props?.['badge'];
+        if (typeof badge === 'function') {
+            const result = badge(tab);
+            return result == 0 ? null : result;
+        }
+        return badge ?? null;
+    }
+    onTabChange(newValue) {
+        this.activeTabValue = newValue;
+        if (this.props['onTabChange']) {
+            this.props['onTabChange']({
+                activeIndex: parseInt(newValue),
+                tab: this.field.fieldGroup?.[parseInt(newValue)]
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TabTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: TabTypeComponent, isStandalone: true, selector: "formly-tab-type", usesInheritance: true, ngImport: i0, template: `
+    <p-tabs
+      [value]="activeTabValue"
+      [scrollable]="props['scrollable'] !== false"
+      [lazy]="props['lazy'] !== false"
+      (valueChange)="onTabChange($event)">
+
+      <p-tablist>
+        <p-tab
+          *ngFor="let tab of field.fieldGroup; let i = index"
+          [value]="i.toString()"
+          [disabled]="tab.props?.disabled">
+
+          @if(tab.props){
+          <div class="flex align-items-center gap-2">
+            <!-- Left Icon -->
+            <i *ngIf="tab.props['leftIcon']" [class]="tab.props['leftIcon']" class="text-sm"></i>
+
+            <!-- Label -->
+            <span>{{ (tab.props['label'] ?? '') | translate }}</span>
+
+            <!-- Badge -->
+
+             <p-badge
+              *ngIf="resolveBadge(tab) !== null"
+              [value]="resolveBadge(tab)"
+              size="small">
+            </p-badge>
+
+            <!-- Right Icon -->
+            <i *ngIf="tab.props['rightIcon']" [class]="tab.props['rightIcon']" class="text-sm"></i>
+          </div>
+          }
+        </p-tab>
+      </p-tablist>
+
+      <p-tabpanels style="padding: 0;">
+        <p-tabpanel
+          *ngFor="let tab of field.fieldGroup; let i = index"
+          [value]="i.toString()">
+
+          <div class="p-3">
+            <formly-field [field]="tab"></formly-field>
+
+            <!-- Empty state -->
+            <div
+              *ngIf="!tab.fieldGroup || tab.fieldGroup.length === 0"
+              class="empty-tab text-center p-4 text-500">
+              <i class="pi pi-inbox text-2xl mb-2"></i>
+              <p>لا توجد حقول في هذه التبويبة</p>
+            </div>
+          </div>
+        </p-tabpanel>
+      </p-tabpanels>
+    </p-tabs>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$1.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$1.TabList, selector: "p-tablist" }, { kind: "component", type: i2$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TabTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-tab-type',
+                    template: `
+    <p-tabs
+      [value]="activeTabValue"
+      [scrollable]="props['scrollable'] !== false"
+      [lazy]="props['lazy'] !== false"
+      (valueChange)="onTabChange($event)">
+
+      <p-tablist>
+        <p-tab
+          *ngFor="let tab of field.fieldGroup; let i = index"
+          [value]="i.toString()"
+          [disabled]="tab.props?.disabled">
+
+          @if(tab.props){
+          <div class="flex align-items-center gap-2">
+            <!-- Left Icon -->
+            <i *ngIf="tab.props['leftIcon']" [class]="tab.props['leftIcon']" class="text-sm"></i>
+
+            <!-- Label -->
+            <span>{{ (tab.props['label'] ?? '') | translate }}</span>
+
+            <!-- Badge -->
+
+             <p-badge
+              *ngIf="resolveBadge(tab) !== null"
+              [value]="resolveBadge(tab)"
+              size="small">
+            </p-badge>
+
+            <!-- Right Icon -->
+            <i *ngIf="tab.props['rightIcon']" [class]="tab.props['rightIcon']" class="text-sm"></i>
+          </div>
+          }
+        </p-tab>
+      </p-tablist>
+
+      <p-tabpanels style="padding: 0;">
+        <p-tabpanel
+          *ngFor="let tab of field.fieldGroup; let i = index"
+          [value]="i.toString()">
+
+          <div class="p-3">
+            <formly-field [field]="tab"></formly-field>
+
+            <!-- Empty state -->
+            <div
+              *ngIf="!tab.fieldGroup || tab.fieldGroup.length === 0"
+              class="empty-tab text-center p-4 text-500">
+              <i class="pi pi-inbox text-2xl mb-2"></i>
+              <p>لا توجد حقول في هذه التبويبة</p>
+            </div>
+          </div>
+        </p-tabpanel>
+      </p-tabpanels>
+    </p-tabs>
+  `,
+                    standalone: true,
+                    imports: [CommonModule, TabsModule, BadgeModule, FormlyField, TranslateModule]
+                }]
+        }] });
+
+// group-type.component.ts
+class GroupTypeComponent extends FieldType {
+    collapsed = this.props.collapsedByDefault ?? false;
+    get showValidation() {
+        return this.props.showValidation !== false &&
+            this.formControl.invalid && (this.formControl.dirty || this.formControl.touched);
+    }
+    get validationIcon() {
+        if (this.formControl.valid)
+            return 'pi pi-check-circle text-green-500';
+        if (this.formControl.invalid)
+            return 'pi pi-exclamation-circle text-red-500';
+        return 'pi pi-circle text-500';
+    }
+    get validationText() {
+        return this.formControl.valid ? 'جميع الحقول صالحة' : 'هناك أخطاء في بعض الحقول';
+    }
+    get groupClass() {
+        const v = this.props.variant || 'default';
+        const map = {
+            default: 'border-round border-1 border-200 bg-white mb-3',
+            card: 'border-round surface-card shadow-sm mb-3',
+            bordered: 'border-round border-1 border-300 surface-section mb-3',
+            transparent: 'border-0 bg-transparent mb-3'
+        };
+        return map[v];
+    }
+    get gridClass() {
+        const cols = this.props.columns || 1;
+        const gap = this.props.gap || 'normal';
+        const gaps = { none: 'gap-0', small: 'gap-2', normal: 'gap-3', large: 'gap-4' };
+        return `grid grid-cols-1 ${cols > 1 ? 'md:grid-cols-' + cols : ''} ${gaps[gap]}`;
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    isRequired() {
+        return this.field.fieldGroup?.some(f => f.props?.required || f.validators?.['required']) ?? false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GroupTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GroupTypeComponent, isStandalone: true, selector: "formly-group-type", usesInheritance: true, ngImport: i0, template: `
+    <div [class]="groupClass">
+      <div *ngIf="props.label || props.collapsible" class="flex justify-between items-center p-2"
+           (click)="props.collapsible && toggle()">
+        <div class="flex items-center gap-2">
+          <i *ngIf="props.collapsible" [class]="collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
+          <label *ngIf="props.label" class="font-semibold">{{ props.label }}</label>
+          <i *ngIf="isRequired()" class="pi pi-asterisk text-red-500 text-xs" pTooltip="حقل مطلوب"></i>
+        </div>
+        <div class="flex gap-2">
+          <i *ngIf="props.description && !collapsed" class="pi pi-info-circle text-500"
+             pTooltip="{{ props.description }}"></i>
+          <i *ngIf="showValidation" [class]="validationIcon" [pTooltip]="validationText"></i>
+          <button *ngFor="let a of props.actions || []" pButton type="button" class="p-button-text p-button-sm"
+                  [icon]="a.icon" [pTooltip]="a.tooltip" [ngClass]="a.styleClass"
+                  (click)="a.handler?.(field, form, this); $event.stopPropagation()"></button>
+        </div>
+      </div>
+
+      <div *ngIf="!collapsed" class="p-3 pt-0" [ngClass]="props.compact ? 'compact-layout' : ''">
+        <p *ngIf="props.description && props.showDescription" class="text-500 text-sm mb-2">{{ props.description }}</p>
+
+        <div [ngClass]="gridClass">
+  <ng-container *ngFor="let f of field.fieldGroup">
+    <formly-field [field]="f"></formly-field>
+    <small *ngIf="f.props?.description"
+           class="block text-500 text-xs mt-1 ml-1">
+      {{ f.props?.description  }}
+    </small>
+  </ng-container>
+</div>
+
+
+        <div *ngIf="!field.fieldGroup?.length" class="text-center p-4 surface-section border-round">
+          <i class="pi pi-inbox text-4xl text-500 mb-2"></i>
+          <p class="text-500">لا توجد حقول</p>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: BadgeModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GroupTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-group-type',
+                    standalone: true,
+                    imports: [CommonModule, FormlyField, ButtonModule, TooltipModule, BadgeModule],
+                    template: `
+    <div [class]="groupClass">
+      <div *ngIf="props.label || props.collapsible" class="flex justify-between items-center p-2"
+           (click)="props.collapsible && toggle()">
+        <div class="flex items-center gap-2">
+          <i *ngIf="props.collapsible" [class]="collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
+          <label *ngIf="props.label" class="font-semibold">{{ props.label }}</label>
+          <i *ngIf="isRequired()" class="pi pi-asterisk text-red-500 text-xs" pTooltip="حقل مطلوب"></i>
+        </div>
+        <div class="flex gap-2">
+          <i *ngIf="props.description && !collapsed" class="pi pi-info-circle text-500"
+             pTooltip="{{ props.description }}"></i>
+          <i *ngIf="showValidation" [class]="validationIcon" [pTooltip]="validationText"></i>
+          <button *ngFor="let a of props.actions || []" pButton type="button" class="p-button-text p-button-sm"
+                  [icon]="a.icon" [pTooltip]="a.tooltip" [ngClass]="a.styleClass"
+                  (click)="a.handler?.(field, form, this); $event.stopPropagation()"></button>
+        </div>
+      </div>
+
+      <div *ngIf="!collapsed" class="p-3 pt-0" [ngClass]="props.compact ? 'compact-layout' : ''">
+        <p *ngIf="props.description && props.showDescription" class="text-500 text-sm mb-2">{{ props.description }}</p>
+
+        <div [ngClass]="gridClass">
+  <ng-container *ngFor="let f of field.fieldGroup">
+    <formly-field [field]="f"></formly-field>
+    <small *ngIf="f.props?.description"
+           class="block text-500 text-xs mt-1 ml-1">
+      {{ f.props?.description  }}
+    </small>
+  </ng-container>
+</div>
+
+
+        <div *ngIf="!field.fieldGroup?.length" class="text-center p-4 surface-section border-round">
+          <i class="pi pi-inbox text-4xl text-500 mb-2"></i>
+          <p class="text-500">لا توجد حقول</p>
+        </div>
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+const formlyConfig = provideFormlyConfig({
+    types: [
+        {
+            name: 'query-builder',
+            component: QueryBuilderComponent
+        },
+        {
+            name: 'sort-builder',
+            component: SortBuilderComponent
+        },
+        {
+            name: 'group', component: GroupTypeComponent
+        },
+        {
+            name: 'tab-type',
+            component: TabTypeComponent
+        },
+    ],
+});
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { GenericSearchAdvanced, GenericSearchAdvancedModule, QueryBuilderComponent, QueryBuilderService, SortBuilderComponent };
+export { GenericSearchAdvanced, GenericSearchAdvancedModule, GroupTypeComponent, QueryBuilderComponent, QueryBuilderService, SortBuilderComponent, TabTypeComponent, formlyConfig };
 //# sourceMappingURL=elite.framework-ng.ui.core-generic-search-advanced.mjs.map