@es.framework/ng.ui.core 2.0.65 → 2.0.66

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

@@ -752,7 +752,7 @@ class GenericSearchAdvanced {
         this.drawerVisible = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvanced, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableSelect: "enableSelect", enableGroup: "enableGroup", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n", dependencies: [{ kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableSelect: "enableSelect", enableGroup: "enableGroup", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\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          @if (filterCount > 0) {\r\n            <p-badge\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          }\r\n        </div>\r\n      </p-inputgroup-addon>\r\n\r\n      @if (model['filter'] || filterCount > 0) {\r\n        <p-inputgroup-addon>\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      }\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: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
             type: Component,
@@ -770,7 +770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         InputGroupModule,
                         InputGroupAddonModule,
                         BadgeModule
-                    ], template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n" }]
+                    ], 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          @if (filterCount > 0) {\r\n            <p-badge\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          }\r\n        </div>\r\n      </p-inputgroup-addon>\r\n\r\n      @if (model['filter'] || filterCount > 0) {\r\n        <p-inputgroup-addon>\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      }\r\n    </p-inputgroup>\r\n\r\n\r\n  </div>\r\n\r\n  <!-- Drawer for Advanced Multi-field Search -->\r\n  @if(drawerVisible){\r\n    <p-drawer\r\n      [(visible)]=\"drawerVisible\"\r\n      position=\"right\"\r\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n      [modal]=\"true\"\r\n      [dismissible]=\"true\"\r\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n      >\r\n      <!-- Entire form wrapper -->\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\r\n        <!-- Scrollable Form -->\r\n        <div class=\"flex-1 overflow-auto\">\r\n          <formly-form\r\n            [form]=\"form\"\r\n            [fields]=\"fields_\"\r\n            [model]=\"model\"\r\n            [options]=\"options\"\r\n            >\r\n          </formly-form>\r\n        </div>\r\n\r\n      </form>\r\n      <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n          <button\r\n            type=\"submit\"\r\n            pButton size=\"small\"\r\n            (click)=\" onSubmit(); drawerVisible=false\"\r\n            label=\"{{ 'SEARCH' | translate }}\">\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            pButton\r\n            size=\"small\"\r\n            class=\"p-button-text\"\r\n            (click)=\"onReset(); drawerVisible=false\"\r\n            >\r\n            {{ 'CLEAR' | translate }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </p-drawer>\r\n\r\n  }\r\n" }]
         }], propDecorators: { search: [{
                 type: Output
             }], paginationChange: [{
@@ -886,170 +886,170 @@ class SortBuilderComponent extends FieldType {
         return availableFields.length > 0 ? availableFields[0].key : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SortBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SortBuilderComponent, isStandalone: true, selector: "formly-sort-builder", usesInheritance: true, ngImport: i0, template: `<div class="sort-builder p-3 border-round border-1 surface-border">
-     <div class="mb-6">
-       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
-       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
-     </div>
-   
-     <!-- Sort List -->
-     @if (sorts.length > 0) {
-       <div class="sort-list space-y-2 mb-3">
-         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
-           <div
-             class="sort-row p-2 border-round surface-card"
-             pDraggable
-             pDroppable
-             (onDragStart)="onDragStart(i)"
-             (onDrop)="onDrop($event, i)"
-             [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
-             <div class="grid grid-cols-4 align-items-center gap-2">
-               <!-- Drag Handle -->
-               <div class="col-span-2 flex">
-                 <button
-                   pButton
-                   icon="pi pi-bars"
-                   type="button"
-                   class="p-button-text p-button-plain cursor-move"
-                   [pTooltip]="'DRAG_TOOLTIP' | translate"
-                   tooltipPosition="top">
-                 </button>
-                 <p-select
-                   [options]="getAvailableFields(sort.field)"
-                   optionLabel="label"
-                   optionValue="key"
-                   [(ngModel)]="sort.field"
-                   (onChange)="updateValue()"
-                   [placeholder]="'SELECT_FIELD_SORT' | translate"
-                   [showClear]="true"
-                   appendTo="body"
-                   styleClass="w-full">
-                 </p-select>
-               </div>
-               <!-- Direction Selector -->
-               <div class="col-fixed">
-                 <p-select
-                   [options]="directionOptions"
-                   [(ngModel)]="sort.direction"
-                   (onChange)="updateValue()"
-                   [placeholder]="'DIRECTION' | translate"
-                   appendTo="body"
-                   styleClass="w-full">
-                 </p-select>
-               </div>
-               <!-- Actions -->
-               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
-                 <!-- Move Up -->
-                 @if (!isFirst) {
-                   <button
-                     outlined
-                     style="width: var(--p-button-icon-only-width);"
-                     pButton
-                     icon="pi pi-arrow-up"
-                     type="button"
-                     class="p-button-sm p-button-success"
-                     (click)="moveSort(i, i - 1)"
-                     [pTooltip]="'MOVE_UP' | translate"
-                     tooltipPosition="top">
-                   </button>
-                 }
-                 <!-- Move Down -->
-                 @if (!isLast) {
-                   <button
-                     outlined
-                     style="width: var(--p-button-icon-only-width);"
-                     pButton
-                     icon="pi pi-arrow-down"
-                     type="button"
-                     class="p-button-sm p-button-success"
-                     (click)="moveSort(i, i + 1)"
-                     [pTooltip]="'MOVE_DOWN' | translate"
-                     tooltipPosition="top">
-                   </button>
-                 }
-                 <!-- Remove -->
-                 <button
-                   style="width: var(--p-button-icon-only-width);"
-                   pButton
-                   icon="pi pi-times"
-                   type="button"
-                   class="p-button-sm p-button-danger"
-                   (click)="removeSort(i)"
-                   [pTooltip]="'REMOVE_SORT' | translate"
-                   tooltipPosition="top">
-                 </button>
-               </div>
-             </div>
-           </div>
-         }
-       </div>
-     }
-   
-     <!-- Empty State -->
-     @if (sorts.length === 0) {
-       <div class="empty-state text-center p-4 border-round surface-section">
-         <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
-         <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
-         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
-       </div>
-     }
-   
-     <!-- Actions -->
-     <div class="flex gap-2">
-       <button
-         pButton
-         icon="pi pi-sort-alt"
-         [label]="'ADD_SORT' | translate"
-         type="button"
-         class="p-button-outlined flex-1"
-         (click)="addSort()">
-       </button>
-   
-       @if (sorts.length > 1) {
-         <button
-           pButton
-           icon="pi pi-random"
-           [label]="'REVERSE_ORDER' | translate"
-           type="button"
-           class="p-button-outlined"
-           (click)="reverseSorts()"
-           [pTooltip]="'REVERSE_TOOLTIP' | translate"
-           tooltipPosition="top">
-         </button>
-       }
-   
-       @if (sorts.length > 0) {
-         <button
-           pButton
-           icon="pi pi-trash"
-           type="button"
-           class="p-button-outlined p-button-danger"
-           (click)="clearAll()"
-           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
-           tooltipPosition="top">
-         </button>
-       }
-     </div>
-   
-     <!-- Summary -->
-     @if (sorts.length > 0) {
-       <div class="sort-summary mt-3 p-2 border-round surface-ground">
-         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
-         <div class="text-sm text-500">
-           @for (sort of sorts; track sort; let i = $index) {
-             <span class="sort-step">
-               <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
-               <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
-                 {{ sort.direction === 'asc' ? '▲' : '▼' }}
-               </span>
-               @if (!isLast) {
-                 <span> {{ 'THEN' | translate }} </span>
-               }
-             </span>
-           }
-         </div>
-       </div>
-     }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SortBuilderComponent, isStandalone: true, selector: "formly-sort-builder", usesInheritance: true, ngImport: i0, template: `<div class="sort-builder p-3 border-round border-1 surface-border">
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+     </div>
+   
+     <!-- Sort List -->
+     @if (sorts.length > 0) {
+       <div class="sort-list space-y-2 mb-3">
+         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
+           <div
+             class="sort-row p-2 border-round surface-card"
+             pDraggable
+             pDroppable
+             (onDragStart)="onDragStart(i)"
+             (onDrop)="onDrop($event, i)"
+             [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
+             <div class="grid grid-cols-4 align-items-center gap-2">
+               <!-- Drag Handle -->
+               <div class="col-span-2 flex">
+                 <button
+                   pButton
+                   icon="pi pi-bars"
+                   type="button"
+                   class="p-button-text p-button-plain cursor-move"
+                   [pTooltip]="'DRAG_TOOLTIP' | translate"
+                   tooltipPosition="top">
+                 </button>
+                 <p-select
+                   [options]="getAvailableFields(sort.field)"
+                   optionLabel="label"
+                   optionValue="key"
+                   [(ngModel)]="sort.field"
+                   (onChange)="updateValue()"
+                   [placeholder]="'SELECT_FIELD_SORT' | translate"
+                   [showClear]="true"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Direction Selector -->
+               <div class="col-fixed">
+                 <p-select
+                   [options]="directionOptions"
+                   [(ngModel)]="sort.direction"
+                   (onChange)="updateValue()"
+                   [placeholder]="'DIRECTION' | translate"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Actions -->
+               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+                 <!-- Move Up -->
+                 @if (!isFirst) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-up"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i - 1)"
+                     [pTooltip]="'MOVE_UP' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Move Down -->
+                 @if (!isLast) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-down"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i + 1)"
+                     [pTooltip]="'MOVE_DOWN' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Remove -->
+                 <button
+                   style="width: var(--p-button-icon-only-width);"
+                   pButton
+                   icon="pi pi-times"
+                   type="button"
+                   class="p-button-sm p-button-danger"
+                   (click)="removeSort(i)"
+                   [pTooltip]="'REMOVE_SORT' | translate"
+                   tooltipPosition="top">
+                 </button>
+               </div>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   
+     <!-- Empty State -->
+     @if (sorts.length === 0) {
+       <div class="empty-state text-center p-4 border-round surface-section">
+         <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+         <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
+         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+       </div>
+     }
+   
+     <!-- Actions -->
+     <div class="flex gap-2">
+       <button
+         pButton
+         icon="pi pi-sort-alt"
+         [label]="'ADD_SORT' | translate"
+         type="button"
+         class="p-button-outlined flex-1"
+         (click)="addSort()">
+       </button>
+   
+       @if (sorts.length > 1) {
+         <button
+           pButton
+           icon="pi pi-random"
+           [label]="'REVERSE_ORDER' | translate"
+           type="button"
+           class="p-button-outlined"
+           (click)="reverseSorts()"
+           [pTooltip]="'REVERSE_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+   
+       @if (sorts.length > 0) {
+         <button
+           pButton
+           icon="pi pi-trash"
+           type="button"
+           class="p-button-outlined p-button-danger"
+           (click)="clearAll()"
+           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+     </div>
+   
+     <!-- Summary -->
+     @if (sorts.length > 0) {
+       <div class="sort-summary mt-3 p-2 border-round surface-ground">
+         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+         <div class="text-sm text-500">
+           @for (sort of sorts; track sort; let i = $index) {
+             <span class="sort-step">
+               <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+               <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+                 {{ sort.direction === 'asc' ? '▲' : '▼' }}
+               </span>
+               @if (!isLast) {
+                 <span> {{ 'THEN' | translate }} </span>
+               }
+             </span>
+           }
+         </div>
+       </div>
+     }
    </div>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i5$1.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SortBuilderComponent, decorators: [{
@@ -1062,170 +1062,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         DragDropModule,
                         TooltipModule,
                         TranslatePipe
-                    ], template: `<div class="sort-builder p-3 border-round border-1 surface-border">
-     <div class="mb-6">
-       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
-       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
-     </div>
-   
-     <!-- Sort List -->
-     @if (sorts.length > 0) {
-       <div class="sort-list space-y-2 mb-3">
-         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
-           <div
-             class="sort-row p-2 border-round surface-card"
-             pDraggable
-             pDroppable
-             (onDragStart)="onDragStart(i)"
-             (onDrop)="onDrop($event, i)"
-             [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
-             <div class="grid grid-cols-4 align-items-center gap-2">
-               <!-- Drag Handle -->
-               <div class="col-span-2 flex">
-                 <button
-                   pButton
-                   icon="pi pi-bars"
-                   type="button"
-                   class="p-button-text p-button-plain cursor-move"
-                   [pTooltip]="'DRAG_TOOLTIP' | translate"
-                   tooltipPosition="top">
-                 </button>
-                 <p-select
-                   [options]="getAvailableFields(sort.field)"
-                   optionLabel="label"
-                   optionValue="key"
-                   [(ngModel)]="sort.field"
-                   (onChange)="updateValue()"
-                   [placeholder]="'SELECT_FIELD_SORT' | translate"
-                   [showClear]="true"
-                   appendTo="body"
-                   styleClass="w-full">
-                 </p-select>
-               </div>
-               <!-- Direction Selector -->
-               <div class="col-fixed">
-                 <p-select
-                   [options]="directionOptions"
-                   [(ngModel)]="sort.direction"
-                   (onChange)="updateValue()"
-                   [placeholder]="'DIRECTION' | translate"
-                   appendTo="body"
-                   styleClass="w-full">
-                 </p-select>
-               </div>
-               <!-- Actions -->
-               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
-                 <!-- Move Up -->
-                 @if (!isFirst) {
-                   <button
-                     outlined
-                     style="width: var(--p-button-icon-only-width);"
-                     pButton
-                     icon="pi pi-arrow-up"
-                     type="button"
-                     class="p-button-sm p-button-success"
-                     (click)="moveSort(i, i - 1)"
-                     [pTooltip]="'MOVE_UP' | translate"
-                     tooltipPosition="top">
-                   </button>
-                 }
-                 <!-- Move Down -->
-                 @if (!isLast) {
-                   <button
-                     outlined
-                     style="width: var(--p-button-icon-only-width);"
-                     pButton
-                     icon="pi pi-arrow-down"
-                     type="button"
-                     class="p-button-sm p-button-success"
-                     (click)="moveSort(i, i + 1)"
-                     [pTooltip]="'MOVE_DOWN' | translate"
-                     tooltipPosition="top">
-                   </button>
-                 }
-                 <!-- Remove -->
-                 <button
-                   style="width: var(--p-button-icon-only-width);"
-                   pButton
-                   icon="pi pi-times"
-                   type="button"
-                   class="p-button-sm p-button-danger"
-                   (click)="removeSort(i)"
-                   [pTooltip]="'REMOVE_SORT' | translate"
-                   tooltipPosition="top">
-                 </button>
-               </div>
-             </div>
-           </div>
-         }
-       </div>
-     }
-   
-     <!-- Empty State -->
-     @if (sorts.length === 0) {
-       <div class="empty-state text-center p-4 border-round surface-section">
-         <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
-         <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
-         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
-       </div>
-     }
-   
-     <!-- Actions -->
-     <div class="flex gap-2">
-       <button
-         pButton
-         icon="pi pi-sort-alt"
-         [label]="'ADD_SORT' | translate"
-         type="button"
-         class="p-button-outlined flex-1"
-         (click)="addSort()">
-       </button>
-   
-       @if (sorts.length > 1) {
-         <button
-           pButton
-           icon="pi pi-random"
-           [label]="'REVERSE_ORDER' | translate"
-           type="button"
-           class="p-button-outlined"
-           (click)="reverseSorts()"
-           [pTooltip]="'REVERSE_TOOLTIP' | translate"
-           tooltipPosition="top">
-         </button>
-       }
-   
-       @if (sorts.length > 0) {
-         <button
-           pButton
-           icon="pi pi-trash"
-           type="button"
-           class="p-button-outlined p-button-danger"
-           (click)="clearAll()"
-           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
-           tooltipPosition="top">
-         </button>
-       }
-     </div>
-   
-     <!-- Summary -->
-     @if (sorts.length > 0) {
-       <div class="sort-summary mt-3 p-2 border-round surface-ground">
-         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
-         <div class="text-sm text-500">
-           @for (sort of sorts; track sort; let i = $index) {
-             <span class="sort-step">
-               <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
-               <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
-                 {{ sort.direction === 'asc' ? '▲' : '▼' }}
-               </span>
-               @if (!isLast) {
-                 <span> {{ 'THEN' | translate }} </span>
-               }
-             </span>
-           }
-         </div>
-       </div>
-     }
+                    ], template: `<div class="sort-builder p-3 border-round border-1 surface-border">
+     <div class="mb-6">
+       <h5 class="text-lg font-semibold text-gray-900 mb-2">{{ props.label || ('SORTING' | translate) }}</h5>
+       <p class="text-gray-600 text-sm">{{  ('PRIORITY_HINT' | translate) }}</p>
+     </div>
+   
+     <!-- Sort List -->
+     @if (sorts.length > 0) {
+       <div class="sort-list space-y-2 mb-3">
+         @for (sort of sorts; track sort; let i = $index; let isFirst = $first; let isLast = $last) {
+           <div
+             class="sort-row p-2 border-round surface-card"
+             pDraggable
+             pDroppable
+             (onDragStart)="onDragStart(i)"
+             (onDrop)="onDrop($event, i)"
+             [ngClass]="{'border-left-3 border-primary': isFirst, 'border-left-3 border-200': !isFirst}">
+             <div class="grid grid-cols-4 align-items-center gap-2">
+               <!-- Drag Handle -->
+               <div class="col-span-2 flex">
+                 <button
+                   pButton
+                   icon="pi pi-bars"
+                   type="button"
+                   class="p-button-text p-button-plain cursor-move"
+                   [pTooltip]="'DRAG_TOOLTIP' | translate"
+                   tooltipPosition="top">
+                 </button>
+                 <p-select
+                   [options]="getAvailableFields(sort.field)"
+                   optionLabel="label"
+                   optionValue="key"
+                   [(ngModel)]="sort.field"
+                   (onChange)="updateValue()"
+                   [placeholder]="'SELECT_FIELD_SORT' | translate"
+                   [showClear]="true"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Direction Selector -->
+               <div class="col-fixed">
+                 <p-select
+                   [options]="directionOptions"
+                   [(ngModel)]="sort.direction"
+                   (onChange)="updateValue()"
+                   [placeholder]="'DIRECTION' | translate"
+                   appendTo="body"
+                   styleClass="w-full">
+                 </p-select>
+               </div>
+               <!-- Actions -->
+               <div class="col-fixed flex gap-2" style="justify-content: flex-end;">
+                 <!-- Move Up -->
+                 @if (!isFirst) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-up"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i - 1)"
+                     [pTooltip]="'MOVE_UP' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Move Down -->
+                 @if (!isLast) {
+                   <button
+                     outlined
+                     style="width: var(--p-button-icon-only-width);"
+                     pButton
+                     icon="pi pi-arrow-down"
+                     type="button"
+                     class="p-button-sm p-button-success"
+                     (click)="moveSort(i, i + 1)"
+                     [pTooltip]="'MOVE_DOWN' | translate"
+                     tooltipPosition="top">
+                   </button>
+                 }
+                 <!-- Remove -->
+                 <button
+                   style="width: var(--p-button-icon-only-width);"
+                   pButton
+                   icon="pi pi-times"
+                   type="button"
+                   class="p-button-sm p-button-danger"
+                   (click)="removeSort(i)"
+                   [pTooltip]="'REMOVE_SORT' | translate"
+                   tooltipPosition="top">
+                 </button>
+               </div>
+             </div>
+           </div>
+         }
+       </div>
+     }
+   
+     <!-- Empty State -->
+     @if (sorts.length === 0) {
+       <div class="empty-state text-center p-4 border-round surface-section">
+         <i class="pi pi-sort-alt text-4xl text-500 mb-3"></i>
+         <p class="text-500 mb-3">{{ 'NO_SORT_RULES' | translate }}</p>
+         <p class="text-400 text-sm mb-3">{{ 'DEFAULT_ORDER' | translate }}</p>
+       </div>
+     }
+   
+     <!-- Actions -->
+     <div class="flex gap-2">
+       <button
+         pButton
+         icon="pi pi-sort-alt"
+         [label]="'ADD_SORT' | translate"
+         type="button"
+         class="p-button-outlined flex-1"
+         (click)="addSort()">
+       </button>
+   
+       @if (sorts.length > 1) {
+         <button
+           pButton
+           icon="pi pi-random"
+           [label]="'REVERSE_ORDER' | translate"
+           type="button"
+           class="p-button-outlined"
+           (click)="reverseSorts()"
+           [pTooltip]="'REVERSE_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+   
+       @if (sorts.length > 0) {
+         <button
+           pButton
+           icon="pi pi-trash"
+           type="button"
+           class="p-button-outlined p-button-danger"
+           (click)="clearAll()"
+           [pTooltip]="'CLEAR_ALL_TOOLTIP' | translate"
+           tooltipPosition="top">
+         </button>
+       }
+     </div>
+   
+     <!-- Summary -->
+     @if (sorts.length > 0) {
+       <div class="sort-summary mt-3 p-2 border-round surface-ground">
+         <h5 class="mt-0 mb-2 text-sm">{{ 'SORT_SUMMARY' | translate }}:</h5>
+         <div class="text-sm text-500">
+           @for (sort of sorts; track sort; let i = $index) {
+             <span class="sort-step">
+               <span class="font-semibold">{{ getFieldLabel(sort.field) }}</span>
+               <span class="direction-badge" [ngClass]="sort.direction === 'asc' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+                 {{ sort.direction === 'asc' ? '▲' : '▼' }}
+               </span>
+               @if (!isLast) {
+                 <span> {{ 'THEN' | translate }} </span>
+               }
+             </span>
+           }
+         </div>
+       </div>
+     }
    </div>` }]
         }] });
 
@@ -1656,124 +1656,124 @@ class TabTypeComponent extends FieldType {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TabTypeComponent, isStandalone: true, selector: "formly-tab-type", usesInheritance: true, ngImport: i0, template: `
-    <p-tabs
-      [value]="activeTabValue"
-      [scrollable]="props['scrollable'] !== false"
-      [lazy]="props['lazy'] !== false"
-      (valueChange)="onTabChange($event)">
-    
-      <p-tablist>
-        @for (tab of field.fieldGroup; track tab; let i = $index) {
-          <p-tab
-            [value]="i.toString()"
-            [disabled]="tab.props?.disabled">
-            @if(tab.props){
-              <div class="flex align-items-center gap-2">
-                <!-- Left Icon -->
-                @if (tab.props['leftIcon']) {
-                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
-                }
-                <!-- Label -->
-                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
-                <!-- Badge -->
-                @if (resolveBadge(tab) !== null) {
-                  <p-badge
-                    [value]="resolveBadge(tab)"
-                    size="small">
-                  </p-badge>
-                }
-                <!-- Right Icon -->
-                @if (tab.props['rightIcon']) {
-                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
-                }
-              </div>
-            }
-          </p-tab>
-        }
-      </p-tablist>
-    
-      <p-tabpanels style="padding: 0;">
-        @for (tab of field.fieldGroup; track tab; let i = $index) {
-          <p-tabpanel
-            [value]="i.toString()">
-            <div class="p-3">
-              <formly-field [field]="tab"></formly-field>
-              <!-- Empty state -->
-              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
-                <div
-                  class="empty-tab text-center p-4 text-500">
-                  <i class="pi pi-inbox text-2xl mb-2"></i>
-                  <p>لا توجد حقول في هذه التبويبة</p>
-                </div>
-              }
-            </div>
-          </p-tabpanel>
-        }
-      </p-tabpanels>
-    </p-tabs>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TabTypeComponent, isStandalone: true, selector: "formly-tab-type", usesInheritance: true, ngImport: i0, template: `
+    <p-tabs
+      [value]="activeTabValue"
+      [scrollable]="props['scrollable'] !== false"
+      [lazy]="props['lazy'] !== false"
+      (valueChange)="onTabChange($event)">
+    
+      <p-tablist>
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tab
+            [value]="i.toString()"
+            [disabled]="tab.props?.disabled">
+            @if(tab.props){
+              <div class="flex align-items-center gap-2">
+                <!-- Left Icon -->
+                @if (tab.props['leftIcon']) {
+                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
+                }
+                <!-- Label -->
+                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
+                <!-- Badge -->
+                @if (resolveBadge(tab) !== null) {
+                  <p-badge
+                    [value]="resolveBadge(tab)"
+                    size="small">
+                  </p-badge>
+                }
+                <!-- Right Icon -->
+                @if (tab.props['rightIcon']) {
+                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
+                }
+              </div>
+            }
+          </p-tab>
+        }
+      </p-tablist>
+    
+      <p-tabpanels style="padding: 0;">
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tabpanel
+            [value]="i.toString()">
+            <div class="p-3">
+              <formly-field [field]="tab"></formly-field>
+              <!-- Empty state -->
+              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
+                <div
+                  class="empty-tab text-center p-4 text-500">
+                  <i class="pi pi-inbox text-2xl mb-2"></i>
+                  <p>لا توجد حقول في هذه التبويبة</p>
+                </div>
+              }
+            </div>
+          </p-tabpanel>
+        }
+      </p-tabpanels>
+    </p-tabs>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$3.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$3.TabList, selector: "p-tablist" }, { kind: "component", type: i1$3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabTypeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-tab-type',
-                    template: `
-    <p-tabs
-      [value]="activeTabValue"
-      [scrollable]="props['scrollable'] !== false"
-      [lazy]="props['lazy'] !== false"
-      (valueChange)="onTabChange($event)">
-    
-      <p-tablist>
-        @for (tab of field.fieldGroup; track tab; let i = $index) {
-          <p-tab
-            [value]="i.toString()"
-            [disabled]="tab.props?.disabled">
-            @if(tab.props){
-              <div class="flex align-items-center gap-2">
-                <!-- Left Icon -->
-                @if (tab.props['leftIcon']) {
-                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
-                }
-                <!-- Label -->
-                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
-                <!-- Badge -->
-                @if (resolveBadge(tab) !== null) {
-                  <p-badge
-                    [value]="resolveBadge(tab)"
-                    size="small">
-                  </p-badge>
-                }
-                <!-- Right Icon -->
-                @if (tab.props['rightIcon']) {
-                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
-                }
-              </div>
-            }
-          </p-tab>
-        }
-      </p-tablist>
-    
-      <p-tabpanels style="padding: 0;">
-        @for (tab of field.fieldGroup; track tab; let i = $index) {
-          <p-tabpanel
-            [value]="i.toString()">
-            <div class="p-3">
-              <formly-field [field]="tab"></formly-field>
-              <!-- Empty state -->
-              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
-                <div
-                  class="empty-tab text-center p-4 text-500">
-                  <i class="pi pi-inbox text-2xl mb-2"></i>
-                  <p>لا توجد حقول في هذه التبويبة</p>
-                </div>
-              }
-            </div>
-          </p-tabpanel>
-        }
-      </p-tabpanels>
-    </p-tabs>
+                    template: `
+    <p-tabs
+      [value]="activeTabValue"
+      [scrollable]="props['scrollable'] !== false"
+      [lazy]="props['lazy'] !== false"
+      (valueChange)="onTabChange($event)">
+    
+      <p-tablist>
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tab
+            [value]="i.toString()"
+            [disabled]="tab.props?.disabled">
+            @if(tab.props){
+              <div class="flex align-items-center gap-2">
+                <!-- Left Icon -->
+                @if (tab.props['leftIcon']) {
+                  <i [class]="tab.props['leftIcon']" class="text-sm"></i>
+                }
+                <!-- Label -->
+                <span>{{ (tab.props['tabLabel'] ?? '') | translate }}</span>
+                <!-- Badge -->
+                @if (resolveBadge(tab) !== null) {
+                  <p-badge
+                    [value]="resolveBadge(tab)"
+                    size="small">
+                  </p-badge>
+                }
+                <!-- Right Icon -->
+                @if (tab.props['rightIcon']) {
+                  <i [class]="tab.props['rightIcon']" class="text-sm"></i>
+                }
+              </div>
+            }
+          </p-tab>
+        }
+      </p-tablist>
+    
+      <p-tabpanels style="padding: 0;">
+        @for (tab of field.fieldGroup; track tab; let i = $index) {
+          <p-tabpanel
+            [value]="i.toString()">
+            <div class="p-3">
+              <formly-field [field]="tab"></formly-field>
+              <!-- Empty state -->
+              @if (!tab.fieldGroup || tab.fieldGroup.length === 0) {
+                <div
+                  class="empty-tab text-center p-4 text-500">
+                  <i class="pi pi-inbox text-2xl mb-2"></i>
+                  <p>لا توجد حقول في هذه التبويبة</p>
+                </div>
+              }
+            </div>
+          </p-tabpanel>
+        }
+      </p-tabpanels>
+    </p-tabs>
     `,
                     standalone: true,
                     imports: [TabsModule, BadgeModule, FormlyField, TranslatePipe]