@elite.framework/ng.ui.core 1.0.83 → 1.0.85

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

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 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 * as i4$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i4 from 'primeng/button';
@@ -32,7 +32,7 @@ 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 * as i3$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DatePickerModule } from 'primeng/datepicker';
 import { RadioButtonModule } from 'primeng/radiobutton';
@@ -305,21 +305,33 @@ class QueryBuilderService {
         return groupableFields;
     }
     extractSelectableFields(fields) {
-        const selectableFields = [];
+        const tempFields = [];
         this.traverseFields(fields, (field) => {
-            if (field.key && field.props && ((field.props['select'] && field.props['select'].hidden == false) || !field.props['select']) && !field.props?.hidden) {
+            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({
+                const tableConfig = field.props['table'] ?? {};
+                const mergedProps = { ...field.props, ...(tableConfig.props ?? {}) };
+                const order = tableConfig.order ??
+                    tableConfig.props?.order ??
+                    mergedProps['order'] ??
+                    Number.MAX_SAFE_INTEGER;
+                tempFields.push({
                     key: field.props['entityKey'] ? field.props['entityKey'] : field.key,
                     label: this.translate.instant(field.props.label || field.key),
                     dataType: this.getDataType(field.type),
-                    isNumeric: isNumeric,
+                    isNumeric,
                     defaultVisible: field.props['defaultVisible'] !== false,
-                    aggregatable: isNumeric && field.props['aggregatable'] !== false
+                    aggregatable: isNumeric && field.props['aggregatable'] !== false,
+                    order
                 });
             }
         });
-        return selectableFields;
+        return tempFields
+            .sort((a, b) => a.order - b.order)
+            .map(({ order, ...rest }) => rest); // remove order after sorting
     }
     traverseFields(fields, callback) {
         fields.forEach(field => {
@@ -604,11 +616,8 @@ class GenericSearchAdvanced {
     onSubmit() {
         // Use the new QueryBuilderService methods
         const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.fields);
-        // this.odataSearch.emit(odataParams);
         // Generate query string using the unified method
         const queryString = this.queryBuilder.toODataQueryString(odataParams);
-        // console.log('OData Query String:', queryString);
-        debugger;
         if (this.model?.pagination && this.model?.pagination?.top) {
             this.paginationChange.emit({
                 top: this.model?.pagination?.top,
@@ -626,18 +635,22 @@ class GenericSearchAdvanced {
     onReset() {
         this.model = {};
         this.form.reset();
-        this.paginationChange.emit({
+        // this.paginationChange.emit({
+        //   top:10,
+        //     // skip:,
+        // });
+        // this.search.emit(this.model);
+        const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.fields);
+        // this.odataSearch.emit(odataParams);
+        // Generate query string using the unified method
+        const queryString = this.queryBuilder.toODataQueryString(odataParams);
+        this.search.emit({
+            filter: this.model['filter'],
+            query: queryString,
+            // sorting:,
             top: 10,
             // skip:,
         });
-        this.search.emit(this.model);
-        // Emit empty QueryParameters using the proper structure
-        // this.odataSearch.emit({
-        //   filters: [],
-        //   orderBy: [],
-        //   groupBy: [],
-        //   expand: []
-        // });
     }
     // Toggle drawer visibility
     toggleDrawer() {
@@ -648,7 +661,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", 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" }] });
+    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: i4$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
             type: Component,
@@ -783,183 +796,161 @@ class SortBuilderComponent extends FieldType {
         return availableFields.length > 0 ? availableFields[0].key : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: SortBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: SortBuilderComponent, isStandalone: true, selector: "formly-sort-builder", usesInheritance: true, ngImport: i0, template: `
-    <div class="sort-builder p-3 border-round border-1 surface-border">
-      <div class="flex justify-content-between align-items-center mb-3">
-        <h4 class="mt-0 mb-0">{{ props.label }}</h4>
-        <small class="text-500">الأولوية من الأعلى إلى الأسفل</small>
-      </div>
-
-      <!-- Sort List -->
-      <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
-        <div
-          *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
-          class="sort-row p-2 border-round surface-card"
-          pDraggable
-          pDroppable
-          (onDragStart)="onDragStart(i)"
-          (onDrop)="onDrop($event, i)"
-          [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
-
-          <div class="grid grid-cols-4 align-items-center gap-2">
-            <!-- Drag Handle -->
-
-
-            <!-- Field Selector -->
-            <div class="col-span-2 flex">
-               <button
-                pButton
-                icon="pi pi-bars"
-                type="button"
-                class="p-button-text p-button-plain cursor-move"
-                pTooltip="اسحب لتغيير الأولوية"
-                tooltipPosition="top">
-              </button>
-              <p-select
-                [options]="getAvailableFields(sort.field)"
-                optionLabel="label"
-                optionValue="key"
-                [(ngModel)]="sort.field"
-                (onChange)="updateValue()"
-                placeholder="اختر الحقل للترتيب"
-                [showClear]="true"
-                appendTo="body"
-                styleClass="w-full">
-              </p-select>
-            </div>
-
-
-            <!-- Direction Icon -->
-            <div class="col-fixed">
-              <p-select
-                [options]="directionOptions"
-                [(ngModel)]="sort.direction"
-                (onChange)="updateValue()"
-                placeholder="الاتجاه"
-                appendTo="body"
-                styleClass="w-full">
-              </p-select>
-            </div>
-
-            <!-- Actions -->
-            <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
-
-<!--
-               <button
-               outlined
-                pButton
-                [icon]="getDirectionIcon(sort.direction)"
-                type="button"
-                [ngClass]="'p-button-text p-button-sm' + getDirectionColor(sort.direction)"
-                pTooltip="{{ sort.direction === 'asc' ? 'تصاعدي' : 'تنازلي' }}"
-                tooltipPosition="top">
-              </button> -->
-              <!-- Move Up -->
-              <button
-              outlined
-                style="    width: var(--p-button-icon-only-width);"
-                *ngIf="!isFirst"
-                pButton
-                icon="pi pi-arrow-up"
-                type="button"
-                class=" p-button-sm p-button-success"
-                (click)="moveSort(i, i - 1)"
-                pTooltip="تحريك للأعلى"
-                tooltipPosition="top">
-              </button>
-
-              <!-- Move Down -->
-              <button
-              outlined
-                   style="    width: var(--p-button-icon-only-width);"
-                *ngIf="!isLast"
-                pButton
-                icon="pi pi-arrow-down"
-                type="button"
-                class=" p-button-sm p-button-success"
-                (click)="moveSort(i, i + 1)"
-                pTooltip="تحريك للأسفل"
-                tooltipPosition="top">
-              </button>
-
-              <!-- Remove -->
-              <button
-               style="    width: var(--p-button-icon-only-width);"
-                pButton
-                icon="pi pi-times"
-                type="button"
-                class=" p-button-sm p-button-danger"
-                (click)="removeSort(i)"
-                pTooltip="حذف الترتيب"
-                tooltipPosition="top">
-              </button>
-            </div>
-          </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: SortBuilderComponent, isStandalone: true, selector: "formly-sort-builder", usesInheritance: true, ngImport: i0, template: `<div class="sort-builder p-3 border-round border-1 surface-border">
+   <div class="mb-6">
+    <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+  </div>
+
+  <!-- Sort List -->
+  <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
+    <div
+      *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
+      class="sort-row p-2 border-round surface-card"
+      pDraggable
+      pDroppable
+      (onDragStart)="onDragStart(i)"
+      (onDrop)="onDrop($event, i)"
+      [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
+
+      <div class="grid grid-cols-4 align-items-center gap-2">
+        <!-- Drag Handle -->
+        <div class="col-span-2 flex">
+          <button
+            pButton
+            icon="pi pi-bars"
+            type="button"
+            class="p-button-text p-button-plain cursor-move"
+            [pTooltip]="'DRAG_TOOLTIP' | translate"
+            tooltipPosition="top">
+          </button>
+          <p-select
+            [options]="getAvailableFields(sort.field)"
+            optionLabel="label"
+            optionValue="key"
+            [(ngModel)]="sort.field"
+            (onChange)="updateValue()"
+            [placeholder]="'SELECT_FIELD_SORT' | translate"
+            [showClear]="true"
+            appendTo="body"
+            styleClass="w-full">
+          </p-select>
+        </div>
 
-          <!-- Field Info -->
-          <!-- <div *ngIf="sort.field" class="field-info mt-2 text-sm text-500">
-            <small>الحقل: {{ getFieldLabel(sort.field) }}</small>
-          </div> -->
+        <!-- Direction Selector -->
+        <div class="col-fixed">
+          <p-select
+            [options]="directionOptions"
+            [(ngModel)]="sort.direction"
+            (onChange)="updateValue()"
+            [placeholder]="'DIRECTION' | translate"
+            appendTo="body"
+            styleClass="w-full">
+          </p-select>
         </div>
-      </div>
 
-      <!-- Empty State -->
-      <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
-        <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
-        <p class="text-500 mb-3">لا توجد قواعد ترتيب محددة</p>
-        <p class="text-400 text-sm mb-3">سيتم استخدام الترتيب الافتراضي للبيانات</p>
-      </div>
+        <!-- Actions -->
+        <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+          <!-- Move Up -->
+          <button
+            outlined
+            style="width: var(--p-button-icon-only-width);"
+            *ngIf="!isFirst"
+            pButton
+            icon="pi pi-arrow-up"
+            type="button"
+            class="p-button-sm p-button-success"
+            (click)="moveSort(i, i - 1)"
+            [pTooltip]="'MOVE_UP' | translate"
+            tooltipPosition="top">
+          </button>
 
-      <!-- Actions -->
-      <div class="flex gap-2">
-        <button
-          pButton
-          icon="pi pi-sort-alt"
-          label="إضافة ترتيب"
-          type="button"
-          class="p-button-outlined flex-1"
-          (click)="addSort()">
-        </button>
-
-        <button
-          *ngIf="sorts.length > 1"
-          pButton
-          icon="pi pi-random"
-          label="عكس الترتيب"
-          type="button"
-          class="p-button-outlined"
-          (click)="reverseSorts()"
-          pTooltip="عكس اتجاه جميع قواعد الترتيب"
-          tooltipPosition="top">
-        </button>
-
-        <button
-          *ngIf="sorts.length > 0"
-          pButton
-          icon="pi pi-trash"
-          type="button"
-          class="p-button-outlined p-button-danger"
-          (click)="clearAll()"
-          pTooltip="مسح جميع قواعد الترتيب"
-          tooltipPosition="top">
-        </button>
-      </div>
+          <!-- Move Down -->
+          <button
+            outlined
+            style="width: var(--p-button-icon-only-width);"
+            *ngIf="!isLast"
+            pButton
+            icon="pi pi-arrow-down"
+            type="button"
+            class="p-button-sm p-button-success"
+            (click)="moveSort(i, i + 1)"
+            [pTooltip]="'MOVE_DOWN' | translate"
+            tooltipPosition="top">
+          </button>
 
-      <!-- Summary -->
-      <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
-        <h5 class="mt-0 mb-2 text-sm">ملخص الترتيب:</h5>
-        <div class="text-sm text-500">
-          <span *ngFor="let sort of sorts; let i = index" class="sort-step">
-            <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
-            <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
-              {{ sort.direction === 'asc' ? '▲' : '▼' }}
-            </span>
-            <span *ngIf="!isLast"> ثم </span>
-          </span>
+          <!-- Remove -->
+          <button
+            style="width: var(--p-button-icon-only-width);"
+            pButton
+            icon="pi pi-times"
+            type="button"
+            class="p-button-sm p-button-danger"
+            (click)="removeSort(i)"
+            [pTooltip]="'REMOVE_SORT' | translate"
+            tooltipPosition="top">
+          </button>
         </div>
       </div>
     </div>
-  `, 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"] }] });
+  </div>
+
+  <!-- Empty State -->
+  <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
+    <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+    <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
+    <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-2">
+    <button
+      pButton
+      icon="pi pi-sort-alt"
+      [label]="'ADD_SORT' | translate"
+      type="button"
+      class="p-button-outlined flex-1"
+      (click)="addSort()">
+    </button>
+
+    <button
+      *ngIf="sorts.length > 1"
+      pButton
+      icon="pi pi-random"
+      [label]="'REVERSE_ORDER' | translate"
+      type="button"
+      class="p-button-outlined"
+      (click)="reverseSorts()"
+      [pTooltip]="'REVERSE_TOOLTIP' | translate"
+      tooltipPosition="top">
+    </button>
+
+    <button
+      *ngIf="sorts.length > 0"
+      pButton
+      icon="pi pi-trash"
+      type="button"
+      class="p-button-outlined p-button-danger"
+      (click)="clearAll()"
+      [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+      tooltipPosition="top">
+    </button>
+  </div>
+
+  <!-- Summary -->
+  <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
+    <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+    <div class="text-sm text-500">
+      <span *ngFor="let sort of sorts; let i = index" class="sort-step">
+        <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+        <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+          {{ sort.direction === 'asc' ? '▲' : '▼' }}
+        </span>
+        <span *ngIf="!isLast"> {{ 'THEN' | translate }} </span>
+      </span>
+    </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: 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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: SortBuilderComponent, decorators: [{
             type: Component,
@@ -969,184 +960,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         SelectModule,
                         ButtonModule,
                         DragDropModule,
-                        TooltipModule
-                    ], template: `
-    <div class="sort-builder p-3 border-round border-1 surface-border">
-      <div class="flex justify-content-between align-items-center mb-3">
-        <h4 class="mt-0 mb-0">{{ props.label }}</h4>
-        <small class="text-500">الأولوية من الأعلى إلى الأسفل</small>
-      </div>
-
-      <!-- Sort List -->
-      <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
-        <div
-          *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
-          class="sort-row p-2 border-round surface-card"
-          pDraggable
-          pDroppable
-          (onDragStart)="onDragStart(i)"
-          (onDrop)="onDrop($event, i)"
-          [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
-
-          <div class="grid grid-cols-4 align-items-center gap-2">
-            <!-- Drag Handle -->
-
-
-            <!-- Field Selector -->
-            <div class="col-span-2 flex">
-               <button
-                pButton
-                icon="pi pi-bars"
-                type="button"
-                class="p-button-text p-button-plain cursor-move"
-                pTooltip="اسحب لتغيير الأولوية"
-                tooltipPosition="top">
-              </button>
-              <p-select
-                [options]="getAvailableFields(sort.field)"
-                optionLabel="label"
-                optionValue="key"
-                [(ngModel)]="sort.field"
-                (onChange)="updateValue()"
-                placeholder="اختر الحقل للترتيب"
-                [showClear]="true"
-                appendTo="body"
-                styleClass="w-full">
-              </p-select>
-            </div>
-
-
-            <!-- Direction Icon -->
-            <div class="col-fixed">
-              <p-select
-                [options]="directionOptions"
-                [(ngModel)]="sort.direction"
-                (onChange)="updateValue()"
-                placeholder="الاتجاه"
-                appendTo="body"
-                styleClass="w-full">
-              </p-select>
-            </div>
-
-            <!-- Actions -->
-            <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
-
-<!--
-               <button
-               outlined
-                pButton
-                [icon]="getDirectionIcon(sort.direction)"
-                type="button"
-                [ngClass]="'p-button-text p-button-sm' + getDirectionColor(sort.direction)"
-                pTooltip="{{ sort.direction === 'asc' ? 'تصاعدي' : 'تنازلي' }}"
-                tooltipPosition="top">
-              </button> -->
-              <!-- Move Up -->
-              <button
-              outlined
-                style="    width: var(--p-button-icon-only-width);"
-                *ngIf="!isFirst"
-                pButton
-                icon="pi pi-arrow-up"
-                type="button"
-                class=" p-button-sm p-button-success"
-                (click)="moveSort(i, i - 1)"
-                pTooltip="تحريك للأعلى"
-                tooltipPosition="top">
-              </button>
-
-              <!-- Move Down -->
-              <button
-              outlined
-                   style="    width: var(--p-button-icon-only-width);"
-                *ngIf="!isLast"
-                pButton
-                icon="pi pi-arrow-down"
-                type="button"
-                class=" p-button-sm p-button-success"
-                (click)="moveSort(i, i + 1)"
-                pTooltip="تحريك للأسفل"
-                tooltipPosition="top">
-              </button>
-
-              <!-- Remove -->
-              <button
-               style="    width: var(--p-button-icon-only-width);"
-                pButton
-                icon="pi pi-times"
-                type="button"
-                class=" p-button-sm p-button-danger"
-                (click)="removeSort(i)"
-                pTooltip="حذف الترتيب"
-                tooltipPosition="top">
-              </button>
-            </div>
-          </div>
+                        TooltipModule,
+                        TranslateModule
+                    ], template: `<div class="sort-builder p-3 border-round border-1 surface-border">
+   <div class="mb-6">
+    <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+  </div>
+
+  <!-- Sort List -->
+  <div *ngIf="sorts.length > 0" class="sort-list space-y-2 mb-3">
+    <div
+      *ngFor="let sort of sorts; let i = index; let isFirst = first; let isLast = last"
+      class="sort-row p-2 border-round surface-card"
+      pDraggable
+      pDroppable
+      (onDragStart)="onDragStart(i)"
+      (onDrop)="onDrop($event, i)"
+      [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
+
+      <div class="grid grid-cols-4 align-items-center gap-2">
+        <!-- Drag Handle -->
+        <div class="col-span-2 flex">
+          <button
+            pButton
+            icon="pi pi-bars"
+            type="button"
+            class="p-button-text p-button-plain cursor-move"
+            [pTooltip]="'DRAG_TOOLTIP' | translate"
+            tooltipPosition="top">
+          </button>
+          <p-select
+            [options]="getAvailableFields(sort.field)"
+            optionLabel="label"
+            optionValue="key"
+            [(ngModel)]="sort.field"
+            (onChange)="updateValue()"
+            [placeholder]="'SELECT_FIELD_SORT' | translate"
+            [showClear]="true"
+            appendTo="body"
+            styleClass="w-full">
+          </p-select>
+        </div>
 
-          <!-- Field Info -->
-          <!-- <div *ngIf="sort.field" class="field-info mt-2 text-sm text-500">
-            <small>الحقل: {{ getFieldLabel(sort.field) }}</small>
-          </div> -->
+        <!-- Direction Selector -->
+        <div class="col-fixed">
+          <p-select
+            [options]="directionOptions"
+            [(ngModel)]="sort.direction"
+            (onChange)="updateValue()"
+            [placeholder]="'DIRECTION' | translate"
+            appendTo="body"
+            styleClass="w-full">
+          </p-select>
         </div>
-      </div>
 
-      <!-- Empty State -->
-      <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
-        <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
-        <p class="text-500 mb-3">لا توجد قواعد ترتيب محددة</p>
-        <p class="text-400 text-sm mb-3">سيتم استخدام الترتيب الافتراضي للبيانات</p>
-      </div>
+        <!-- Actions -->
+        <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+          <!-- Move Up -->
+          <button
+            outlined
+            style="width: var(--p-button-icon-only-width);"
+            *ngIf="!isFirst"
+            pButton
+            icon="pi pi-arrow-up"
+            type="button"
+            class="p-button-sm p-button-success"
+            (click)="moveSort(i, i - 1)"
+            [pTooltip]="'MOVE_UP' | translate"
+            tooltipPosition="top">
+          </button>
 
-      <!-- Actions -->
-      <div class="flex gap-2">
-        <button
-          pButton
-          icon="pi pi-sort-alt"
-          label="إضافة ترتيب"
-          type="button"
-          class="p-button-outlined flex-1"
-          (click)="addSort()">
-        </button>
-
-        <button
-          *ngIf="sorts.length > 1"
-          pButton
-          icon="pi pi-random"
-          label="عكس الترتيب"
-          type="button"
-          class="p-button-outlined"
-          (click)="reverseSorts()"
-          pTooltip="عكس اتجاه جميع قواعد الترتيب"
-          tooltipPosition="top">
-        </button>
-
-        <button
-          *ngIf="sorts.length > 0"
-          pButton
-          icon="pi pi-trash"
-          type="button"
-          class="p-button-outlined p-button-danger"
-          (click)="clearAll()"
-          pTooltip="مسح جميع قواعد الترتيب"
-          tooltipPosition="top">
-        </button>
-      </div>
+          <!-- Move Down -->
+          <button
+            outlined
+            style="width: var(--p-button-icon-only-width);"
+            *ngIf="!isLast"
+            pButton
+            icon="pi pi-arrow-down"
+            type="button"
+            class="p-button-sm p-button-success"
+            (click)="moveSort(i, i + 1)"
+            [pTooltip]="'MOVE_DOWN' | translate"
+            tooltipPosition="top">
+          </button>
 
-      <!-- Summary -->
-      <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
-        <h5 class="mt-0 mb-2 text-sm">ملخص الترتيب:</h5>
-        <div class="text-sm text-500">
-          <span *ngFor="let sort of sorts; let i = index" class="sort-step">
-            <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
-            <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
-              {{ sort.direction === 'asc' ? '▲' : '▼' }}
-            </span>
-            <span *ngIf="!isLast"> ثم </span>
-          </span>
+          <!-- Remove -->
+          <button
+            style="width: var(--p-button-icon-only-width);"
+            pButton
+            icon="pi pi-times"
+            type="button"
+            class="p-button-sm p-button-danger"
+            (click)="removeSort(i)"
+            [pTooltip]="'REMOVE_SORT' | translate"
+            tooltipPosition="top">
+          </button>
         </div>
       </div>
     </div>
-  ` }]
+  </div>
+
+  <!-- Empty State -->
+  <div *ngIf="sorts.length === 0" class="empty-state text-center p-4 border-round surface-section">
+    <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+    <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
+    <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-2">
+    <button
+      pButton
+      icon="pi pi-sort-alt"
+      [label]="'ADD_SORT' | translate"
+      type="button"
+      class="p-button-outlined flex-1"
+      (click)="addSort()">
+    </button>
+
+    <button
+      *ngIf="sorts.length > 1"
+      pButton
+      icon="pi pi-random"
+      [label]="'REVERSE_ORDER' | translate"
+      type="button"
+      class="p-button-outlined"
+      (click)="reverseSorts()"
+      [pTooltip]="'REVERSE_TOOLTIP' | translate"
+      tooltipPosition="top">
+    </button>
+
+    <button
+      *ngIf="sorts.length > 0"
+      pButton
+      icon="pi pi-trash"
+      type="button"
+      class="p-button-outlined p-button-danger"
+      (click)="clearAll()"
+      [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+      tooltipPosition="top">
+    </button>
+  </div>
+
+  <!-- Summary -->
+  <div *ngIf="sorts.length > 0" class="sort-summary mt-3 p-2 border-round surface-ground">
+    <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+    <div class="text-sm text-500">
+      <span *ngFor="let sort of sorts; let i = index" class="sort-step">
+        <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+        <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+          {{ sort.direction === 'asc' ? '▲' : '▼' }}
+        </span>
+        <span *ngIf="!isLast"> {{ 'THEN' | translate }} </span>
+      </span>
+    </div>
+  </div>
+</div>` }]
         }] });
 
 // query-builder.component.ts
@@ -1437,7 +1407,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: 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" }] });
+    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: i4$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
             type: Component,
@@ -1543,7 +1513,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$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" }] });
+  `, 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: i4$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: TabTypeComponent, decorators: [{
             type: Component,
@@ -1801,311 +1771,309 @@ class ColumnsBuilderComponent extends FieldType {
     }
     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>
+  <!-- Header -->
+  <div class="mb-6">
+    <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('COLUMNS_MANAGEMENT' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{ props.description || ('COLUMNS_DESCRIPTION' | translate) }}</p>
+  </div>
+
+  <!-- Quick Actions -->
+  <div class="flex flex-wrap gap-2 mb-6">
+    <button
+      type="button"
+      (click)="toggleAll(true)"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-eye"></i>
+      {{ 'SHOW_ALL' | translate }}
+    </button>
+    <button
+      type="button"
+      (click)="toggleAll(false)"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-eye-slash"></i>
+      {{ 'HIDE_ALL' | translate }}
+    </button>
+    <button
+      type="button"
+      (click)="resetToDefault()"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-refresh"></i>
+      {{ 'RESET_TO_DEFAULT' | translate }}
+    </button>
+  </div>
+
+  <!-- Drag Info -->
+  <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+    <i class="pi pi-info-circle mr-2"></i>
+    {{ 'DRAG_COLUMNS_INFO' | translate }}
+  </div>
+
+  <!-- Columns List -->
+  <div class="space-y-3">
+    <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' | translate }}</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"
+    <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)"
-             (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>
+             (dragstart)="onDragStart($event, i)">
+          <i class="pi pi-bars"></i>
+        </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>
+        <!-- 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>
 
-            <!-- 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>
+        <!-- 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>
 
-            <!-- 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>
+        <!-- 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 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>
+        <!-- Aggregate Function -->
+        <!-- <div class="col-span-12 md:col-span-3">
+          <div *ngIf="column.aggregatable && isColumnVisible(column.key)">
+            <p-select
+              [options]="aggregateFunctions"
+              optionLabel="label"
+              optionValue="value"
+              [formControl]="getColumnControl(column.key, 'aggregateFunction')"
+              [placeholder]="'SELECT_AGGREGATE' | translate"
+              [showClear]="true"
+              styleClass="w-full"
+              (onChange)="onFormChange()"
+            >
+            </p-select>
           </div>
-        </div>
+          <span *ngIf="!column.aggregatable && isColumnVisible(column.key)" class="text-xs text-gray-500">
+            {{ 'NO_AGGREGATES_AVAILABLE' | translate }}
+          </span>
+        </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
+      <!-- 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">
+            {{ 'AGGREGATE_INFO' | translate:{function: getAggregateLabel(getAggregateFunctionValue(column.key))} }}
           </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 }] });
+  </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">
+      {{ 'COLUMNS_VISIBLE_COUNT' | translate:{visible: visibleColumnsCount, total: columns.length} }}
+    </span>
+    <!-- <div class="flex gap-4 text-sm">
+      <span class="inline-flex items-center gap-1 text-green-600">
+        <i class="pi pi-chart-line"></i>
+        {{ numericColumnsCount }} {{ 'NUMERIC' | translate }}
+      </span>
+      <span class="inline-flex items-center gap-1 text-blue-600">
+        <i class="pi pi-calculator"></i>
+        {{ aggregatedColumnsCount }} {{ 'AGGREGATED' | translate }}
+      </span>
+    </div> -->
+  </div>
+</div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: 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: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$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 }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
 }
 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>
+  <!-- Header -->
+  <div class="mb-6">
+    <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('COLUMNS_MANAGEMENT' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{ props.description || ('COLUMNS_DESCRIPTION' | translate) }}</p>
+  </div>
+
+  <!-- Quick Actions -->
+  <div class="flex flex-wrap gap-2 mb-6">
+    <button
+      type="button"
+      (click)="toggleAll(true)"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-eye"></i>
+      {{ 'SHOW_ALL' | translate }}
+    </button>
+    <button
+      type="button"
+      (click)="toggleAll(false)"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-eye-slash"></i>
+      {{ 'HIDE_ALL' | translate }}
+    </button>
+    <button
+      type="button"
+      (click)="resetToDefault()"
+      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+    >
+      <i class="pi pi-refresh"></i>
+      {{ 'RESET_TO_DEFAULT' | translate }}
+    </button>
+  </div>
+
+  <!-- Drag Info -->
+  <div class="mb-4 p-2 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+    <i class="pi pi-info-circle mr-2"></i>
+    {{ 'DRAG_COLUMNS_INFO' | translate }}
+  </div>
+
+  <!-- Columns List -->
+  <div class="space-y-3">
+    <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' | translate }}</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"
+    <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)"
-             (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>
+             (dragstart)="onDragStart($event, i)">
+          <i class="pi pi-bars"></i>
+        </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>
+        <!-- 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>
 
-            <!-- 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>
+        <!-- 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>
 
-            <!-- 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>
+        <!-- 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 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>
+        <!-- Aggregate Function -->
+        <!-- <div class="col-span-12 md:col-span-3">
+          <div *ngIf="column.aggregatable && isColumnVisible(column.key)">
+            <p-select
+              [options]="aggregateFunctions"
+              optionLabel="label"
+              optionValue="value"
+              [formControl]="getColumnControl(column.key, 'aggregateFunction')"
+              [placeholder]="'SELECT_AGGREGATE' | translate"
+              [showClear]="true"
+              styleClass="w-full"
+              (onChange)="onFormChange()"
+            >
+            </p-select>
           </div>
-        </div>
+          <span *ngIf="!column.aggregatable && isColumnVisible(column.key)" class="text-xs text-gray-500">
+            {{ 'NO_AGGREGATES_AVAILABLE' | translate }}
+          </span>
+        </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
+      <!-- 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">
+            {{ 'AGGREGATE_INFO' | translate:{function: getAggregateLabel(getAggregateFunctionValue(column.key))} }}
           </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">
+      {{ 'COLUMNS_VISIBLE_COUNT' | translate:{visible: visibleColumnsCount, total: columns.length} }}
+    </span>
+    <!-- <div class="flex gap-4 text-sm">
+      <span class="inline-flex items-center gap-1 text-green-600">
+        <i class="pi pi-chart-line"></i>
+        {{ numericColumnsCount }} {{ 'NUMERIC' | translate }}
+      </span>
+      <span class="inline-flex items-center gap-1 text-blue-600">
+        <i class="pi pi-calculator"></i>
+        {{ aggregatedColumnsCount }} {{ 'AGGREGATED' | translate }}
+      </span>
+    </div> -->
+  </div>
+</div>
   `,
                     imports: [
                         CommonModule,
@@ -2266,321 +2234,317 @@ class GroupBuilderComponent extends FieldType {
         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>
+    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' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{ props.description || ('GROUP_DESCRIPTION' | translate) }}</p>
+  </div>
+
+  <!-- Group Configuration -->
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <span class="font-medium text-gray-700">{{ 'GROUP_LEVELS' | translate }}</span>
+      <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' | translate }}
+      </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>
+    <!-- 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_INFO' | translate }}
+    </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>
+    <!-- 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' | translate }}</p>
+      <button
+        type="button"
+        (click)="addGroup()"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+      >
+        <i class="pi pi-plus"></i>
+        {{ 'ADD_FIRST_GROUP_LEVEL' | translate }}
+      </button>
+    </div>
 
-        <!-- Groups List with Drag & Drop -->
-        <div class="space-y-3">
-          <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"
+    <!-- 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)"
-               (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>
+               (dragstart)="onDragStart($event, i)">
+            <i class="pi pi-bars"></i>
+          </div>
+
+          <!-- Group Content -->
+          <div class="col-span-11">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <i class="pi pi-sort-alt text-gray-500"></i>
+                <span class="font-medium text-gray-700">{{ 'GROUP_LEVEL' | translate }} {{ i + 1 }}</span>
+              </div>
+              <div class="flex items-center gap-1">
+                <button
+                  type="button"
+                  (click)="removeGroup(i)"
+                  class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                  [pTooltip]="'REMOVE' | translate"
+                >
+                  <i class="pi pi-times"></i>
+                </button>
               </div>
+            </div>
 
-              <!-- 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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Field Selection -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'FIELD' | translate }}</label>
+                <p-select
+                  [options]="availableFields"
+                  optionLabel="label"
+                  optionValue="key"
+                  [formControl]="getGroupControl(i, 'field')"
+                  [placeholder]="'SELECT_FIELD' | translate"
+                  [showClear]="true"
+                  (onChange)="onFieldChange(i, $event.value)"
+                  styleClass="w-full"
+                >
+                  <ng-template pTemplate="selectedItem">
+                    <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' | translate }}</span>
+                  </ng-template>
+                </p-select>
+              </div>
+
+              <!-- Display Name -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'DISPLAY_NAME' | translate }}</label>
+                <input
+                  type="text"
+                  pInputText
+                  [formControl]="getGroupControl(i, 'displayName')"
+                  [placeholder]="'DISPLAY_NAME_PLACEHOLDER' | translate"
+                  class="w-full text-gray-900"
+                  (blur)="onFormChange()"
+                >
               </div>
             </div>
-          </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>
+            <!-- Show Total Toggle -->
+            <div class="flex items-center gap-2 mt-3">
+              <p-checkbox
+                [binary]="true"
+                [formControl]="getGroupControl(i, 'showTotal')"
+                [inputId]="'showTotal' + i"
+                styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                (onChange)="onFormChange()"
+              >
+              </p-checkbox>
+              <label [for]="'showTotal' + i" class="text-sm text-gray-700 cursor-pointer hover:text-gray-900">
+                {{ 'SHOW_TOTAL' | translate }}
+              </label>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  `, 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 }] });
+  </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">
+          {{ 'GROUPING_TIPS' | translate }}
+          {{ groups.length }} {{ 'LEVELS_DEFINED' | translate:{count: groups.length} }}
+        </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: i3$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 }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
 }
 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>
+                    template: `<div>
+  <!-- Header -->
+  <div class="mb-6">
+    <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('DATA_GROUPING' | translate) }}</h5>
+    <p class="text-gray-600 text-sm">{{ props.description || ('GROUP_DESCRIPTION' | translate) }}</p>
+  </div>
+
+  <!-- Group Configuration -->
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <span class="font-medium text-gray-700">{{ 'GROUP_LEVELS' | translate }}</span>
+      <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' | translate }}
+      </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>
+    <!-- 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_INFO' | translate }}
+    </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>
+    <!-- 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' | translate }}</p>
+      <button
+        type="button"
+        (click)="addGroup()"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+      >
+        <i class="pi pi-plus"></i>
+        {{ 'ADD_FIRST_GROUP_LEVEL' | translate }}
+      </button>
+    </div>
 
-        <!-- Groups List with Drag & Drop -->
-        <div class="space-y-3">
-          <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"
+    <!-- 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)"
-               (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>
+               (dragstart)="onDragStart($event, i)">
+            <i class="pi pi-bars"></i>
+          </div>
+
+          <!-- Group Content -->
+          <div class="col-span-11">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <i class="pi pi-sort-alt text-gray-500"></i>
+                <span class="font-medium text-gray-700">{{ 'GROUP_LEVEL' | translate }} {{ i + 1 }}</span>
+              </div>
+              <div class="flex items-center gap-1">
+                <button
+                  type="button"
+                  (click)="removeGroup(i)"
+                  class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                  [pTooltip]="'REMOVE' | translate"
+                >
+                  <i class="pi pi-times"></i>
+                </button>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- Field Selection -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'FIELD' | translate }}</label>
+                <p-select
+                  [options]="availableFields"
+                  optionLabel="label"
+                  optionValue="key"
+                  [formControl]="getGroupControl(i, 'field')"
+                  [placeholder]="'SELECT_FIELD' | translate"
+                  [showClear]="true"
+                  (onChange)="onFieldChange(i, $event.value)"
+                  styleClass="w-full"
+                >
+                  <ng-template pTemplate="selectedItem">
+                    <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' | translate }}</span>
+                  </ng-template>
+                </p-select>
               </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>
+              <!-- Display Name -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'DISPLAY_NAME' | translate }}</label>
+                <input
+                  type="text"
+                  pInputText
+                  [formControl]="getGroupControl(i, 'displayName')"
+                  [placeholder]="'DISPLAY_NAME_PLACEHOLDER' | translate"
+                  class="w-full text-gray-900"
+                  (blur)="onFormChange()"
+                >
               </div>
             </div>
-          </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>
+            <!-- Show Total Toggle -->
+            <div class="flex items-center gap-2 mt-3">
+              <p-checkbox
+                [binary]="true"
+                [formControl]="getGroupControl(i, 'showTotal')"
+                [inputId]="'showTotal' + i"
+                styleClass="[&>div]:border-gray-300 [&>div]:hover:border-gray-400"
+                (onChange)="onFormChange()"
+              >
+              </p-checkbox>
+              <label [for]="'showTotal' + i" class="text-sm text-gray-700 cursor-pointer hover:text-gray-900">
+                {{ 'SHOW_TOTAL' | translate }}
+              </label>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  `,
+  </div>
+
+  <!-- Grouping Tips -->
+  <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">
+          {{ 'GROUPING_TIPS' | translate }}
+          {{ groups.length }} {{ 'LEVELS_DEFINED' | translate:{count: groups.length} }}
+        </p>
+      </div>
+    </div>
+  </div>
+</div>`,
                     imports: [
                         CommonModule,
                         FormsModule,