@es.framework/ng.ui.core 2.0.58

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

@@ -0,0 +1,2995 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, Injectable, EventEmitter, Input, Output, Component, ChangeDetectorRef } from '@angular/core';
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, FormsModule, FormControl, FormArray } from '@angular/forms';
+import { FormlyForm, FieldType, FormlyField, provideFormlyConfig } from '@ngx-formly/core';
+import { TranslatePipe } from '@es.framework/ng.core/pipes';
+import { ToolbarModule } from 'primeng/toolbar';
+import * as i2 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { InputIconModule } from 'primeng/inputicon';
+import { IconFieldModule } from 'primeng/iconfield';
+import * as i4 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i5 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { LocalizationService, QueryParser } from '@es.framework/ng.core/services';
+import * as i7 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i6 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i8 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import * as i1 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 i6$2 from 'primeng/listbox';
+import { ListboxModule } from 'primeng/listbox';
+import * as i2$1 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import { DatePickerModule } from 'primeng/datepicker';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { MenuModule } from 'primeng/menu';
+import * as i5$2 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import * as i1$3 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+
+class GenericSearchAdvancedModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvancedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvancedModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvancedModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvancedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+// query-builder.service.ts
+class QueryBuilderService {
+    translate = inject(LocalizationService);
+    // 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, enableSelect, enableGroup) {
+        return [
+            {
+                type: 'tab-type',
+                props: {
+                    tabViewClass: 'advanced-query-tabs',
+                    scrollable: false,
+                    lazy: true,
+                    activeIndex: 0
+                },
+                fieldGroup: this.getQueryTabs(fields, enableSelect, enableGroup)
+            }
+        ];
+    }
+    getQueryTabs(fields, enableSelect, enableGroup) {
+        const tabs = [
+            {
+                type: 'group',
+                props: {
+                    tabLabel: 'FILTERS',
+                    // 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: {
+                    tabLabel: 'SORTING',
+                    // label: 'SORTING',
+                    leftIcon: 'pi pi-sort-alt',
+                    badge: (field) => {
+                        const fieldGroup = (field?.fieldGroup ?? [])[0];
+                        return (fieldGroup?.model?.sorting ?? [])?.length || 0;
+                    },
+                },
+                fieldGroup: this.getSortingTabFields(fields)
+            },
+            enableGroup && {
+                type: 'group',
+                props: {
+                    tabLabel: 'GROUPING',
+                    // label: 'GROUPING',
+                    leftIcon: 'pi pi-table',
+                    badge: (field) => {
+                        const fieldGroup = (field?.fieldGroup ?? [])[0];
+                        return (fieldGroup?.model?.grouping ?? [])?.length || 0;
+                    },
+                },
+                fieldGroup: this.getGroupingTabFields(fields)
+            },
+            enableSelect && {
+                type: 'group',
+                props: {
+                    tabLabel: 'COLUMNS',
+                    // label: 'COLUMNS',
+                    leftIcon: 'pi pi-list',
+                    badge: (field) => {
+                        const fieldGroup = (field?.fieldGroup ?? [])[0];
+                        const columns = fieldGroup?.model?.columns;
+                        // Handle both array and object formats for columns
+                        if (Array.isArray(columns)) {
+                            return columns.filter((col) => col?.isVisible)?.length || 0;
+                        }
+                        else if (columns && typeof columns === 'object') {
+                            // If columns is an object, count the visible ones
+                            return Object.values(columns).filter((col) => col?.isVisible)?.length || 0;
+                        }
+                        return 0;
+                    },
+                },
+                fieldGroup: this.getColumnsTabFields(fields)
+            },
+            {
+                type: 'group',
+                props: {
+                    tabLabel: 'PAGINATION',
+                    // label: 'PAGINATION',
+                    leftIcon: 'pi pi-cog',
+                    badge: (field) => {
+                        return field?.model?.pagination && field?.model?.pagination?.top ? 1 : 0;
+                    },
+                },
+                fieldGroup: this.getPaginationTabFields()
+            }
+        ];
+        return tabs.filter(Boolean);
+    }
+    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)
+                }
+            }
+        ];
+    }
+    getGroupingTabFields(fields) {
+        return [
+            {
+                key: 'grouping',
+                type: 'group-builder',
+                props: {
+                    label: 'تجميع البيانات',
+                    description: 'قم بتجميع البيانات حسب الحقول المطلوبة',
+                    fields: this.extractGroupableFields(fields),
+                    maxGroups: 3
+                }
+            }
+        ];
+    }
+    getColumnsTabFields(fields) {
+        return [
+            {
+                key: 'columns',
+                type: 'columns-builder',
+                props: {
+                    label: 'إدارة الأعمدة',
+                    description: 'اختر الحقول المراد عرضها وتخصيص التجميع',
+                    fields: this.extractSelectableFields(fields)
+                }
+            }
+        ];
+    }
+    getPaginationTabFields() {
+        return [
+            {
+                key: 'pagination',
+                type: 'group',
+                props: {
+                    label: '',
+                    description: '',
+                    collapsible: false,
+                    showFieldCount: true,
+                    variant: 'card'
+                },
+                fieldGroup: [
+                    {
+                        key: 'top',
+                        type: 'input',
+                        props: {
+                            type: 'number',
+                            label: 'الحد الأقصى للسجلات',
+                            min: 1,
+                            max: 1000,
+                            description: 'أقصى عدد للسجلات المراد عرضها'
+                        }
+                    },
+                    {
+                        key: 'skip',
+                        type: 'input',
+                        props: {
+                            type: 'number',
+                            label: 'تخطي السجلات',
+                            min: 0,
+                            description: 'عدد السجلات التي سيتم تخطيها'
+                        }
+                    },
+                    {
+                        key: 'includeCount',
+                        type: 'checkbox',
+                        props: {
+                            label: 'تضمين العدد الإجمالي',
+                            description: 'تضمين عدد السجلات الإجمالي في الاستجابة'
+                        }
+                    }
+                ]
+            }
+        ];
+    }
+    extractFilterableFields(fields) {
+        const filterableFields = [];
+        this.traverseFields(fields, (field) => {
+            if (field.key && field.props && ((field.props['filter'] && field.props['filter'].hidden == false) || !field.props['filter']) && !field.props?.hidden) {
+                const fieldType = this.mapFieldType(field.type);
+                const fieldConfig = this.fieldTypeConfig[fieldType] || this.fieldTypeConfig.input;
+                filterableFields.push({
+                    key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
+                    label: this.translate.instant(field.props.label || field.key),
+                    type: fieldType,
+                    props: { ...field.props },
+                    operators: fieldConfig.operators,
+                    defaultOperator: fieldConfig.defaultOperator,
+                    defaultValue: fieldConfig.defaultValue
+                });
+            }
+        });
+        return filterableFields;
+    }
+    extractSortableFields(fields) {
+        const sortableFields = [];
+        this.traverseFields(fields, (field) => {
+            if (field.key && field.props && ((field.props['sort'] && field.props['sort'].hidden == false) || !field.props['sort']) && !field.props?.hidden) {
+                sortableFields.push({
+                    key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
+                    label: this.translate.instant(field.props.label || field.key)
+                });
+            }
+        });
+        return sortableFields;
+    }
+    extractGroupableFields(fields) {
+        const groupableFields = [];
+        this.traverseFields(fields, (field) => {
+            if (field.key && field.props && ((field.props['group'] && field.props['group'].hidden == false) || !field.props['group']) && !field.props?.hidden) {
+                groupableFields.push({
+                    key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
+                    label: this.translate.instant(field.props.label || field.key),
+                    dataType: this.getDataType(field.type)
+                });
+            }
+        });
+        return groupableFields;
+    }
+    extractSelectableFields(fields) {
+        const tempFields = [];
+        this.traverseFields(fields, (field) => {
+            if (field.key &&
+                field.props &&
+                // ((field.props['select'] && field.props['select'].hidden === false) || !field.props['select']) &&
+                ((field.props['report'] && field.props['report'].hidden === false) || !field.props['report']) &&
+                !field.props?.hidden) {
+                const isNumeric = ['number', 'currency'].includes(field.type);
+                const tableConfig = field.props['table'] ?? {};
+                const mergedProps = { ...field.props, ...(tableConfig.props ?? {}) };
+                const order = tableConfig.order ??
+                    tableConfig.props?.order ??
+                    mergedProps['order'] ??
+                    Number.MAX_SAFE_INTEGER;
+                tempFields.push({
+                    key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
+                    label: this.translate.instant(field.props.label || field.key),
+                    dataType: this.getDataType(field.type),
+                    isNumeric,
+                    defaultVisible: field.props['defaultVisible'] !== false,
+                    aggregatable: isNumeric && field.props['aggregatable'] !== false,
+                    order
+                });
+            }
+        });
+        return tempFields
+            .sort((a, b) => a.order - b.order)
+            .map(({ order, ...rest }) => rest); // remove order after sorting
+    }
+    traverseFields(fields, callback) {
+        fields.forEach(field => {
+            callback(field);
+            if (field.fieldGroup) {
+                this.traverseFields(field.fieldGroup, callback);
+            }
+        });
+    }
+    getAppliedFiltersCount(model) {
+        const breakdown = {
+            filters: 0,
+            sorting: 0,
+            grouping: 0,
+            columns: 0,
+            pagination: 0,
+            expand: 0
+        };
+        // Advanced filters
+        if (model?.advancedFilters && Array.isArray(model.advancedFilters)) {
+            model.advancedFilters.forEach((filterGroup) => {
+                if (filterGroup.conditions && Array.isArray(filterGroup.conditions)) {
+                    breakdown.filters += filterGroup.conditions.length;
+                }
+            });
+        }
+        // Sorting
+        if (model?.sorting && Array.isArray(model.sorting)) {
+            breakdown.sorting = model.sorting.length;
+        }
+        // Grouping
+        if (model?.grouping && Array.isArray(model.grouping)) {
+            breakdown.grouping = model.grouping.length;
+        }
+        // Columns
+        if (model?.columns) {
+            if (Array.isArray(model.columns)) {
+                breakdown.columns = model.columns.filter((col) => col.isVisible).length;
+            }
+            else if (typeof model.columns === 'object') {
+                breakdown.columns = Object.values(model.columns).filter((col) => col?.isVisible).length;
+            }
+        }
+        // Pagination
+        if (model?.pagination) {
+            if (model.pagination.top)
+                breakdown.pagination += 1;
+            if (model.pagination.skip)
+                breakdown.pagination += 1;
+            if (model.pagination.includeCount)
+                breakdown.pagination += 1;
+        }
+        // Expand
+        if (model?.expand && Array.isArray(model.expand)) {
+            breakdown.expand = model.expand.length;
+        }
+        return {
+            total: Object.values(breakdown).reduce((sum, count) => sum + count, 0),
+            breakdown
+        };
+    }
+    mapFieldType(type) {
+        const typeMap = {
+            'input': 'input',
+            'number': 'number',
+            'datepicker': 'datepicker',
+            'select': 'select',
+            'checkbox': 'checkbox',
+            'generic-selector': 'generic-selector',
+            'switch': 'switch',
+            'radio': 'radio',
+            'textarea': 'textarea',
+            'currency': 'number'
+        };
+        return typeMap[type || 'input'] || 'input';
+    }
+    getDataType(type) {
+        const dataTypeMap = {
+            'input': 'string',
+            'number': 'number',
+            'datepicker': 'date',
+            'select': 'string',
+            'checkbox': 'boolean',
+            'generic-selector': 'string',
+            'switch': 'boolean',
+            'radio': 'string',
+            'textarea': 'string',
+            'currency': 'number'
+        };
+        return dataTypeMap[type || 'input'] || 'string';
+    }
+    getOperatorsForType(type) {
+        const fieldType = this.mapFieldType(type);
+        const config = this.fieldTypeConfig[fieldType];
+        return config ? config.operators : ['eq', 'ne'];
+    }
+    // Enhanced OData methods with GroupBy and Select support
+    buildODataFromQueryModel(model, originalFields) {
+        const params = {
+            filters: [],
+            orderBy: [],
+            groupBy: [],
+            select: [],
+            aggregates: [],
+            expand: model.expand || [],
+            includeCount: model.pagination?.includeCount || false
+        };
+        // Quick search
+        if (model.filter) {
+            const searchableFields = this.extractSelectableFields(originalFields); // TODO get all strings filters
+            const quickSearchConditions = searchableFields.map(field => ({
+                field: field.key,
+                operator: 'contains',
+                value: model.filter
+            }));
+            if (quickSearchConditions.length > 0) {
+                params.filters.push({
+                    logicalOperator: 'or',
+                    conditions: quickSearchConditions
+                });
+            }
+        }
+        // Advanced filters
+        if (model.advancedFilters && Array.isArray(model.advancedFilters)) {
+            params.filters.push(...model.advancedFilters);
+        }
+        // Sorting
+        if (model.sorting && Array.isArray(model.sorting)) {
+            params.orderBy = model.sorting
+                .filter((sort) => sort.field && sort.direction)
+                .map((sort) => ({
+                field: sort.field,
+                direction: sort.direction
+            }));
+        }
+        // Grouping
+        if (model.grouping && Array.isArray(model.grouping)) {
+            params.groupBy = model.grouping
+                .filter((group) => group.field)
+                .map((group, index) => ({
+                propertyName: group.field,
+                displayName: group.displayName || group.field,
+                showTotal: group.showTotal !== false,
+                order: index
+            }));
+        }
+        // Columns/Select - Handle both array and object formats
+        // extractSelectableFields
+        if (model.columns) {
+            let visibleColumns = [];
+            // Handle array format: [{field: 'name', isVisible: true, ...}, ...]
+            if (Array.isArray(model.columns)) {
+                visibleColumns = model.columns.filter((col) => col.isVisible);
+            }
+            // Handle object format: {field1: {isVisible: true, displayName: 'Name', ...}, field2: {...}}
+            else if (typeof model.columns === 'object') {
+                visibleColumns = Object.entries(model.columns)
+                    .filter(([key, col]) => col.isVisible)
+                    .map(([key, col]) => ({
+                    field: key, // Use the object key as field name
+                    ...col // Spread the column properties
+                }));
+            }
+            // Process visible columns for select and aggregates
+            if (visibleColumns.length > 0) {
+                params.select = visibleColumns.map((col, index) => ({
+                    propertyName: col.field || col.key, // Support both 'field' and 'key' properties
+                    displayName: col.displayName || col.field || col.key || col.label,
+                    aggregateFunction: col.aggregateFunction,
+                    isVisible: true,
+                    order: index
+                }));
+                // Extract aggregates from columns with aggregate functions
+                const aggregateColumns = visibleColumns.filter((col) => col.aggregateFunction);
+                params.aggregates = aggregateColumns.map((col) => ({
+                    propertyName: col.field || col.key,
+                    aggregateFunction: col.aggregateFunction,
+                    alias: `${col.aggregateFunction}_${col.field || col.key}`
+                }));
+            }
+        }
+        else {
+            // Fallback: auto-generate from formly fields
+            const selectableFields = this.extractSelectableFields(originalFields);
+            // Ensure a column for the ID field exists
+            // if (!selectableFields.some(f => f.key === this.idField)) {
+            //   selectableFields.unshift({
+            //     key: this.idField,
+            //     label: this.translate.instant(this.idField),
+            //     dataType: 'number', // or the correct type
+            //     isNumeric: false,
+            //     defaultVisible: true,
+            //     aggregatable: false
+            //   });
+            // }
+            params.select = selectableFields.map((f, i) => ({
+                propertyName: f.key,
+                displayName: f.label,
+                isVisible: f.defaultVisible,
+                order: i
+            }));
+            params.aggregates = selectableFields
+                .filter(f => f.aggregatable)
+                .map(f => ({
+                propertyName: f.key,
+                aggregateFunction: 'sum',
+                alias: `sum_${f.key}`
+            }));
+        }
+        // Pagination
+        if (model.pagination) {
+            if (model.pagination.top) {
+                params.top = Number(model.pagination.top);
+            }
+            if (model.pagination.skip) {
+                params.skip = Number(model.pagination.skip);
+            }
+            if (model.pagination.includeCount !== undefined) {
+                params.includeCount = model.pagination.includeCount;
+            }
+        }
+        return params;
+    }
+    toODataQueryString(params) {
+        return QueryParser.toString(params);
+    }
+    parseODataQuery(queryString) {
+        return QueryParser.parse(queryString);
+    }
+    // Helper method to get field configuration
+    getFieldConfig(fieldKey, fields) {
+        return fields.find(f => f.key === fieldKey);
+    }
+    // Helper to get available aggregate functions for numeric fields
+    getAggregateFunctions() {
+        return [
+            { label: 'مجموع', value: 'sum' },
+            { label: 'متوسط', value: 'avg' },
+            { label: 'عدد', value: 'count' },
+            { label: 'الحد الأدنى', value: 'min' },
+            { label: 'الحد الأقصى', value: 'max' }
+        ];
+    }
+    queryParamsToFormModel(params) {
+        const model = {
+            advancedFilters: [],
+            sorting: [],
+            grouping: [],
+            columns: [],
+            pagination: {},
+            expand: [],
+            filter: ''
+        };
+        // Extract quick search from filters
+        const orFilterGroup = params.filters.find(fg => fg.logicalOperator === 'or' &&
+            fg.conditions?.every(c => c.operator === 'contains' && c.value === fg.conditions[0]?.value));
+        if (orFilterGroup?.conditions?.length) {
+            model.filter = orFilterGroup.conditions[0].value;
+            // Remove the quick search from advanced filters
+            params.filters = params.filters.filter(fg => fg !== orFilterGroup);
+        }
+        // Advanced filters
+        if (params.filters.length > 0) {
+            model.advancedFilters = params.filters;
+        }
+        // Sorting
+        if (params.orderBy && params.orderBy.length > 0) {
+            model.sorting = params.orderBy.map(ob => ({
+                field: ob.field,
+                direction: ob.direction
+            }));
+        }
+        // Grouping
+        if (params.groupBy && params.groupBy.length > 0) {
+            model.grouping = params.groupBy.map(gb => ({
+                field: gb.propertyName,
+                displayName: gb.displayName,
+                showTotal: gb.showTotal,
+                order: gb.order
+            }));
+        }
+        // Columns/Select - Convert to array format
+        if (params.select && params.select.length > 0) {
+            model.columns = params.select.map(sc => {
+                const col = {
+                    field: sc.propertyName,
+                    isVisible: sc.isVisible !== false,
+                    displayName: sc.displayName || sc.propertyName,
+                    order: sc.order || 0
+                };
+                // Add aggregate function if this column has an aggregate
+                if (params.aggregates) {
+                    const aggregate = params.aggregates.find(agg => agg.propertyName === sc.propertyName);
+                    if (aggregate) {
+                        col.aggregateFunction = aggregate.aggregateFunction;
+                    }
+                }
+                return col;
+            });
+            // Sort columns by order
+            model.columns.sort((a, b) => (a.order || 0) - (b.order || 0));
+        }
+        // Aggregates (if not already handled via columns)
+        if (params.aggregates && params.aggregates.length > 0) {
+            // Ensure aggregates are linked to columns
+            if (!model.columns) {
+                model.columns = [];
+            }
+            params.aggregates.forEach(agg => {
+                const existingColumn = model.columns.find((c) => c.field === agg.propertyName);
+                if (!existingColumn) {
+                    model.columns.push({
+                        field: agg.propertyName,
+                        isVisible: false, // Aggregate-only columns are typically not visible in select
+                        displayName: agg.propertyName,
+                        aggregateFunction: agg.aggregateFunction
+                    });
+                }
+            });
+        }
+        // Pagination
+        if (params.top !== undefined || params.skip !== undefined || params.includeCount !== undefined) {
+            model.pagination = {
+                top: params.top,
+                skip: params.skip,
+                includeCount: params.includeCount
+            };
+        }
+        // Expand
+        if (params.expand && params.expand.length > 0) {
+            model.expand = params.expand;
+        }
+        return model;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+// generic-search.component.ts
+class GenericSearchAdvanced {
+    translate = inject(LocalizationService);
+    queryBuilder = inject(QueryBuilderService);
+    drawerVisible = false;
+    search = new EventEmitter();
+    paginationChange = new EventEmitter();
+    odataSearch = new EventEmitter();
+    form = new FormGroup({});
+    model = {};
+    options = {};
+    fields = [];
+    fields_ = [];
+    enableSelect = false;
+    enableGroup = false;
+    odataConfig = {};
+    ngOnInit() {
+        this.buildQueryUIFields();
+    }
+    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;
+    }
+    buildQueryUIFields() {
+        this.fields_ = this.queryBuilder.buildQueryUIFields(this.fields, this.enableSelect, this.enableGroup);
+    }
+    onSubmit() {
+        // Use the new QueryBuilderService methods
+        const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.fields);
+        // Generate query string using the unified method
+        const queryString = this.queryBuilder.toODataQueryString(odataParams);
+        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:,
+        });
+    }
+    onReset() {
+        this.model = {};
+        this.form.reset();
+        // this.paginationChange.emit({
+        //   top:10,
+        //     // skip:,
+        // });
+        // this.search.emit(this.model);
+        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);
+        this.search.emit({
+            filter: this.model['filter'],
+            query: queryString,
+            // sorting:,
+            top: 10,
+            // skip:,
+        });
+    }
+    // Toggle drawer visibility
+    toggleDrawer() {
+        this.drawerVisible = !this.drawerVisible;
+    }
+    // Close drawer
+    closeDrawer() {
+        this.drawerVisible = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvanced, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableSelect: "enableSelect", enableGroup: "enableGroup", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n", dependencies: [{ kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "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: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-generic-search-advanced', standalone: true, imports: [
+                        FormlyForm,
+                        TranslatePipe,
+                        ToolbarModule,
+                        ButtonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        InputIconModule,
+                        IconFieldModule,
+                        InputTextModule,
+                        DrawerModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        BadgeModule
+                    ], template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n" }]
+        }], propDecorators: { search: [{
+                type: Output
+            }], paginationChange: [{
+                type: Output
+            }], odataSearch: [{
+                type: Output
+            }], model: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], enableSelect: [{
+                type: Input
+            }], enableGroup: [{
+                type: Input
+            }], odataConfig: [{
+                type: Input
+            }] } });
+
+// sort-builder.component.ts
+class SortBuilderComponent extends FieldType {
+    sorts = [];
+    directionOptions = [
+        { label: 'تصاعدي (أ → ي)', value: 'asc' },
+        { label: 'تنازلي (ي → أ)', value: 'desc' }
+    ];
+    dragStartIndex = -1;
+    ngOnInit() {
+        if (this.formControl.value && Array.isArray(this.formControl.value)) {
+            this.sorts = this.formControl.value.map((sort) => ({
+                field: sort.field || '',
+                direction: sort.direction || 'asc'
+            }));
+        }
+    }
+    addSort() {
+        this.sorts.push({ field: '', direction: 'asc' });
+        this.updateValue();
+    }
+    removeSort(index) {
+        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() {
+        // 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: "21.1.3", ngImport: i0, type: SortBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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">
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+     </div>
+   
+     <!-- Sort List -->
+     @if (sorts.length > 0) {
+       <div class="sort-list space-y-2 mb-3">
+         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
+           <div
+             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 -->
+               <div class="col-span-2 flex">
+                 <button
+                   pButton
+                   icon="pi pi-bars"
+                   type="button"
+                   class="p-button-text p-button-plain cursor-move"
+                   [pTooltip]="'DRAG_TOOLTIP' | translate"
+                   tooltipPosition="top">
+                 </button>
+                 <p-select
+                   [options]="getAvailableFields(sort.field)"
+                   optionLabel="label"
+                   optionValue="key"
+                   [(ngModel)]="sort.field"
+                   (onChange)="updateValue()"
+                   [placeholder]="'SELECT_FIELD_SORT' | translate"
+                   [showClear]="true"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Direction Selector -->
+               <div class="col-fixed">
+                 <p-select
+                   [options]="directionOptions"
+                   [(ngModel)]="sort.direction"
+                   (onChange)="updateValue()"
+                   [placeholder]="'DIRECTION' | translate"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Actions -->
+               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+                 <!-- Move Up -->
+                 @if (!isFirst) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-up"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i - 1)"
+                     [pTooltip]="'MOVE_UP' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Move Down -->
+                 @if (!isLast) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-down"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i + 1)"
+                     [pTooltip]="'MOVE_DOWN' | translate"
+                     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]="'REMOVE_SORT' | translate"
+                   tooltipPosition="top">
+                 </button>
+               </div>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   
+     <!-- Empty State -->
+     @if (sorts.length === 0) {
+       <div 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">{{ 'NO_SORT_RULES' | translate }}</p>
+         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+       </div>
+     }
+   
+     <!-- Actions -->
+     <div class="flex gap-2">
+       <button
+         pButton
+         icon="pi pi-sort-alt"
+         [label]="'ADD_SORT' | translate"
+         type="button"
+         class="p-button-outlined flex-1"
+         (click)="addSort()">
+       </button>
+   
+       @if (sorts.length > 1) {
+         <button
+           pButton
+           icon="pi pi-random"
+           [label]="'REVERSE_ORDER' | translate"
+           type="button"
+           class="p-button-outlined"
+           (click)="reverseSorts()"
+           [pTooltip]="'REVERSE_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+   
+       @if (sorts.length > 0) {
+         <button
+           pButton
+           icon="pi pi-trash"
+           type="button"
+           class="p-button-outlined p-button-danger"
+           (click)="clearAll()"
+           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+     </div>
+   
+     <!-- Summary -->
+     @if (sorts.length > 0) {
+       <div class="sort-summary mt-3 p-2 border-round surface-ground">
+         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+         <div class="text-sm text-500">
+           @for (sort of sorts; track sort; let i = $index) {
+             <span 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>
+               @if (!isLast) {
+                 <span> {{ 'THEN' | translate }} </span>
+               }
+             </span>
+           }
+         </div>
+       </div>
+     }
+   </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { 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", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SortBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-sort-builder', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SelectModule,
+                        ButtonModule,
+                        DragDropModule,
+                        TooltipModule,
+                        TranslatePipe
+                    ], template: `<div class="sort-builder p-3 border-round border-1 surface-border">
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+     </div>
+   
+     <!-- Sort List -->
+     @if (sorts.length > 0) {
+       <div class="sort-list space-y-2 mb-3">
+         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
+           <div
+             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 -->
+               <div class="col-span-2 flex">
+                 <button
+                   pButton
+                   icon="pi pi-bars"
+                   type="button"
+                   class="p-button-text p-button-plain cursor-move"
+                   [pTooltip]="'DRAG_TOOLTIP' | translate"
+                   tooltipPosition="top">
+                 </button>
+                 <p-select
+                   [options]="getAvailableFields(sort.field)"
+                   optionLabel="label"
+                   optionValue="key"
+                   [(ngModel)]="sort.field"
+                   (onChange)="updateValue()"
+                   [placeholder]="'SELECT_FIELD_SORT' | translate"
+                   [showClear]="true"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Direction Selector -->
+               <div class="col-fixed">
+                 <p-select
+                   [options]="directionOptions"
+                   [(ngModel)]="sort.direction"
+                   (onChange)="updateValue()"
+                   [placeholder]="'DIRECTION' | translate"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Actions -->
+               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+                 <!-- Move Up -->
+                 @if (!isFirst) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-up"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i - 1)"
+                     [pTooltip]="'MOVE_UP' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Move Down -->
+                 @if (!isLast) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-down"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i + 1)"
+                     [pTooltip]="'MOVE_DOWN' | translate"
+                     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]="'REMOVE_SORT' | translate"
+                   tooltipPosition="top">
+                 </button>
+               </div>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   
+     <!-- Empty State -->
+     @if (sorts.length === 0) {
+       <div 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">{{ 'NO_SORT_RULES' | translate }}</p>
+         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+       </div>
+     }
+   
+     <!-- Actions -->
+     <div class="flex gap-2">
+       <button
+         pButton
+         icon="pi pi-sort-alt"
+         [label]="'ADD_SORT' | translate"
+         type="button"
+         class="p-button-outlined flex-1"
+         (click)="addSort()">
+       </button>
+   
+       @if (sorts.length > 1) {
+         <button
+           pButton
+           icon="pi pi-random"
+           [label]="'REVERSE_ORDER' | translate"
+           type="button"
+           class="p-button-outlined"
+           (click)="reverseSorts()"
+           [pTooltip]="'REVERSE_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+   
+       @if (sorts.length > 0) {
+         <button
+           pButton
+           icon="pi pi-trash"
+           type="button"
+           class="p-button-outlined p-button-danger"
+           (click)="clearAll()"
+           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+     </div>
+   
+     <!-- Summary -->
+     @if (sorts.length > 0) {
+       <div class="sort-summary mt-3 p-2 border-round surface-ground">
+         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+         <div class="text-sm text-500">
+           @for (sort of sorts; track sort; let i = $index) {
+             <span 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>
+               @if (!isLast) {
+                 <span> {{ 'THEN' | translate }} </span>
+               }
+             </span>
+           }
+         </div>
+       </div>
+     }
+   </div>` }]
+        }] });
+
+// query-builder.component.ts
+class QueryBuilderComponent extends FieldType {
+    queryBuilderService = inject(QueryBuilderService);
+    cdr = inject(ChangeDetectorRef);
+    translate = inject(LocalizationService);
+    groups = [];
+    logicalOperators = [
+        { label: this.translate.instant('and'), value: 'and' },
+        { label: this.translate.instant('or'), value: 'or' }
+    ];
+    showAppliedFilters = false;
+    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.initializeAppliedConditionsWithFieldConfigs();
+            this.initializeDefaultConditions();
+        }
+        else {
+            // Start with default conditions for important fields
+            this.initializeDefaultConditions();
+        }
+    }
+    initializeAppliedConditionsWithFieldConfigs() {
+        this.groups = this.formControl.value.map((group, groupIndex) => ({
+            logicalOperator: group.logicalOperator || 'and',
+            groupLogicalOperator: group.groupLogicalOperator || 'and',
+            conditions: this.initializeConditionsWithFieldConfigs(group.conditions || [], groupIndex)
+        }));
+    }
+    initializeConditionsWithFieldConfigs(conditions, groupIndex) {
+        return conditions.map((condition, conditionIndex) => ({
+            ...condition,
+            operatorsForField: this.getOperatorsForField(condition.field),
+            valueFieldConfig: condition.field ?
+                this.generateValueFieldConfig(condition, groupIndex, conditionIndex) :
+                null
+        }));
+    }
+    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, field.props?.operator));
+        }
+        // this.groups = [{
+        //   logicalOperator: 'and',
+        //   groupLogicalOperator: 'and',
+        //   conditions: defaultConditions
+        // }];
+        this.groups = [{
+                logicalOperator: 'and',
+                groupLogicalOperator: 'and',
+                conditions: defaultConditions.filter(dc => !this.groups?.some(g => g.conditions?.some((c) => c.field === dc.field &&
+                    c.operator === dc.operator)))
+            }];
+        this.updateValue();
+    }
+    toggleAppliedFilters() {
+        if (this.showAppliedFilters == true) {
+            this.initializeAppliedConditionsWithFieldConfigs();
+            this.initializeDefaultConditions();
+        }
+        else {
+            this.initializeAppliedConditionsWithFieldConfigs();
+        }
+        this.showAppliedFilters = !this.showAppliedFilters;
+    }
+    onAndClick(group, event) {
+        group.logicalOperator = 'and';
+        this.updateValue();
+    }
+    onOrClick(group, event) {
+        group.logicalOperator = 'or';
+        this.updateValue();
+    }
+    getLogicalOperatorText(operator) {
+        const operatorMap = {
+            'and': this.translate.instant('and'),
+            'or': this.translate.instant('or'),
+            'not': this.translate.instant('not')
+        };
+        return operatorMap[operator] || operator;
+    }
+    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;
+    }
+    isSupportedFieldType(fieldType) {
+        // Only include field types that make sense for filtering
+        const supportedTypes = ['input', 'number', 'datepicker', 'custom-datepicker', 'select', 'checkbox', 'generic-selector', 'switch', 'radio', 'textarea'];
+        return supportedTypes.includes(fieldType);
+    }
+    getFieldLabel(key) {
+        const f = this.props['fields']?.find((x) => x.key === key);
+        return f ? f.label : '';
+    }
+    createDefaultCondition(field, groupIndex, conditionIndex, operator) {
+        const defaultCondition = {
+            field: field.key,
+            operator: operator ? operator : this.getDefaultOperator(field.type),
+            value: this.getDefaultValue(field.type),
+            valueFieldConfig: null,
+            operatorsForField: this.getOperatorsForField(field),
+        };
+        // Generate field config for this condition
+        defaultCondition.valueFieldConfig = this.generateValueFieldConfig(defaultCondition, groupIndex, conditionIndex);
+        return defaultCondition;
+    }
+    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;
+    }
+    // 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(field) {
+        if (!field)
+            return [];
+        let fieldKey;
+        if (typeof field === 'object' && field !== null) {
+            fieldKey = field['key'];
+        }
+        else {
+            fieldKey = field;
+        }
+        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: []
+        });
+        this.updateValue();
+    }
+    // removeGroup(groupIndex: number) {
+    //   this.groups.splice(groupIndex, 1);
+    //   this.updateValue();
+    // }
+    removeGroup(groupIndex) {
+        if (this.groups[groupIndex]) {
+            // Get all field keys for this group before deleting
+            const fieldKeysToRemove = [];
+            // Collect all condition field keys in this group
+            if (this.groups[groupIndex].conditions) {
+                for (let c = 0; c < this.groups[groupIndex].conditions.length; c++) {
+                    const fieldKey = this.getConditionValueKey(groupIndex, c);
+                    fieldKeysToRemove.push(fieldKey);
+                }
+            }
+            // Remove the group
+            this.groups.splice(groupIndex, 1);
+            // Remove all associated fields from model
+            this.removeMultipleFromModel(fieldKeysToRemove);
+            this.updateValue();
+        }
+    }
+    // Remove multiple fields from formly model
+    removeMultipleFromModel(fieldKeys) {
+        fieldKeys.forEach(fieldKey => {
+            this.removeFromModel(fieldKey);
+        });
+    }
+    // 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]) {
+            // Get the field key before deleting so we can remove from model
+            const fieldKey = this.getConditionValueKey(groupIndex, conditionIndex);
+            // Using delete operator (sets to undefined, then we filter)
+            delete this.groups[groupIndex].conditions[conditionIndex];
+            // Remove the undefined entries from conditions array
+            this.groups[groupIndex].conditions = this.groups[groupIndex].conditions.filter((condition) => condition !== undefined);
+            // Remove empty groups
+            if (this.groups[groupIndex].conditions.length === 0 && this.groups.length > 1) {
+                delete this.groups[groupIndex];
+                // Remove undefined groups from array
+                this.groups = this.groups.filter(group => group !== undefined);
+            }
+            // Remove from formly model
+            this.removeFromModel(fieldKey);
+            this.updateValue();
+        }
+    }
+    // Remove the field from formly model
+    removeFromModel(fieldKey) {
+        if (this.model && this.model.hasOwnProperty(fieldKey)) {
+            delete this.model[fieldKey];
+        }
+        // Also update the form control to ensure sync
+        if (this.formControl.value && this.formControl.value.hasOwnProperty(fieldKey)) {
+            const updatedValue = { ...this.formControl.value };
+            delete updatedValue[fieldKey];
+            this.formControl.setValue(updatedValue);
+        }
+    }
+    // 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);
+                try {
+                    const modelValue = this.model?.[fieldKey];
+                    if (modelValue !== undefined) {
+                        condition.value = modelValue;
+                    }
+                }
+                catch (error) {
+                }
+            }
+        }
+        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();
+    }
+    clearAll() {
+        this.groups = [];
+        // Completely reset the form and model
+        this.form.reset();
+        // Manually set model to empty object
+        Object.keys(this.model).forEach(key => {
+            delete this.model[key];
+        });
+        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: "21.1.3", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\n\n  <!-- Groups Container with Connecting Lines -->\n  <div class=\"groups-container\" #groupsContainer>\n    @for (group of groups; track group; let groupIndex = $index) {\n      <div\n        class=\"group-wrapper relative\"\n        #groupElement>\n        <!-- Vertical Connector Line from Previous Group -->\n        @if (groupIndex > 0) {\n          <div class=\"vertical-connector\">\n            <div class=\"vertical-line\"></div>\n            <!-- Operator Button -->\n            <button\n              type=\"button\"\n              class=\"group-logical-operator-box\"\n              [class.and]=\"group.groupLogicalOperator === 'and'\"\n              [class.or]=\"group.groupLogicalOperator === 'or'\"\n              (click)=\"opPopover.toggle($event)\">\n              <span class=\"operator-text\">\n                {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\n              </span>\n              <div class=\"connector-arrow\"></div>\n            </button>\n            <!-- Popover -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-12rem\">\n                <p-listbox\n                  [options]=\"logicalOperators\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.groupLogicalOperator\"\n                  (onChange)=\" opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n        }\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\"\n          [class.border-blue-500]=\"group.logicalOperator === 'and'\"\n          [class.border-or-500]=\"group.logicalOperator === 'or'\"\n          [class.pulse]=\"groupIndex === 0\">\n          <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\n          <div\n            class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\n            >\n            <!-- Logical Operator Popover Button -->\n            <p-button\n              [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\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)\">\n              {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\n            </p-button>\n            <!-- Popover for Operator Selection -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-10rem\">\n                <p-listbox\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.logicalOperator\"\n                  (onChange)=\"updateValue(); opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                  <ng-template let-item pTemplate=\"item\">\n                    {{ item.label }}\n                  </ng-template>\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n          <!-- Group Header -->\n          <div class=\"group-header-wrapper mb-4 pl-8\">\n            <div class=\"group-header flex justify-between items-center\">\n              <div class=\"flex gap-1\">\n                <button\n                  pButton\n                  icon=\"pi pi-plus\"\n                  type=\"button\"\n                  class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                  (click)=\"addCondition(groupIndex)\"\n                  pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\n                  tooltipPosition=\"top\">\n                </button>\n                <!-- @if (filterCount > 0) {\n                <button\n                  pButton\n                  type=\"button\"\n                  icon=\"pi pi-filter\"\n                  class=\"p-button-outlined p-button-sm\"\n                  (click)=\"toggleAppliedFilters()\">\n                  {{ (showAppliedFilters ? 'SHOW_ALL' : 'SHOW_APPLIED') | translate }}\n                </button>\n                } -->\n                @if (groups.length > 1) {\n                  <button\n                    pButton\n                    icon=\"pi pi-times\"\n                    type=\"button\"\n                    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                    (click)=\"removeGroup(groupIndex)\"\n                    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\n                    tooltipPosition=\"top\">\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Conditions in this group -->\n          @for (condition of group.conditions; track condition; let conditionIndex = $index) {\n            <div\n              class=\"p-1 bg-gray-50  \">\n              <div class=\"grid grid-cols-1  gap-1 items-center\">\n                <!-- Field Selector -->\n                <div class=\"md:col-span-2\">\n                  <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\n                    <!-- Field Selector Button -->\n                    <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\n                      <button\n                        type=\"button\"\n                        style=\"height: -webkit-fill-available;\"\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\"\n                        (click)=\"overlay.toggle($event)\">\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>\n                      </button>\n                      <!-- Overlay Content -->\n                      <p-popover #overlay appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            tabindex=\"0\"\n                            [options]=\"props['fields']\"\n                            optionLabel=\"label\"\n                            optionValue=\"key\"\n                            [(ngModel)]=\"condition.field\"\n                            (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Operator Button -->\n                    <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\n                      <button\n                        type=\"button\"\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\"\n                        style=\"height: -webkit-fill-available;\"\n                        pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\n                        (click)=\"opPopover.toggle($event)\">\n                        <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\n                      </button>\n                      <p-popover #opPopover appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            [options]=\"condition.operatorsForField\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [(ngModel)]=\"condition.operator\"\n                            (onChange)=\"updateValue();opPopover.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Form Field -->\n                    <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\n                      <formly-form\n                        [form]=\"form\"\n                        [fields]=\"[condition.valueFieldConfig]\"\n                        [model]=\"model\">\n                      </formly-form>\n                    </div>\n                    <!-- Delete Button -->\n                    <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\n                      <button\n                        style=\"height: -webkit-fill-available;\"\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\"\n                        type=\"button\"\n                        (click)=\"removeCondition(groupIndex, conditionIndex)\"\n                        pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\n                        tooltipPosition=\"top\">\n                        <i class=\"pi pi-times\"></i>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          <!-- Group Footer -->\n          <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\n            <small class=\"text-gray-500\">\n              {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\n            </small>\n            <small class=\"text-gray-500\">\n              @if (groupIndex > 0) {\n                <span>\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'\"\n                  [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\n                  {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\n                </strong>\n              </span>\n            }\n          </small>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex flex-wrap gap-3 mt-6\">\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'GROUP' | translate\"\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\"\n    (click)=\"addGroup();\">\n  </button>\n\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'CONDITION' | translate\"\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\"\n    (click)=\"addConditionToLastGroup()\">\n  </button>\n\n  @if (groups.length > 0) {\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-trash\"\n      [label]=\"'CLEAR' | translate\"\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\"\n      (click)=\"clearAll()\">\n    </button>\n  }\n</div>\n\n<!-- Empty State -->\n@if (groups.length === 0) {\n  <div class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\n    <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\n    <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-plus\"\n      [label]=\"'ADD_SEARCH_CONDITION' | translate\"\n      class=\"p-button-outlined !px-4 !py-2\"\n      (click)=\"addGroup()\">\n    </button>\n  </div>\n}\n</div>\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "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", "ptTooltip"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5$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: i6$2.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "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", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-query-builder', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
+                        FormlyForm,
+                        TooltipModule,
+                        MenuModule,
+                        TranslatePipe,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        PopoverModule,
+                        ListboxModule
+                    ], template: "<div>\n\n  <!-- Groups Container with Connecting Lines -->\n  <div class=\"groups-container\" #groupsContainer>\n    @for (group of groups; track group; let groupIndex = $index) {\n      <div\n        class=\"group-wrapper relative\"\n        #groupElement>\n        <!-- Vertical Connector Line from Previous Group -->\n        @if (groupIndex > 0) {\n          <div class=\"vertical-connector\">\n            <div class=\"vertical-line\"></div>\n            <!-- Operator Button -->\n            <button\n              type=\"button\"\n              class=\"group-logical-operator-box\"\n              [class.and]=\"group.groupLogicalOperator === 'and'\"\n              [class.or]=\"group.groupLogicalOperator === 'or'\"\n              (click)=\"opPopover.toggle($event)\">\n              <span class=\"operator-text\">\n                {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\n              </span>\n              <div class=\"connector-arrow\"></div>\n            </button>\n            <!-- Popover -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-12rem\">\n                <p-listbox\n                  [options]=\"logicalOperators\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.groupLogicalOperator\"\n                  (onChange)=\" opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n        }\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\"\n          [class.border-blue-500]=\"group.logicalOperator === 'and'\"\n          [class.border-or-500]=\"group.logicalOperator === 'or'\"\n          [class.pulse]=\"groupIndex === 0\">\n          <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\n          <div\n            class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\n            >\n            <!-- Logical Operator Popover Button -->\n            <p-button\n              [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\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)\">\n              {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\n            </p-button>\n            <!-- Popover for Operator Selection -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-10rem\">\n                <p-listbox\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.logicalOperator\"\n                  (onChange)=\"updateValue(); opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                  <ng-template let-item pTemplate=\"item\">\n                    {{ item.label }}\n                  </ng-template>\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n          <!-- Group Header -->\n          <div class=\"group-header-wrapper mb-4 pl-8\">\n            <div class=\"group-header flex justify-between items-center\">\n              <div class=\"flex gap-1\">\n                <button\n                  pButton\n                  icon=\"pi pi-plus\"\n                  type=\"button\"\n                  class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                  (click)=\"addCondition(groupIndex)\"\n                  pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\n                  tooltipPosition=\"top\">\n                </button>\n                <!-- @if (filterCount > 0) {\n                <button\n                  pButton\n                  type=\"button\"\n                  icon=\"pi pi-filter\"\n                  class=\"p-button-outlined p-button-sm\"\n                  (click)=\"toggleAppliedFilters()\">\n                  {{ (showAppliedFilters ? 'SHOW_ALL' : 'SHOW_APPLIED') | translate }}\n                </button>\n                } -->\n                @if (groups.length > 1) {\n                  <button\n                    pButton\n                    icon=\"pi pi-times\"\n                    type=\"button\"\n                    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                    (click)=\"removeGroup(groupIndex)\"\n                    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\n                    tooltipPosition=\"top\">\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Conditions in this group -->\n          @for (condition of group.conditions; track condition; let conditionIndex = $index) {\n            <div\n              class=\"p-1 bg-gray-50  \">\n              <div class=\"grid grid-cols-1  gap-1 items-center\">\n                <!-- Field Selector -->\n                <div class=\"md:col-span-2\">\n                  <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\n                    <!-- Field Selector Button -->\n                    <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\n                      <button\n                        type=\"button\"\n                        style=\"height: -webkit-fill-available;\"\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\"\n                        (click)=\"overlay.toggle($event)\">\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>\n                      </button>\n                      <!-- Overlay Content -->\n                      <p-popover #overlay appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            tabindex=\"0\"\n                            [options]=\"props['fields']\"\n                            optionLabel=\"label\"\n                            optionValue=\"key\"\n                            [(ngModel)]=\"condition.field\"\n                            (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Operator Button -->\n                    <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\n                      <button\n                        type=\"button\"\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\"\n                        style=\"height: -webkit-fill-available;\"\n                        pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\n                        (click)=\"opPopover.toggle($event)\">\n                        <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\n                      </button>\n                      <p-popover #opPopover appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            [options]=\"condition.operatorsForField\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [(ngModel)]=\"condition.operator\"\n                            (onChange)=\"updateValue();opPopover.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Form Field -->\n                    <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\n                      <formly-form\n                        [form]=\"form\"\n                        [fields]=\"[condition.valueFieldConfig]\"\n                        [model]=\"model\">\n                      </formly-form>\n                    </div>\n                    <!-- Delete Button -->\n                    <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\n                      <button\n                        style=\"height: -webkit-fill-available;\"\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\"\n                        type=\"button\"\n                        (click)=\"removeCondition(groupIndex, conditionIndex)\"\n                        pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\n                        tooltipPosition=\"top\">\n                        <i class=\"pi pi-times\"></i>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          <!-- Group Footer -->\n          <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\n            <small class=\"text-gray-500\">\n              {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\n            </small>\n            <small class=\"text-gray-500\">\n              @if (groupIndex > 0) {\n                <span>\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'\"\n                  [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\n                  {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\n                </strong>\n              </span>\n            }\n          </small>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex flex-wrap gap-3 mt-6\">\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'GROUP' | translate\"\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\"\n    (click)=\"addGroup();\">\n  </button>\n\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'CONDITION' | translate\"\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\"\n    (click)=\"addConditionToLastGroup()\">\n  </button>\n\n  @if (groups.length > 0) {\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-trash\"\n      [label]=\"'CLEAR' | translate\"\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\"\n      (click)=\"clearAll()\">\n    </button>\n  }\n</div>\n\n<!-- Empty State -->\n@if (groups.length === 0) {\n  <div class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\n    <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\n    <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-plus\"\n      [label]=\"'ADD_SEARCH_CONDITION' | translate\"\n      class=\"p-button-outlined !px-4 !py-2\"\n      (click)=\"addGroup()\">\n    </button>\n  </div>\n}\n</div>\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: "21.1.3", ngImport: i0, type: TabTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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>
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tab
+            [value]="i.toString()"
+            [disabled]="tab.props?.disabled">
+            @if(tab.props){
+              <div class="flex align-items-center gap-2">
+                <!-- Left Icon -->
+                @if (tab.props['leftIcon']) {
+                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
+                }
+                <!-- Label -->
+                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
+                <!-- Badge -->
+                @if (resolveBadge(tab) !== null) {
+                  <p-badge
+                    [value]="resolveBadge(tab)"
+                    size="small">
+                  </p-badge>
+                }
+                <!-- Right Icon -->
+                @if (tab.props['rightIcon']) {
+                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
+                }
+              </div>
+            }
+          </p-tab>
+        }
+      </p-tablist>
+    
+      <p-tabpanels style="padding: 0;">
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tabpanel
+            [value]="i.toString()">
+            <div class="p-3">
+              <formly-field [field]="tab"></formly-field>
+              <!-- Empty state -->
+              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
+                <div
+                  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: TabsModule }, { kind: "component", type: i1$3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$3.TabList, selector: "p-tablist" }, { kind: "component", type: i1$3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tab
+            [value]="i.toString()"
+            [disabled]="tab.props?.disabled">
+            @if(tab.props){
+              <div class="flex align-items-center gap-2">
+                <!-- Left Icon -->
+                @if (tab.props['leftIcon']) {
+                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
+                }
+                <!-- Label -->
+                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
+                <!-- Badge -->
+                @if (resolveBadge(tab) !== null) {
+                  <p-badge
+                    [value]="resolveBadge(tab)"
+                    size="small">
+                  </p-badge>
+                }
+                <!-- Right Icon -->
+                @if (tab.props['rightIcon']) {
+                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
+                }
+              </div>
+            }
+          </p-tab>
+        }
+      </p-tablist>
+    
+      <p-tabpanels style="padding: 0;">
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tabpanel
+            [value]="i.toString()">
+            <div class="p-3">
+              <formly-field [field]="tab"></formly-field>
+              <!-- Empty state -->
+              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
+                <div
+                  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: [TabsModule, BadgeModule, FormlyField, TranslatePipe]
+                }]
+        }] });
+
+// columns-builder.component.ts
+class ColumnsBuilderComponent extends FieldType {
+    dragStartIndex = -1;
+    _columnsForm;
+    aggregateFunctions = [
+        { label: 'Sum', value: 'sum' },
+        { label: 'Average', value: 'avg' },
+        { label: 'Count', value: 'count' },
+        { label: 'Minimum', value: 'min' },
+        { label: 'Maximum', value: 'max' }
+    ];
+    get columns() {
+        return this.props['fields'] || [];
+    }
+    get columnsForm() {
+        return this._columnsForm;
+    }
+    get visibleColumnsCount() {
+        return this.columns.filter(col => this.isColumnVisible(col.key)).length;
+    }
+    get numericColumnsCount() {
+        return this.columns.filter(col => col.isNumeric).length;
+    }
+    get aggregatedColumnsCount() {
+        return this.columns.filter(col => this.hasAggregateFunction(col.key)).length;
+    }
+    ngOnInit() {
+        this.initializeForm();
+        this.setupValueChanges();
+    }
+    // Form Methods
+    initializeForm() {
+        const parentForm = this.form;
+        const fieldKey = this.field.key;
+        if (!fieldKey)
+            return;
+        // Get or create the FormGroup in the parent form
+        let formGroup = parentForm.get(fieldKey);
+        if (!formGroup || !(formGroup instanceof FormGroup)) {
+            // Create new FormGroup
+            formGroup = new FormGroup({});
+            parentForm.setControl(fieldKey, formGroup);
+            // Initialize with existing model data
+            const initialModel = this.model[fieldKey] || {};
+            this.columns.forEach(column => {
+                const columnConfig = initialModel[column.key] || {};
+                const columnGroup = new FormGroup({
+                    isVisible: new FormControl(columnConfig.isVisible ?? column.defaultVisible),
+                    displayName: new FormControl(columnConfig.displayName ?? column.label),
+                    aggregateFunction: new FormControl(columnConfig.aggregateFunction ?? ''),
+                    order: new FormControl(columnConfig.order ?? 0)
+                });
+                formGroup.addControl(column.key, columnGroup);
+            });
+        }
+        // Store the FormGroup reference
+        this._columnsForm = formGroup;
+        // Initialize the model with current form values
+        this.updateModel();
+    }
+    setupValueChanges() {
+        // Listen to form changes and update the model
+        this.columnsForm.valueChanges.subscribe(() => {
+            this.updateModel();
+        });
+    }
+    updateModel() {
+        const fieldKey = this.field.key;
+        if (fieldKey) {
+            // Update the model with current form values
+            this.model[fieldKey] = this.columnsForm.value;
+            // Trigger form control update to notify Formly
+            this.formControl.setValue(this.columnsForm.value);
+        }
+    }
+    // Called when form controls change
+    onFormChange() {
+        this.updateModel();
+    }
+    // Drag & Drop Methods
+    onDragStart(event, index) {
+        this.dragStartIndex = index;
+        event.dataTransfer?.setData('text/plain', index.toString());
+    }
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(event, dropIndex) {
+        event.preventDefault();
+        const dragIndex = this.dragStartIndex;
+        if (dragIndex !== -1 && dragIndex !== dropIndex) {
+            // Reorder the columns array
+            const movedItem = this.columns[dragIndex];
+            const newColumns = [...this.columns];
+            newColumns.splice(dragIndex, 1);
+            newColumns.splice(dropIndex, 0, movedItem);
+            // Update the props to trigger change detection
+            this.props['fields'] = newColumns;
+            // Update order in form controls
+            this.updateColumnOrders();
+            // Update model after reordering
+            this.updateModel();
+        }
+        this.removeDragStyles(event);
+    }
+    onDragEnter(event) {
+        event.currentTarget.classList.add('border-blue-500', 'bg-blue-50');
+    }
+    onDragLeave(event) {
+        this.removeDragStyles(event);
+    }
+    removeDragStyles(event) {
+        event.currentTarget.classList.remove('border-blue-500', 'bg-blue-50');
+    }
+    updateColumnOrders() {
+        // Store the order in form controls
+        this.columns.forEach((column, index) => {
+            const orderControl = this.getColumnControl(column.key, 'order');
+            if (!orderControl) {
+                const columnGroup = this.columnsForm.get(column.key);
+                if (columnGroup && !columnGroup.get('order')) {
+                    columnGroup.addControl('order', new FormControl(index));
+                }
+            }
+            else {
+                orderControl.setValue(index);
+            }
+        });
+    }
+    getColumnControl(columnKey, controlName) {
+        const columnGroup = this.columnsForm.get(columnKey);
+        if (!columnGroup) {
+            const fallbackControl = new FormControl(this.getDefaultValue(controlName));
+            return fallbackControl;
+        }
+        const control = columnGroup.get(controlName);
+        if (!control) {
+            const fallbackControl = new FormControl(this.getDefaultValue(controlName));
+            columnGroup.addControl(controlName, fallbackControl);
+            return fallbackControl;
+        }
+        return control;
+    }
+    getDefaultValue(controlName) {
+        switch (controlName) {
+            case 'isVisible': return true;
+            case 'displayName': return '';
+            case 'aggregateFunction': return '';
+            case 'order': return 0;
+            default: return null;
+        }
+    }
+    isColumnVisible(columnKey) {
+        const control = this.getColumnControl(columnKey, 'isVisible');
+        return control?.value === true;
+    }
+    hasAggregateFunction(columnKey) {
+        const control = this.getColumnControl(columnKey, 'aggregateFunction');
+        return !!control?.value;
+    }
+    getAggregateFunctionValue(columnKey) {
+        const control = this.getColumnControl(columnKey, 'aggregateFunction');
+        return control?.value || '';
+    }
+    toggleAll(visible) {
+        this.columns.forEach(column => {
+            const visibleControl = this.getColumnControl(column.key, 'isVisible');
+            if (visibleControl) {
+                visibleControl.setValue(visible);
+            }
+        });
+        this.updateModel();
+    }
+    resetToDefault() {
+        this.columns.forEach((column, index) => {
+            const columnGroup = this.columnsForm.get(column.key);
+            if (columnGroup) {
+                columnGroup.get('isVisible')?.setValue(column.defaultVisible);
+                columnGroup.get('displayName')?.setValue(column.label);
+                columnGroup.get('aggregateFunction')?.setValue('');
+                columnGroup.get('order')?.setValue(index);
+            }
+        });
+        this.updateModel();
+    }
+    getAggregateLabel(functionName) {
+        const func = this.aggregateFunctions.find(f => f.value === functionName);
+        return func ? func.label : functionName;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnsBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ColumnsBuilderComponent, isStandalone: true, selector: "formly-columns-builder", usesInheritance: true, ngImport: i0, template: `
+   <div>
+     <!-- Header -->
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('COLUMNS_MANAGEMENT' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{ props.description || ('COLUMNS_DESCRIPTION' | translate) }}</p>
+     </div>
+   
+     <!-- Quick Actions -->
+     <div class="flex flex-wrap gap-2 mb-6">
+       <button
+         type="button"
+         (click)="toggleAll(true)"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-eye"></i>
+         {{ 'SHOW_ALL' | translate }}
+       </button>
+       <button
+         type="button"
+         (click)="toggleAll(false)"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-eye-slash"></i>
+         {{ 'HIDE_ALL' | translate }}
+       </button>
+       <button
+         type="button"
+         (click)="resetToDefault()"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-refresh"></i>
+         {{ 'RESET_TO_DEFAULT' | translate }}
+       </button>
+     </div>
+   
+     <!-- Drag Info -->
+     <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+       <i class="pi pi-info-circle mr-2"></i>
+       {{ 'DRAG_COLUMNS_INFO' | translate }}
+     </div>
+   
+     <!-- Columns List -->
+     <div class="space-y-3">
+       @if (columns.length === 0) {
+         <div class="text-center py-8 px-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
+           <i class="pi pi-table text-4xl text-gray-400 mb-3"></i>
+           <p class="text-gray-500">{{ 'NO_COLUMNS_AVAILABLE' | translate }}</p>
+         </div>
+       }
+   
+       @for (column of columns; track column; let i = $index) {
+         <div
+           class="bg-gray-50 rounded-lg border border-gray-200 p-1 transition-colors hover:bg-gray-100"
+           draggable="true"
+           (dragstart)="onDragStart($event, i)"
+           (dragover)="onDragOver($event)"
+           (drop)="onDrop($event, i)"
+           (dragenter)="onDragEnter($event)"
+           (dragleave)="onDragLeave($event)">
+           <div class="grid grid-cols-12 gap-4 items-center">
+             <!-- Drag Handle -->
+             <div class="col-span-1 flex justify-center cursor-move text-gray-400 hover:text-gray-600"
+               draggable="true"
+               (dragstart)="onDragStart($event, i)">
+               <i class="pi pi-bars"></i>
+             </div>
+             <!-- Visibility Toggle -->
+             <div class="col-span-1 flex justify-center">
+               <p-checkbox
+                 [binary]="true"
+                 [formControl]="getColumnControl(column.key, 'isVisible')"
+                 [inputId]="'visible_' + column.key"
+                 styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                 (onChange)="onFormChange()"
+                 >
+               </p-checkbox>
+             </div>
+             <!-- Column Info -->
+             <div class="col-span-12 md:col-span-4">
+               <label [for]="'visible_' + column.key" class="block font-medium text-gray-900 cursor-pointer hover:text-blue-600">
+                 {{ column.label }}
+               </label>
+               <p class="text-xs text-gray-500 mt-1">{{ column.key }}</p>
+             </div>
+             <!-- Display Name -->
+             <div class="col-span-12 md:col-span-3">
+               @if (isColumnVisible(column.key)) {
+                 <input
+                   type="text"
+                   [formControl]="getColumnControl(column.key, 'displayName')"
+                   [placeholder]="column.label"
+                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                   (blur)="onFormChange()"
+                   >
+               }
+             </div>
+             <!-- Aggregate Function -->
+             <!-- <div class="col-span-12 md:col-span-3">
+             <div *ngIf="column.aggregatable && isColumnVisible(column.key)">
+               <p-select
+                 [options]="aggregateFunctions"
+                 optionLabel="label"
+                 optionValue="value"
+                 [formControl]="getColumnControl(column.key, 'aggregateFunction')"
+                 [placeholder]="'SELECT_AGGREGATE' | translate"
+                 [showClear]="true"
+                 styleClass="w-full"
+                 (onChange)="onFormChange()"
+                 >
+               </p-select>
+             </div>
+             <span *ngIf="!column.aggregatable && isColumnVisible(column.key)" class="text-xs text-gray-500">
+               {{ 'NO_AGGREGATES_AVAILABLE' | translate }}
+             </span>
+           </div> -->
+         </div>
+         <!-- Aggregate Info -->
+         @if (hasAggregateFunction(column.key) && isColumnVisible(column.key)) {
+           <div
+             class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+             <div class="flex items-center gap-2">
+               <i class="pi pi-info-circle text-blue-500 text-sm"></i>
+               <span class="text-sm text-blue-800">
+                 <!-- :{function: getAggregateLabel(getAggregateFunctionValue(column.key))} -->
+                 {{ 'AGGREGATE_INFO' | translate }}
+               </span>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   </div>
+   
+   <!-- Summary -->
+   <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6 pt-4 border-t border-gray-200">
+     <span class="text-sm text-gray-600">
+       <!-- :{visible: visibleColumnsCount, total: columns.length} -->
+       {{ 'COLUMNS_VISIBLE_COUNT' | translate }}
+     </span>
+     <!-- <div class="flex gap-4 text-sm">
+     <span class="inline-flex items-center gap-1 text-green-600">
+       <i class="pi pi-chart-line"></i>
+       {{ numericColumnsCount }} {{ 'NUMERIC' | translate }}
+     </span>
+     <span class="inline-flex items-center gap-1 text-blue-600">
+       <i class="pi pi-calculator"></i>
+       {{ aggregatedColumnsCount }} {{ 'AGGREGATED' | translate }}
+     </span>
+   </div> -->
+   </div>
+   </div>
+   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListboxModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColumnsBuilderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-columns-builder',
+                    template: `
+   <div>
+     <!-- Header -->
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('COLUMNS_MANAGEMENT' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{ props.description || ('COLUMNS_DESCRIPTION' | translate) }}</p>
+     </div>
+   
+     <!-- Quick Actions -->
+     <div class="flex flex-wrap gap-2 mb-6">
+       <button
+         type="button"
+         (click)="toggleAll(true)"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-eye"></i>
+         {{ 'SHOW_ALL' | translate }}
+       </button>
+       <button
+         type="button"
+         (click)="toggleAll(false)"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-eye-slash"></i>
+         {{ 'HIDE_ALL' | translate }}
+       </button>
+       <button
+         type="button"
+         (click)="resetToDefault()"
+         class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+         >
+         <i class="pi pi-refresh"></i>
+         {{ 'RESET_TO_DEFAULT' | translate }}
+       </button>
+     </div>
+   
+     <!-- Drag Info -->
+     <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+       <i class="pi pi-info-circle mr-2"></i>
+       {{ 'DRAG_COLUMNS_INFO' | translate }}
+     </div>
+   
+     <!-- Columns List -->
+     <div class="space-y-3">
+       @if (columns.length === 0) {
+         <div class="text-center py-8 px-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
+           <i class="pi pi-table text-4xl text-gray-400 mb-3"></i>
+           <p class="text-gray-500">{{ 'NO_COLUMNS_AVAILABLE' | translate }}</p>
+         </div>
+       }
+   
+       @for (column of columns; track column; let i = $index) {
+         <div
+           class="bg-gray-50 rounded-lg border border-gray-200 p-1 transition-colors hover:bg-gray-100"
+           draggable="true"
+           (dragstart)="onDragStart($event, i)"
+           (dragover)="onDragOver($event)"
+           (drop)="onDrop($event, i)"
+           (dragenter)="onDragEnter($event)"
+           (dragleave)="onDragLeave($event)">
+           <div class="grid grid-cols-12 gap-4 items-center">
+             <!-- Drag Handle -->
+             <div class="col-span-1 flex justify-center cursor-move text-gray-400 hover:text-gray-600"
+               draggable="true"
+               (dragstart)="onDragStart($event, i)">
+               <i class="pi pi-bars"></i>
+             </div>
+             <!-- Visibility Toggle -->
+             <div class="col-span-1 flex justify-center">
+               <p-checkbox
+                 [binary]="true"
+                 [formControl]="getColumnControl(column.key, 'isVisible')"
+                 [inputId]="'visible_' + column.key"
+                 styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                 (onChange)="onFormChange()"
+                 >
+               </p-checkbox>
+             </div>
+             <!-- Column Info -->
+             <div class="col-span-12 md:col-span-4">
+               <label [for]="'visible_' + column.key" class="block font-medium text-gray-900 cursor-pointer hover:text-blue-600">
+                 {{ column.label }}
+               </label>
+               <p class="text-xs text-gray-500 mt-1">{{ column.key }}</p>
+             </div>
+             <!-- Display Name -->
+             <div class="col-span-12 md:col-span-3">
+               @if (isColumnVisible(column.key)) {
+                 <input
+                   type="text"
+                   [formControl]="getColumnControl(column.key, 'displayName')"
+                   [placeholder]="column.label"
+                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                   (blur)="onFormChange()"
+                   >
+               }
+             </div>
+             <!-- Aggregate Function -->
+             <!-- <div class="col-span-12 md:col-span-3">
+             <div *ngIf="column.aggregatable && isColumnVisible(column.key)">
+               <p-select
+                 [options]="aggregateFunctions"
+                 optionLabel="label"
+                 optionValue="value"
+                 [formControl]="getColumnControl(column.key, 'aggregateFunction')"
+                 [placeholder]="'SELECT_AGGREGATE' | translate"
+                 [showClear]="true"
+                 styleClass="w-full"
+                 (onChange)="onFormChange()"
+                 >
+               </p-select>
+             </div>
+             <span *ngIf="!column.aggregatable && isColumnVisible(column.key)" class="text-xs text-gray-500">
+               {{ 'NO_AGGREGATES_AVAILABLE' | translate }}
+             </span>
+           </div> -->
+         </div>
+         <!-- Aggregate Info -->
+         @if (hasAggregateFunction(column.key) && isColumnVisible(column.key)) {
+           <div
+             class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+             <div class="flex items-center gap-2">
+               <i class="pi pi-info-circle text-blue-500 text-sm"></i>
+               <span class="text-sm text-blue-800">
+                 <!-- :{function: getAggregateLabel(getAggregateFunctionValue(column.key))} -->
+                 {{ 'AGGREGATE_INFO' | translate }}
+               </span>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   </div>
+   
+   <!-- Summary -->
+   <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6 pt-4 border-t border-gray-200">
+     <span class="text-sm text-gray-600">
+       <!-- :{visible: visibleColumnsCount, total: columns.length} -->
+       {{ 'COLUMNS_VISIBLE_COUNT' | translate }}
+     </span>
+     <!-- <div class="flex gap-4 text-sm">
+     <span class="inline-flex items-center gap-1 text-green-600">
+       <i class="pi pi-chart-line"></i>
+       {{ numericColumnsCount }} {{ 'NUMERIC' | translate }}
+     </span>
+     <span class="inline-flex items-center gap-1 text-blue-600">
+       <i class="pi pi-calculator"></i>
+       {{ aggregatedColumnsCount }} {{ 'AGGREGATED' | translate }}
+     </span>
+   </div> -->
+   </div>
+   </div>
+   `,
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
+                        FormlyForm,
+                        TooltipModule,
+                        MenuModule,
+                        TranslatePipe,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        PopoverModule,
+                        ListboxModule
+                    ]
+                }]
+        }] });
+
+// group-builder.component.ts
+class GroupBuilderComponent extends FieldType {
+    _groups;
+    dragStartIndex = -1;
+    get groups() {
+        return this._groups;
+    }
+    get availableFields() {
+        return this.props['fields'] || [];
+    }
+    get maxGroups() {
+        return this.props['maxGroups'] || 3;
+    }
+    ngOnInit() {
+        this.initializeFormArray();
+        this.setupValueChanges();
+    }
+    initializeFormArray() {
+        const parentForm = this.form;
+        const fieldKey = this.field.key;
+        if (!fieldKey)
+            return;
+        // Get or create the FormArray in the parent form
+        let formArray = parentForm.get(fieldKey);
+        if (!formArray || !(formArray instanceof FormArray)) {
+            // Create new FormArray
+            formArray = new FormArray([]);
+            parentForm.setControl(fieldKey, formArray);
+            // Initialize with existing model data
+            const initialValue = this.model[fieldKey];
+            if (Array.isArray(initialValue)) {
+                initialValue.forEach(group => {
+                    formArray.push(this.createGroupControl(group));
+                });
+            }
+        }
+        // Store the FormArray reference
+        this._groups = formArray;
+    }
+    setupValueChanges() {
+        // Listen to form array changes and update the model
+        this.groups.valueChanges.subscribe(() => {
+            this.updateModel();
+        });
+    }
+    updateModel() {
+        const fieldKey = this.field.key;
+        if (fieldKey) {
+            // Update the model with current form values
+            this.model[fieldKey] = this.groups.value;
+            // Trigger form control update to notify Formly
+            this.formControl.setValue(this.groups.value);
+            // Mark form control as touched/dirty if needed
+            this.formControl.markAsTouched();
+            this.formControl.markAsDirty();
+        }
+    }
+    // Called when form controls change
+    onFormChange() {
+        this.updateModel();
+    }
+    createGroupControl(group) {
+        return new FormGroup({
+            field: new FormControl(group?.field || ''),
+            displayName: new FormControl(group?.displayName || ''),
+            showTotal: new FormControl(group?.showTotal !== false)
+        });
+    }
+    addGroup() {
+        if (this.canAddMoreGroups()) {
+            this.groups.push(this.createGroupControl());
+            this.updateModel();
+        }
+    }
+    removeGroup(index) {
+        this.groups.removeAt(index);
+        this.updateModel();
+    }
+    // Drag & Drop Methods
+    onDragStart(event, index) {
+        this.dragStartIndex = index;
+        event.dataTransfer?.setData('text/plain', index.toString());
+        event.currentTarget.classList.add('opacity-50', 'border-blue-300');
+    }
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(event, dropIndex) {
+        event.preventDefault();
+        const dragIndex = this.dragStartIndex;
+        if (dragIndex !== -1 && dragIndex !== dropIndex) {
+            this.moveGroup(dragIndex, dropIndex);
+        }
+        this.removeDragStyles(event);
+    }
+    onDragEnter(event) {
+        event.currentTarget.classList.add('border-blue-500', 'bg-blue-50', 'border-2');
+    }
+    onDragLeave(event) {
+        this.removeDragStyles(event);
+    }
+    onDragEnd(event) {
+        this.removeDragStyles(event);
+        this.dragStartIndex = -1;
+    }
+    removeDragStyles(event) {
+        const element = event.currentTarget;
+        element.classList.remove('border-blue-500', 'bg-blue-50', 'opacity-50', 'border-blue-300', 'border-2');
+    }
+    moveGroup(fromIndex, toIndex) {
+        const movedGroup = this.groups.at(fromIndex);
+        this.groups.removeAt(fromIndex);
+        this.groups.insert(toIndex, movedGroup);
+        this.updateModel();
+    }
+    getGroupControl(index, controlName) {
+        const group = this.groups.at(index);
+        return group.get(controlName);
+    }
+    onFieldChange(index, fieldKey) {
+        const displayNameControl = this.getGroupControl(index, 'displayName');
+        if (!displayNameControl.value && fieldKey) {
+            const field = this.availableFields.find(f => f.key === fieldKey);
+            if (field) {
+                displayNameControl.setValue(field.label);
+            }
+        }
+        this.updateModel();
+    }
+    getFieldLabel(fieldKey) {
+        const field = this.availableFields.find(f => f.key === fieldKey);
+        return field ? field.label : fieldKey;
+    }
+    canAddMoreGroups() {
+        return this.groups.length < this.maxGroups;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GroupBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GroupBuilderComponent, isStandalone: true, selector: "formly-group-builder", usesInheritance: true, ngImport: i0, template: `<div>
+    <!-- Header -->
+    <div class="mb-6">
+      <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('DATA_GROUPING' | translate) }}</h5>
+      <p class="text-gray-600 text-sm">{{ props.description || ('GROUP_DESCRIPTION' | translate) }}</p>
+    </div>
+  
+    <!-- Group Configuration -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <span class="font-medium text-gray-700">{{ 'GROUP_LEVELS' | translate }}</span>
+        @if (canAddMoreGroups()) {
+          <button
+            type="button"
+            (click)="addGroup()"
+            [disabled]="!canAddMoreGroups()"
+            class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+            <i class="pi pi-plus"></i>
+            {{ 'ADD_GROUP_LEVEL' | translate }}
+          </button>
+        }
+      </div>
+  
+      <!-- Drag Info -->
+      @if (groups.length > 1) {
+        <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+          <i class="pi pi-info-circle mr-2"></i>
+          {{ 'DRAG_INFO' | translate }}
+        </div>
+      }
+  
+      <!-- Empty State -->
+      @if (groups.length === 0) {
+        <div class="text-center py-8 px-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
+          <i class="pi pi-layer-group text-4xl text-gray-400 mb-3"></i>
+          <p class="text-gray-500 mb-4">{{ 'NO_GROUPING_LEVELS' | translate }}</p>
+          <button
+            type="button"
+            (click)="addGroup()"
+            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+            >
+            <i class="pi pi-plus"></i>
+            {{ 'ADD_FIRST_GROUP_LEVEL' | translate }}
+          </button>
+        </div>
+      }
+  
+      <!-- Groups List with Drag & Drop -->
+      <div class="space-y-3">
+        @for (group of groups.controls; track group; let i = $index) {
+          <div
+            class="bg-gray-50 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
+            draggable="true"
+            (dragstart)="onDragStart($event, i)"
+            (dragover)="onDragOver($event)"
+            (drop)="onDrop($event, i)"
+            (dragenter)="onDragEnter($event)"
+            (dragleave)="onDragLeave($event)"
+            (dragend)="onDragEnd($event)">
+            <div class="grid grid-cols-12 gap-4 items-start">
+              <!-- Drag Handle -->
+              @if (groups.length > 1) {
+                <div
+                  class="col-span-1 flex justify-center cursor-move text-gray-400 hover:text-gray-600 pt-2"
+                  draggable="true"
+                  (dragstart)="onDragStart($event, i)">
+                  <i class="pi pi-bars"></i>
+                </div>
+              }
+              <!-- Group Content -->
+              <div class="col-span-11">
+                <div class="flex items-center justify-between mb-3">
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-sort-alt text-gray-500"></i>
+                    <span class="font-medium text-gray-700">{{ 'GROUP_LEVEL' | translate }} {{ i + 1 }}</span>
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <button
+                      type="button"
+                      (click)="removeGroup(i)"
+                      class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                      [pTooltip]="'REMOVE' | translate"
+                      >
+                      <i class="pi pi-times"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <!-- Field Selection -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'FIELD' | translate }}</label>
+                    <p-select
+                      [options]="availableFields"
+                      optionLabel="label"
+                      optionValue="key"
+                      [formControl]="getGroupControl(i, 'field')"
+                      [placeholder]="'SELECT_FIELD' | translate"
+                      [showClear]="true"
+                      (onChange)="onFieldChange(i, $event.value)"
+                      styleClass="w-full"
+                      >
+                      <ng-template pTemplate="selectedItem">
+                        @if (getGroupControl(i, 'field').value) {
+                          <span class="text-gray-900">
+                            {{ getFieldLabel(getGroupControl(i, 'field').value) }}
+                          </span>
+                        }
+                        @if (!getGroupControl(i, 'field').value) {
+                          <span class="text-gray-500">{{ 'SELECT_FIELD' | translate }}</span>
+                        }
+                      </ng-template>
+                    </p-select>
+                  </div>
+                  <!-- Display Name -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'DISPLAY_NAME' | translate }}</label>
+                    <input
+                      type="text"
+                      pInputText
+                      [formControl]="getGroupControl(i, 'displayName')"
+                      [placeholder]="'DISPLAY_NAME_PLACEHOLDER' | translate"
+                      class="w-full text-gray-900"
+                      (blur)="onFormChange()"
+                      >
+                    </div>
+                  </div>
+                  <!-- Show Total Toggle -->
+                  <div class="flex items-center gap-2 mt-3">
+                    <p-checkbox
+                      [binary]="true"
+                      [formControl]="getGroupControl(i, 'showTotal')"
+                      [inputId]="'showTotal' + i"
+                      styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                      (onChange)="onFormChange()"
+                      >
+                    </p-checkbox>
+                    <label [for]="'showTotal' + i" class="text-sm text-gray-700 cursor-pointer hover:text-gray-900">
+                      {{ 'SHOW_TOTAL' | translate }}
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+  
+      <!-- Grouping Tips -->
+      @if (groups.length > 0) {
+        <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <div class="flex items-center gap-3">
+            <i class="pi pi-info-circle text-blue-500"></i>
+            <div>
+              <p class="text-sm text-blue-800">
+                <!-- :{count: groups.length} -->
+                {{ 'GROUPING_TIPS' | translate }}
+                {{ groups.length }} {{ 'LEVELS_DEFINED' | translate }}
+              </p>
+            </div>
+          </div>
+        </div>
+      }
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RadioButtonModule }, { 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", "ptTooltip"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListboxModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GroupBuilderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-group-builder',
+                    template: `<div>
+    <!-- Header -->
+    <div class="mb-6">
+      <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('DATA_GROUPING' | translate) }}</h5>
+      <p class="text-gray-600 text-sm">{{ props.description || ('GROUP_DESCRIPTION' | translate) }}</p>
+    </div>
+  
+    <!-- Group Configuration -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <span class="font-medium text-gray-700">{{ 'GROUP_LEVELS' | translate }}</span>
+        @if (canAddMoreGroups()) {
+          <button
+            type="button"
+            (click)="addGroup()"
+            [disabled]="!canAddMoreGroups()"
+            class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+            <i class="pi pi-plus"></i>
+            {{ 'ADD_GROUP_LEVEL' | translate }}
+          </button>
+        }
+      </div>
+  
+      <!-- Drag Info -->
+      @if (groups.length > 1) {
+        <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+          <i class="pi pi-info-circle mr-2"></i>
+          {{ 'DRAG_INFO' | translate }}
+        </div>
+      }
+  
+      <!-- Empty State -->
+      @if (groups.length === 0) {
+        <div class="text-center py-8 px-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
+          <i class="pi pi-layer-group text-4xl text-gray-400 mb-3"></i>
+          <p class="text-gray-500 mb-4">{{ 'NO_GROUPING_LEVELS' | translate }}</p>
+          <button
+            type="button"
+            (click)="addGroup()"
+            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+            >
+            <i class="pi pi-plus"></i>
+            {{ 'ADD_FIRST_GROUP_LEVEL' | translate }}
+          </button>
+        </div>
+      }
+  
+      <!-- Groups List with Drag & Drop -->
+      <div class="space-y-3">
+        @for (group of groups.controls; track group; let i = $index) {
+          <div
+            class="bg-gray-50 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
+            draggable="true"
+            (dragstart)="onDragStart($event, i)"
+            (dragover)="onDragOver($event)"
+            (drop)="onDrop($event, i)"
+            (dragenter)="onDragEnter($event)"
+            (dragleave)="onDragLeave($event)"
+            (dragend)="onDragEnd($event)">
+            <div class="grid grid-cols-12 gap-4 items-start">
+              <!-- Drag Handle -->
+              @if (groups.length > 1) {
+                <div
+                  class="col-span-1 flex justify-center cursor-move text-gray-400 hover:text-gray-600 pt-2"
+                  draggable="true"
+                  (dragstart)="onDragStart($event, i)">
+                  <i class="pi pi-bars"></i>
+                </div>
+              }
+              <!-- Group Content -->
+              <div class="col-span-11">
+                <div class="flex items-center justify-between mb-3">
+                  <div class="flex items-center gap-2">
+                    <i class="pi pi-sort-alt text-gray-500"></i>
+                    <span class="font-medium text-gray-700">{{ 'GROUP_LEVEL' | translate }} {{ i + 1 }}</span>
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <button
+                      type="button"
+                      (click)="removeGroup(i)"
+                      class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                      [pTooltip]="'REMOVE' | translate"
+                      >
+                      <i class="pi pi-times"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <!-- Field Selection -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'FIELD' | translate }}</label>
+                    <p-select
+                      [options]="availableFields"
+                      optionLabel="label"
+                      optionValue="key"
+                      [formControl]="getGroupControl(i, 'field')"
+                      [placeholder]="'SELECT_FIELD' | translate"
+                      [showClear]="true"
+                      (onChange)="onFieldChange(i, $event.value)"
+                      styleClass="w-full"
+                      >
+                      <ng-template pTemplate="selectedItem">
+                        @if (getGroupControl(i, 'field').value) {
+                          <span class="text-gray-900">
+                            {{ getFieldLabel(getGroupControl(i, 'field').value) }}
+                          </span>
+                        }
+                        @if (!getGroupControl(i, 'field').value) {
+                          <span class="text-gray-500">{{ 'SELECT_FIELD' | translate }}</span>
+                        }
+                      </ng-template>
+                    </p-select>
+                  </div>
+                  <!-- Display Name -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'DISPLAY_NAME' | translate }}</label>
+                    <input
+                      type="text"
+                      pInputText
+                      [formControl]="getGroupControl(i, 'displayName')"
+                      [placeholder]="'DISPLAY_NAME_PLACEHOLDER' | translate"
+                      class="w-full text-gray-900"
+                      (blur)="onFormChange()"
+                      >
+                    </div>
+                  </div>
+                  <!-- Show Total Toggle -->
+                  <div class="flex items-center gap-2 mt-3">
+                    <p-checkbox
+                      [binary]="true"
+                      [formControl]="getGroupControl(i, 'showTotal')"
+                      [inputId]="'showTotal' + i"
+                      styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                      (onChange)="onFormChange()"
+                      >
+                    </p-checkbox>
+                    <label [for]="'showTotal' + i" class="text-sm text-gray-700 cursor-pointer hover:text-gray-900">
+                      {{ 'SHOW_TOTAL' | translate }}
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+  
+      <!-- Grouping Tips -->
+      @if (groups.length > 0) {
+        <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <div class="flex items-center gap-3">
+            <i class="pi pi-info-circle text-blue-500"></i>
+            <div>
+              <p class="text-sm text-blue-800">
+                <!-- :{count: groups.length} -->
+                {{ 'GROUPING_TIPS' | translate }}
+                {{ groups.length }} {{ 'LEVELS_DEFINED' | translate }}
+              </p>
+            </div>
+          </div>
+        </div>
+      }
+    </div>`,
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
+                        FormlyForm,
+                        TooltipModule,
+                        MenuModule,
+                        TranslatePipe,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        PopoverModule,
+                        ListboxModule
+                    ]
+                }]
+        }] });
+
+// 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: "21.1.3", ngImport: i0, type: GroupTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GroupTypeComponent, isStandalone: true, selector: "formly-group-type", usesInheritance: true, ngImport: i0, template: `
+    <div [class]="groupClass">
+      @if (props.label || props.collapsible) {
+        <div class="flex justify-between items-center p-2"
+          (click)="props.collapsible && toggle()">
+          <div class="flex items-center gap-2">
+            @if (props.collapsible) {
+              <i [class]="collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
+            }
+            @if (props.label) {
+              <label class="font-semibold">{{ props.label }}</label>
+            }
+            @if (isRequired()) {
+              <i class="pi pi-asterisk text-red-500 text-xs" pTooltip="حقل مطلوب"></i>
+            }
+          </div>
+          <div class="flex gap-2">
+            @if (props.description && !collapsed) {
+              <i class="pi pi-info-circle text-500"
+              pTooltip="{{ props.description }}"></i>
+            }
+            @if (showValidation) {
+              <i [class]="validationIcon" [pTooltip]="validationText"></i>
+            }
+            @for (a of props.actions || []; track a) {
+              <button 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>
+      }
+    
+      @if (!collapsed) {
+        <div class="p-3 pt-0" [ngClass]="props.compact ? 'compact-layout' : ''">
+          @if (props.description && props.showDescription) {
+            <p class="text-500 text-sm mb-2">{{ props.description }}</p>
+          }
+          <div [ngClass]="gridClass">
+            @for (f of field.fieldGroup; track f) {
+              <formly-field [field]="f"></formly-field>
+              @if (f.props?.description) {
+                <small
+                  class="block text-500 text-xs mt-1 ml-1">
+                  {{ f.props?.description  }}
+                </small>
+              }
+            }
+          </div>
+          @if (!field.fieldGroup?.length) {
+            <div 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { 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", "ptTooltip"] }, { kind: "ngmodule", type: BadgeModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GroupTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-group-type',
+                    standalone: true,
+                    imports: [CommonModule, FormlyField, ButtonModule, TooltipModule, BadgeModule],
+                    template: `
+    <div [class]="groupClass">
+      @if (props.label || props.collapsible) {
+        <div class="flex justify-between items-center p-2"
+          (click)="props.collapsible && toggle()">
+          <div class="flex items-center gap-2">
+            @if (props.collapsible) {
+              <i [class]="collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
+            }
+            @if (props.label) {
+              <label class="font-semibold">{{ props.label }}</label>
+            }
+            @if (isRequired()) {
+              <i class="pi pi-asterisk text-red-500 text-xs" pTooltip="حقل مطلوب"></i>
+            }
+          </div>
+          <div class="flex gap-2">
+            @if (props.description && !collapsed) {
+              <i class="pi pi-info-circle text-500"
+              pTooltip="{{ props.description }}"></i>
+            }
+            @if (showValidation) {
+              <i [class]="validationIcon" [pTooltip]="validationText"></i>
+            }
+            @for (a of props.actions || []; track a) {
+              <button 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>
+      }
+    
+      @if (!collapsed) {
+        <div class="p-3 pt-0" [ngClass]="props.compact ? 'compact-layout' : ''">
+          @if (props.description && props.showDescription) {
+            <p class="text-500 text-sm mb-2">{{ props.description }}</p>
+          }
+          <div [ngClass]="gridClass">
+            @for (f of field.fieldGroup; track f) {
+              <formly-field [field]="f"></formly-field>
+              @if (f.props?.description) {
+                <small
+                  class="block text-500 text-xs mt-1 ml-1">
+                  {{ f.props?.description  }}
+                </small>
+              }
+            }
+          </div>
+          @if (!field.fieldGroup?.length) {
+            <div 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: 'tab-type',
+            component: TabTypeComponent
+        },
+        {
+            name: 'query-builder',
+            component: QueryBuilderComponent
+        },
+        {
+            name: 'sort-builder',
+            component: SortBuilderComponent
+        },
+        {
+            name: 'group-builder',
+            component: GroupBuilderComponent
+        },
+        {
+            name: 'columns-builder',
+            component: ColumnsBuilderComponent
+        },
+        { name: 'group', component: GroupTypeComponent },
+    ],
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnsBuilderComponent, GenericSearchAdvanced, GenericSearchAdvancedModule, GroupBuilderComponent, GroupTypeComponent, QueryBuilderComponent, QueryBuilderService, SortBuilderComponent, TabTypeComponent, formlyConfig };
+//# sourceMappingURL=es.framework-ng.ui.core-generic-search-advanced.mjs.map