@elite.framework/ng.ui.core 1.0.80 → 1.0.82

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

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { NgModule, inject, Injectable, EventEmitter, Input, Output, Component, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/forms';
-import { FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, FormsModule, FormControl, FormArray } from '@angular/forms';
 import { FormlyForm, FieldType, FormlyField, provideFormlyConfig } from '@ngx-formly/core';
 import * as i10 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -32,13 +32,14 @@ import * as i6$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i7$1 from 'primeng/listbox';
 import { ListboxModule } from 'primeng/listbox';
+import * as i4$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 i6$2 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import * as i2$1 from 'primeng/tabs';
+import * as i2$2 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 
 class GenericSearchAdvancedModule {
@@ -68,36 +69,27 @@ class QueryBuilderService {
         'radio': { defaultOperator: 'eq', defaultValue: '', operators: ['eq', 'ne'] },
         'textarea': { defaultOperator: 'contains', defaultValue: '', operators: ['eq', 'ne', 'contains', 'startswith', 'endswith'] }
     };
-    buildQueryUIFields(fields) {
+    buildQueryUIFields(fields, enableSelect, enableGroup) {
         return [
-            // {
-            //   key: 'quickSearch',
-            //   type: 'input',
-            //   props: {
-            //     label: 'بحث سريع',
-            //     placeholder: 'ابحث في جميع الحقول...',
-            //     icon: 'pi pi-search'
-            //   }
-            // },
             {
                 type: 'tab-type',
-                // key: 'queryTabs',
                 props: {
                     tabViewClass: 'advanced-query-tabs',
                     scrollable: false,
                     lazy: true,
                     activeIndex: 0
                 },
-                fieldGroup: this.getQueryTabs(fields)
+                fieldGroup: this.getQueryTabs(fields, enableSelect, enableGroup)
             }
         ];
     }
-    getQueryTabs(fields) {
-        return [
+    getQueryTabs(fields, enableSelect, enableGroup) {
+        const tabs = [
             {
                 type: 'group',
                 props: {
-                    label: 'FILTERS',
+                    tabLabel: 'FILTERS',
+                    // label: 'FILTERS',
                     leftIcon: 'pi pi-filter',
                     badge: (field) => {
                         const fieldGroup = (field?.fieldGroup ?? [])[0];
@@ -109,7 +101,8 @@ class QueryBuilderService {
             {
                 type: 'group',
                 props: {
-                    label: 'SORTING',
+                    tabLabel: 'SORTING',
+                    // label: 'SORTING',
                     leftIcon: 'pi pi-sort-alt',
                     badge: (field) => {
                         const fieldGroup = (field?.fieldGroup ?? [])[0];
@@ -118,11 +111,47 @@ class QueryBuilderService {
                 },
                 fieldGroup: this.getSortingTabFields(fields)
             },
-            {
+            enableGroup && {
                 type: 'group',
                 props: {
-                    label: 'PAGINATION',
+                    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;
                     },
@@ -130,6 +159,7 @@ class QueryBuilderService {
                 fieldGroup: this.getPaginationTabFields()
             }
         ];
+        return tabs.filter(Boolean);
     }
     getFilterTabFields(fields) {
         return [
@@ -137,8 +167,8 @@ class QueryBuilderService {
                 key: 'advancedFilters',
                 type: 'query-builder',
                 props: {
-                    label: 'مرشحات متقدمة',
-                    description: 'أنشئ مرشحات معقدة باستخدام مشغلين منطقيين',
+                    label: 'فلاتر متقدمة',
+                    description: 'أنشئ فلاتر معقدة باستخدام مشغلين منطقيين',
                     fields: this.extractFilterableFields(fields)
                 }
             }
@@ -157,6 +187,33 @@ class QueryBuilderService {
             }
         ];
     }
+    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 [
             {
@@ -181,36 +238,40 @@ class QueryBuilderService {
                             description: 'أقصى عدد للسجلات المراد عرضها'
                         }
                     },
-                    // {
-                    //   key: 'skip',
-                    //   type: 'input',
-                    //   props: {
-                    //     type: 'number',
-                    //     label: 'تخطي السجلات',
-                    //     min: 0,
-                    //     description: 'عدد السجلات التي سيتم تخطيها'
-                    //   }
-                    // }
+                    {
+                        key: 'skip',
+                        type: 'input',
+                        props: {
+                            type: 'number',
+                            label: 'تخطي السجلات',
+                            min: 0,
+                            description: 'عدد السجلات التي سيتم تخطيها'
+                        }
+                    },
+                    {
+                        key: 'includeCount',
+                        type: 'checkbox',
+                        props: {
+                            label: 'تضمين العدد الإجمالي',
+                            description: 'تضمين عدد السجلات الإجمالي في الاستجابة'
+                        }
+                    }
                 ]
             }
         ];
     }
-    getFilterCount() {
-        return '0';
-    }
     extractFilterableFields(fields) {
         const filterableFields = [];
         this.traverseFields(fields, (field) => {
-            if (field.key && field.props && field.props['filterable'] !== false && !field.props?.hidden) {
+            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.key,
+                    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,
-                    // Add default values for QueryBuilderComponent compatibility
                     defaultOperator: fieldConfig.defaultOperator,
                     defaultValue: fieldConfig.defaultValue
                 });
@@ -221,26 +282,44 @@ class QueryBuilderService {
     extractSortableFields(fields) {
         const sortableFields = [];
         this.traverseFields(fields, (field) => {
-            if (field.key && field.props && field.props['sortable'] !== false && !field.props?.hidden) {
+            if (field.key && field.props && ((field.props['sort'] && field.props['sort'].hidden == false) || !field.props['sort']) && !field.props?.hidden) {
                 sortableFields.push({
-                    key: field.key,
+                    key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
                     label: this.translate.instant(field.props.label || field.key)
                 });
             }
         });
         return sortableFields;
     }
-    extractExpandableFields(fields) {
-        const expandableFields = [];
+    extractGroupableFields(fields) {
+        const groupableFields = [];
         this.traverseFields(fields, (field) => {
-            if (field.key && field.props && field.props['expandable'] && !field.props?.hidden) {
-                expandableFields.push({
-                    label: field.props.label || field.key,
-                    value: field.key
+            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 expandableFields;
+        return groupableFields;
+    }
+    extractSelectableFields(fields) {
+        const selectableFields = [];
+        this.traverseFields(fields, (field) => {
+            if (field.key && field.props && ((field.props['select'] && field.props['select'].hidden == false) || !field.props['select']) && !field.props?.hidden) {
+                const isNumeric = ['number', 'currency'].includes(field.type);
+                selectableFields.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: isNumeric,
+                    defaultVisible: field.props['defaultVisible'] !== false,
+                    aggregatable: isNumeric && field.props['aggregatable'] !== false
+                });
+            }
+        });
+        return selectableFields;
     }
     traverseFields(fields, callback) {
         fields.forEach(field => {
@@ -250,6 +329,58 @@ class QueryBuilderService {
             }
         });
     }
+    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',
@@ -260,30 +391,49 @@ class QueryBuilderService {
             'generic-selector': 'generic-selector',
             'switch': 'switch',
             'radio': 'radio',
-            'textarea': 'textarea'
+            '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'];
     }
-    // OData methods remain the same
+    // Enhanced OData methods with GroupBy and Select support
     buildODataFromQueryModel(model, originalFields) {
         const params = {
             filters: [],
             orderBy: [],
             groupBy: [],
-            expand: model.expand || []
+            select: [],
+            aggregates: [],
+            expand: model.expand || [],
+            includeCount: model.pagination?.includeCount || false
         };
         // Quick search
-        if (model.quickSearch) {
-            const searchableFields = this.extractFilterableFields(originalFields);
+        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.quickSearch
+                value: model.filter
             }));
             if (quickSearchConditions.length > 0) {
                 params.filters.push({
@@ -305,6 +455,80 @@ class QueryBuilderService {
                 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) {
@@ -313,6 +537,9 @@ class QueryBuilderService {
             if (model.pagination.skip) {
                 params.skip = Number(model.pagination.skip);
             }
+            if (model.pagination.includeCount !== undefined) {
+                params.includeCount = model.pagination.includeCount;
+            }
         }
         return params;
     }
@@ -322,60 +549,20 @@ class QueryBuilderService {
     parseODataQuery(queryString) {
         return QueryParser.parse(queryString);
     }
-    parseODataToQueryModel(queryString, originalFields) {
-        const params = this.parseODataQuery(queryString);
-        const model = {
-            advancedFilters: [],
-            sorting: [],
-            pagination: {}
-        };
-        // Parse filters back to UI model
-        if (params.filters && params.filters.length > 0) {
-            params.filters.forEach((group) => {
-                if (group.logicalOperator === 'or' && group.conditions.length > 1) {
-                    const firstValue = group.conditions[0].value;
-                    if (group.conditions.every(cond => cond.operator === 'contains' && cond.value === firstValue)) {
-                        model.quickSearch = firstValue;
-                        return;
-                    }
-                }
-                group.conditions.forEach(condition => {
-                    model.advancedFilters.push({
-                        field: condition.field,
-                        operator: condition.operator,
-                        value: condition.value
-                    });
-                });
-            });
-        }
-        // Parse sorting
-        if (params.orderBy) {
-            model.sorting = params.orderBy.map(order => ({
-                field: order.field,
-                direction: order.direction
-            }));
-        }
-        // Parse pagination
-        if (params.top !== undefined) {
-            model.pagination.top = params.top;
-        }
-        if (params.skip !== undefined) {
-            model.pagination.skip = params.skip;
-        }
-        // Parse expand
-        if (params.expand) {
-            model.expand = params.expand;
-        }
-        return model;
-    }
-    buildODataQueryString(model, originalFields) {
-        const params = this.buildODataFromQueryModel(model, originalFields);
-        return this.toODataQueryString(params);
-    }
-    // Helper method to get field configuration for QueryBuilderComponent
+    // 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' }
+        ];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderService, providedIn: 'root' });
 }
@@ -399,7 +586,8 @@ class GenericSearchAdvanced {
     options = {};
     fields = [];
     fields_ = [];
-    enableQueryBuilder = true;
+    enableSelect = false;
+    enableGroup = false;
     odataConfig = {};
     ngOnInit() {
         this.buildQueryUIFields();
@@ -411,12 +599,7 @@ class GenericSearchAdvanced {
         return filters;
     }
     buildQueryUIFields() {
-        if (this.enableQueryBuilder) {
-            this.fields_ = this.queryBuilder.buildQueryUIFields(this.fields);
-        }
-        else {
-            this.fields_ = this.fields;
-        }
+        this.fields_ = this.queryBuilder.buildQueryUIFields(this.fields, this.enableSelect, this.enableGroup);
     }
     onSubmit() {
         // Use the new QueryBuilderService methods
@@ -465,7 +648,7 @@ class GenericSearchAdvanced {
         this.drawerVisible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableQueryBuilder: "enableQueryBuilder", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\r\n  <!-- Search Input with Icon -->\r\n  <p-inputgroup class=\"w-full\">\r\n  <input\r\n    pInputText\r\n    type=\"text\"\r\n    [(ngModel)]=\"model['filter']\"\r\n    placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    (keyup.enter)=\"onSubmit()\"\r\n  />\r\n\r\n\r\n  <p-inputgroup-addon>\r\n    <p-button\r\n      icon=\"pi pi-search\"\r\n      severity=\"secondary\"\r\n      (click)=\"onSubmit()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n<p-inputgroup-addon>\r\n  <div class=\"relative inline-flex\">\r\n    <p-button\r\n      icon=\"pi pi-filter\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"drawerVisible = true\">\r\n    </p-button>\r\n\r\n    <p-badge\r\n      *ngIf=\"filterCount > 0\"\r\n      [value]=\"filterCount\"\r\n      severity=\"warn\"\r\n      size=\"small\"\r\n      class=\"absolute -top-0 -right-0\">\r\n    </p-badge>\r\n  </div>\r\n</p-inputgroup-addon>\r\n\r\n  <p-inputgroup-addon *ngIf=\"model['filter'] || filterCount > 0\">\r\n    <p-button\r\n      icon=\"pi pi-times\"\r\n      severity=\"danger\"\r\n      (click)=\"model['filter']=''; onReset()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n</p-inputgroup>\r\n\r\n\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n @if(drawerVisible){\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); drawerVisible=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i7.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i8.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", 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\">\r\n  <!-- Search Input with Icon -->\r\n  <p-inputgroup class=\"w-full\">\r\n  <input\r\n    pInputText\r\n    type=\"text\"\r\n    [(ngModel)]=\"model['filter']\"\r\n    placeholder=\"{{ 'SEARCH' | translate }}\"\r\n    (keyup.enter)=\"onSubmit()\"\r\n  />\r\n\r\n\r\n  <p-inputgroup-addon>\r\n    <p-button\r\n      icon=\"pi pi-search\"\r\n      severity=\"secondary\"\r\n      (click)=\"onSubmit()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n<p-inputgroup-addon>\r\n  <div class=\"relative inline-flex\">\r\n    <p-button\r\n      icon=\"pi pi-filter\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"drawerVisible = true\">\r\n    </p-button>\r\n\r\n    <p-badge\r\n      *ngIf=\"filterCount > 0\"\r\n      [value]=\"filterCount\"\r\n      severity=\"warn\"\r\n      size=\"small\"\r\n      class=\"absolute -top-0 -right-0\">\r\n    </p-badge>\r\n  </div>\r\n</p-inputgroup-addon>\r\n\r\n  <p-inputgroup-addon *ngIf=\"model['filter'] || filterCount > 0\">\r\n    <p-button\r\n      icon=\"pi pi-times\"\r\n      severity=\"danger\"\r\n      (click)=\"model['filter']=''; onReset()\"\r\n    ></p-button>\r\n  </p-inputgroup-addon>\r\n</p-inputgroup>\r\n\r\n\r\n</div>\r\n\r\n<!-- Drawer for Advanced Multi-field Search -->\r\n @if(drawerVisible){\r\n<p-drawer\r\n  [(visible)]=\"drawerVisible\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); drawerVisible=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); drawerVisible=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i7.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i8.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
             type: Component,
@@ -495,7 +678,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 type: Input
             }], fields: [{
                 type: Input
-            }], enableQueryBuilder: [{
+            }], enableSelect: [{
+                type: Input
+            }], enableGroup: [{
                 type: Input
             }], odataConfig: [{
                 type: Input
@@ -774,7 +959,7 @@ class SortBuilderComponent extends FieldType {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i5$1.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i5$1.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: SortBuilderComponent, decorators: [{
             type: Component,
@@ -1252,7 +1437,7 @@ class QueryBuilderComponent extends FieldType {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7$1.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7$1.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
             type: Component,
@@ -1322,7 +1507,7 @@ class TabTypeComponent extends FieldType {
             <i *ngIf="tab.props['leftIcon']" [class]="tab.props['leftIcon']" class="text-sm"></i>
 
             <!-- Label -->
-            <span>{{ (tab.props['label'] ?? '') | translate }}</span>
+            <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
 
             <!-- Badge -->
 
@@ -1358,7 +1543,7 @@ class TabTypeComponent extends FieldType {
         </p-tabpanel>
       </p-tabpanels>
     </p-tabs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$1.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$1.TabList, selector: "p-tablist" }, { kind: "component", type: i2$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabList, selector: "p-tablist" }, { kind: "component", type: i2$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TabTypeComponent, decorators: [{
             type: Component,
@@ -1383,7 +1568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
             <i *ngIf="tab.props['leftIcon']" [class]="tab.props['leftIcon']" class="text-sm"></i>
 
             <!-- Label -->
-            <span>{{ (tab.props['label'] ?? '') | translate }}</span>
+            <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
 
             <!-- Badge -->
 
@@ -1425,6 +1610,999 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 
+// 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: "20.1.8", ngImport: i0, type: ColumnsBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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' }}</h5>
+        <p class="text-gray-600 text-sm">{{ props.description || 'Select and configure columns to display' }}</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
+        </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
+        </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
+        </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 the handle to reorder columns
+      </div>
+
+      <!-- Columns List -->
+      <div class="space-y-3">
+        <div *ngIf="columns.length === 0" 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</p>
+        </div>
+
+        <div *ngFor="let column of columns; let i = index"
+             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">
+              <input
+                *ngIf="isColumnVisible(column.key)"
+                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"
+                  [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
+              </span>
+            </div>
+          </div>
+
+          <!-- Aggregate Info -->
+          <div *ngIf="hasAggregateFunction(column.key) && isColumnVisible(column.key)"
+               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">
+                Will calculate <strong>{{ getAggregateLabel(getAggregateFunctionValue(column.key)) }}</strong>
+                for this column in grouped data
+              </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">
+          {{ visibleColumnsCount }} of {{ columns.length }} columns visible
+        </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
+          </span>
+          <span class="inline-flex items-center gap-1 text-blue-600">
+            <i class="pi pi-calculator"></i>
+            {{ aggregatedColumnsCount }} aggregated
+          </span>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$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: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListboxModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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' }}</h5>
+        <p class="text-gray-600 text-sm">{{ props.description || 'Select and configure columns to display' }}</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
+        </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
+        </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
+        </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 the handle to reorder columns
+      </div>
+
+      <!-- Columns List -->
+      <div class="space-y-3">
+        <div *ngIf="columns.length === 0" 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</p>
+        </div>
+
+        <div *ngFor="let column of columns; let i = index"
+             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">
+              <input
+                *ngIf="isColumnVisible(column.key)"
+                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"
+                  [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
+              </span>
+            </div>
+          </div>
+
+          <!-- Aggregate Info -->
+          <div *ngIf="hasAggregateFunction(column.key) && isColumnVisible(column.key)"
+               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">
+                Will calculate <strong>{{ getAggregateLabel(getAggregateFunctionValue(column.key)) }}</strong>
+                for this column in grouped data
+              </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">
+          {{ visibleColumnsCount }} of {{ columns.length }} columns visible
+        </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
+          </span>
+          <span class="inline-flex items-center gap-1 text-blue-600">
+            <i class="pi pi-calculator"></i>
+            {{ aggregatedColumnsCount }} aggregated
+          </span>
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
+                        FormlyForm,
+                        TooltipModule,
+                        MenuModule,
+                        TranslateModule,
+                        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: "20.1.8", ngImport: i0, type: GroupBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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' }}</h5>
+        <p class="text-gray-600 text-sm">{{ props.description || 'Group data by fields to create hierarchical views' }}</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</span>
+          <button
+            type="button"
+            *ngIf="canAddMoreGroups()"
+            (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
+          </button>
+        </div>
+
+        <!-- Drag Info -->
+        <div *ngIf="groups.length > 1" 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 the handle to reorder group levels
+        </div>
+
+        <!-- Empty State -->
+        <div *ngIf="groups.length === 0" 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 defined</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
+          </button>
+        </div>
+
+        <!-- Groups List with Drag & Drop -->
+        <div class="space-y-3">
+          <div *ngFor="let group of groups.controls; let i = index"
+               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 -->
+              <div *ngIf="groups.length > 1"
+                   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 {{ 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'"
+                    >
+                      <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</label>
+                    <p-select
+                      [options]="availableFields"
+                      optionLabel="label"
+                      optionValue="key"
+                      [formControl]="getGroupControl(i, 'field')"
+                      placeholder="Select field"
+                      [showClear]="true"
+                      (onChange)="onFieldChange(i, $event.value)"
+                      styleClass="w-full"
+                    >
+                      <ng-template pTemplate="selectedItem">
+                        <span *ngIf="getGroupControl(i, 'field').value" class="text-gray-900">
+                          {{ getFieldLabel(getGroupControl(i, 'field').value) }}
+                        </span>
+                        <span *ngIf="!getGroupControl(i, 'field').value" class="text-gray-500">Select field</span>
+                      </ng-template>
+                    </p-select>
+                  </div>
+
+                  <!-- Display Name -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Display Name</label>
+                    <input
+                      type="text"
+                      pInputText
+                      [formControl]="getGroupControl(i, 'displayName')"
+                      placeholder="Display name (optional)"
+                      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 for this group level
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Grouping Tips -->
+      <div *ngIf="groups.length > 0" 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">
+              Data will be grouped hierarchically in the specified order.
+              {{ groups.length }} level{{ groups.length > 1 ? 's' : '' }} defined.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$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: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ListboxModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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' }}</h5>
+        <p class="text-gray-600 text-sm">{{ props.description || 'Group data by fields to create hierarchical views' }}</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</span>
+          <button
+            type="button"
+            *ngIf="canAddMoreGroups()"
+            (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
+          </button>
+        </div>
+
+        <!-- Drag Info -->
+        <div *ngIf="groups.length > 1" 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 the handle to reorder group levels
+        </div>
+
+        <!-- Empty State -->
+        <div *ngIf="groups.length === 0" 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 defined</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
+          </button>
+        </div>
+
+        <!-- Groups List with Drag & Drop -->
+        <div class="space-y-3">
+          <div *ngFor="let group of groups.controls; let i = index"
+               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 -->
+              <div *ngIf="groups.length > 1"
+                   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 {{ 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'"
+                    >
+                      <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</label>
+                    <p-select
+                      [options]="availableFields"
+                      optionLabel="label"
+                      optionValue="key"
+                      [formControl]="getGroupControl(i, 'field')"
+                      placeholder="Select field"
+                      [showClear]="true"
+                      (onChange)="onFieldChange(i, $event.value)"
+                      styleClass="w-full"
+                    >
+                      <ng-template pTemplate="selectedItem">
+                        <span *ngIf="getGroupControl(i, 'field').value" class="text-gray-900">
+                          {{ getFieldLabel(getGroupControl(i, 'field').value) }}
+                        </span>
+                        <span *ngIf="!getGroupControl(i, 'field').value" class="text-gray-500">Select field</span>
+                      </ng-template>
+                    </p-select>
+                  </div>
+
+                  <!-- Display Name -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Display Name</label>
+                    <input
+                      type="text"
+                      pInputText
+                      [formControl]="getGroupControl(i, 'displayName')"
+                      placeholder="Display name (optional)"
+                      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 for this group level
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Grouping Tips -->
+      <div *ngIf="groups.length > 0" 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">
+              Data will be grouped hierarchically in the specified order.
+              {{ groups.length }} level{{ groups.length > 1 ? 's' : '' }} defined.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        InputTextModule,
+                        ButtonModule,
+                        DatePickerModule,
+                        CheckboxModule,
+                        RadioButtonModule,
+                        FormlyForm,
+                        TooltipModule,
+                        MenuModule,
+                        TranslateModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        PopoverModule,
+                        ListboxModule
+                    ]
+                }]
+        }] });
+
 // group-type.component.ts
 class GroupTypeComponent extends FieldType {
     collapsed = this.props.collapsedByDefault ?? false;
@@ -1557,6 +2735,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
 
 const formlyConfig = provideFormlyConfig({
     types: [
+        {
+            name: 'tab-type',
+            component: TabTypeComponent
+        },
         {
             name: 'query-builder',
             component: QueryBuilderComponent
@@ -1566,12 +2748,14 @@ const formlyConfig = provideFormlyConfig({
             component: SortBuilderComponent
         },
         {
-            name: 'group', component: GroupTypeComponent
+            name: 'group-builder',
+            component: GroupBuilderComponent
         },
         {
-            name: 'tab-type',
-            component: TabTypeComponent
+            name: 'columns-builder',
+            component: ColumnsBuilderComponent
         },
+        { name: 'group', component: GroupTypeComponent },
     ],
 });
 
@@ -1579,5 +2763,5 @@ const formlyConfig = provideFormlyConfig({
  * Generated bundle index. Do not edit.
  */
 
-export { GenericSearchAdvanced, GenericSearchAdvancedModule, GroupTypeComponent, QueryBuilderComponent, QueryBuilderService, SortBuilderComponent, TabTypeComponent, formlyConfig };
+export { ColumnsBuilderComponent, GenericSearchAdvanced, GenericSearchAdvancedModule, GroupBuilderComponent, GroupTypeComponent, QueryBuilderComponent, QueryBuilderService, SortBuilderComponent, TabTypeComponent, formlyConfig };
 //# sourceMappingURL=elite.framework-ng.ui.core-generic-search-advanced.mjs.map