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

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\">\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericSearchAdvanced, isStandalone: true, selector: "lib-generic-search-advanced", inputs: { model: "model", fields: "fields", enableSelect: "enableSelect", enableGroup: "enableGroup", odataConfig: "odataConfig" }, outputs: { search: "search", paginationChange: "paginationChange", odataSearch: "odataSearch" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n", dependencies: [{ kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i7.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSearchAdvanced, decorators: [{
             type: Component,
@@ -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\">\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" }]
+                    ], template: "<div class=\"flex flex-wrap items-center gap-3 w-full\">\n  <!-- Search Input with Icon -->\n  <p-inputgroup class=\"w-full\">\n    <input\n      pInputText\n      type=\"text\"\n      [(ngModel)]=\"model['filter']\"\n      placeholder=\"{{ 'SEARCH' | translate }}\"\n      (keyup.enter)=\"onSubmit()\"\n      />\n\n\n      <p-inputgroup-addon>\n        <p-button\n          icon=\"pi pi-search\"\n          severity=\"secondary\"\n          (click)=\"onSubmit()\"\n        ></p-button>\n      </p-inputgroup-addon>\n      <p-inputgroup-addon>\n        <div class=\"relative inline-flex\">\n          <p-button\n            icon=\"pi pi-filter\"\n            severity=\"secondary\"\n            (onClick)=\"drawerVisible = true\">\n          </p-button>\n\n          @if (filterCount > 0) {\n            <p-badge\n              [value]=\"filterCount\"\n              severity=\"warn\"\n              size=\"small\"\n              class=\"absolute -top-0 -right-0\">\n            </p-badge>\n          }\n        </div>\n      </p-inputgroup-addon>\n\n      @if (model['filter'] || filterCount > 0) {\n        <p-inputgroup-addon>\n          <p-button\n            icon=\"pi pi-times\"\n            severity=\"danger\"\n            (click)=\"model['filter']=''; onReset()\"\n          ></p-button>\n        </p-inputgroup-addon>\n      }\n    </p-inputgroup>\n\n\n  </div>\n\n  <!-- Drawer for Advanced Multi-field Search -->\n  @if(drawerVisible){\n    <p-drawer\n      [(visible)]=\"drawerVisible\"\n      position=\"right\"\n      [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\n      [modal]=\"true\"\n      [dismissible]=\"true\"\n      styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\n      >\n      <!-- Entire form wrapper -->\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); drawerVisible=false\" class=\"flex flex-col flex-1\">\n        <!-- Scrollable Form -->\n        <div class=\"flex-1 overflow-auto\">\n          <formly-form\n            [form]=\"form\"\n            [fields]=\"fields_\"\n            [model]=\"model\"\n            [options]=\"options\"\n            >\n          </formly-form>\n        </div>\n\n      </form>\n      <!-- Action Buttons -->\n      <ng-template pTemplate=\"footer\">\n        <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\n          <button\n            type=\"submit\"\n            pButton size=\"small\"\n            (click)=\" onSubmit(); drawerVisible=false\"\n            label=\"{{ 'SEARCH' | translate }}\">\n          </button>\n          <button\n            type=\"button\"\n            pButton\n            size=\"small\"\n            class=\"p-button-text\"\n            (click)=\"onReset(); drawerVisible=false\"\n            >\n            {{ 'CLEAR' | translate }}\n          </button>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n  }\n" }]
         }], propDecorators: { search: [{
                 type: Output
             }], paginationChange: [{
@@ -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>` }]
         }] });
 
@@ -1239,16 +1239,25 @@ class QueryBuilderComponent extends FieldType {
         { label: this.translate.instant('and'), value: 'and' },
         { label: this.translate.instant('or'), value: 'or' }
     ];
-    showAppliedFilters = false;
+    get showDefaultConditions() {
+        return this.props['showDefaultConditions'] !== false;
+    }
     ngOnInit() {
         // Initialize with existing value or default group with conditions
-        if (this.formControl.value && (Array.isArray(this.formControl.value) && this.formControl.value.length > 0)) {
+        if (this.formControl.value && Array.isArray(this.formControl.value) && this.formControl.value.length > 0) {
             this.initializeAppliedConditionsWithFieldConfigs();
+            return;
+        }
+        if (this.showDefaultConditions) {
             this.initializeDefaultConditions();
         }
         else {
-            // Start with default conditions for important fields
-            this.initializeDefaultConditions();
+            this.groups = [{
+                    logicalOperator: 'and',
+                    groupLogicalOperator: 'and',
+                    conditions: []
+                }];
+            this.formControl.setValue([], { emitEvent: false });
         }
     }
     initializeAppliedConditionsWithFieldConfigs() {
@@ -1287,16 +1296,7 @@ class QueryBuilderComponent extends FieldType {
                     c.operator === dc.operator)))
             }];
         this.updateValue();
-    }
-    toggleAppliedFilters() {
-        if (this.showAppliedFilters == true) {
-            this.initializeAppliedConditionsWithFieldConfigs();
-            this.initializeDefaultConditions();
-        }
-        else {
-            this.initializeAppliedConditionsWithFieldConfigs();
-        }
-        this.showAppliedFilters = !this.showAppliedFilters;
+        // debugger
     }
     onAndClick(group, event) {
         group.logicalOperator = 'and';
@@ -1454,22 +1454,18 @@ class QueryBuilderComponent extends FieldType {
     //   this.updateValue();
     // }
     removeGroup(groupIndex) {
-        if (this.groups[groupIndex]) {
-            // Get all field keys for this group before deleting
-            const fieldKeysToRemove = [];
-            // Collect all condition field keys in this group
-            if (this.groups[groupIndex].conditions) {
-                for (let c = 0; c < this.groups[groupIndex].conditions.length; c++) {
-                    const fieldKey = this.getConditionValueKey(groupIndex, c);
-                    fieldKeysToRemove.push(fieldKey);
-                }
-            }
-            // Remove the group
-            this.groups.splice(groupIndex, 1);
-            // Remove all associated fields from model
-            this.removeMultipleFromModel(fieldKeysToRemove);
-            this.updateValue();
+        if (!this.groups[groupIndex]) {
+            return;
         }
+        this.groups.splice(groupIndex, 1);
+        if (this.groups.length === 0) {
+            this.groups.push({
+                logicalOperator: 'and',
+                groupLogicalOperator: 'and',
+                conditions: []
+            });
+        }
+        this.normalizeAfterStructureChange();
     }
     // Remove multiple fields from formly model
     removeMultipleFromModel(fieldKeys) {
@@ -1512,23 +1508,15 @@ class QueryBuilderComponent extends FieldType {
         }
     }
     removeCondition(groupIndex, conditionIndex) {
-        if (this.groups[groupIndex]) {
-            // Get the field key before deleting so we can remove from model
-            const fieldKey = this.getConditionValueKey(groupIndex, conditionIndex);
-            // Using delete operator (sets to undefined, then we filter)
-            delete this.groups[groupIndex].conditions[conditionIndex];
-            // Remove the undefined entries from conditions array
-            this.groups[groupIndex].conditions = this.groups[groupIndex].conditions.filter((condition) => condition !== undefined);
-            // Remove empty groups
-            if (this.groups[groupIndex].conditions.length === 0 && this.groups.length > 1) {
-                delete this.groups[groupIndex];
-                // Remove undefined groups from array
-                this.groups = this.groups.filter(group => group !== undefined);
-            }
-            // Remove from formly model
-            this.removeFromModel(fieldKey);
-            this.updateValue();
+        const group = this.groups[groupIndex];
+        if (!group) {
+            return;
+        }
+        group.conditions.splice(conditionIndex, 1);
+        if (group.conditions.length === 0 && this.groups.length > 1) {
+            this.groups.splice(groupIndex, 1);
         }
+        this.normalizeAfterStructureChange();
     }
     // Remove the field from formly model
     removeFromModel(fieldKey) {
@@ -1582,14 +1570,16 @@ class QueryBuilderComponent extends FieldType {
         this.cdr.detectChanges();
     }
     clearAll() {
-        this.groups = [];
-        // Completely reset the form and model
-        this.form.reset();
-        // Manually set model to empty object
-        Object.keys(this.model).forEach(key => {
-            delete this.model[key];
-        });
-        this.addGroup();
+        this.groups = [{
+                logicalOperator: 'and',
+                groupLogicalOperator: 'and',
+                conditions: []
+            }];
+        this.clearConditionValueKeysFromModel();
+        this.formControl.setValue([], { emitEvent: false });
+        this.formControl.markAsPristine();
+        this.formControl.markAsUntouched();
+        this.cdr.detectChanges();
     }
     // Helper methods
     getQueryStructure() {
@@ -1605,6 +1595,39 @@ class QueryBuilderComponent extends FieldType {
             this.updateValue();
         }
     }
+    // Helpers
+    isConditionValueKey(key) {
+        return /^condition_\d+_\d+_value$/.test(key);
+    }
+    clearConditionValueKeysFromModel() {
+        if (!this.model) {
+            return;
+        }
+        Object.keys(this.model)
+            .filter(key => this.isConditionValueKey(key))
+            .forEach(key => delete this.model[key]);
+    }
+    rebuildConditionFieldConfigs() {
+        for (let g = 0; g < this.groups.length; g++) {
+            const group = this.groups[g];
+            for (let c = 0; c < group.conditions.length; c++) {
+                const condition = group.conditions[c];
+                condition.operatorsForField = this.getOperatorsForField(condition.field);
+                condition.valueFieldConfig = condition.field
+                    ? this.generateValueFieldConfig(condition, g, c)
+                    : null;
+                const fieldKey = this.getConditionValueKey(g, c);
+                if (this.model) {
+                    this.model[fieldKey] = condition.value;
+                }
+            }
+        }
+    }
+    normalizeAfterStructureChange() {
+        this.clearConditionValueKeysFromModel();
+        this.rebuildConditionFieldConfigs();
+        this.updateValue();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\n\n  <!-- Groups Container with Connecting Lines -->\n  <div class=\"groups-container\" #groupsContainer>\n    @for (group of groups; track group; let groupIndex = $index) {\n      <div\n        class=\"group-wrapper relative\"\n        #groupElement>\n        <!-- Vertical Connector Line from Previous Group -->\n        @if (groupIndex > 0) {\n          <div class=\"vertical-connector\">\n            <div class=\"vertical-line\"></div>\n            <!-- Operator Button -->\n            <button\n              type=\"button\"\n              class=\"group-logical-operator-box\"\n              [class.and]=\"group.groupLogicalOperator === 'and'\"\n              [class.or]=\"group.groupLogicalOperator === 'or'\"\n              (click)=\"opPopover.toggle($event)\">\n              <span class=\"operator-text\">\n                {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\n              </span>\n              <div class=\"connector-arrow\"></div>\n            </button>\n            <!-- Popover -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-12rem\">\n                <p-listbox\n                  [options]=\"logicalOperators\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.groupLogicalOperator\"\n                  (onChange)=\" opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n        }\n        <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\n          [class.border-blue-500]=\"group.logicalOperator === 'and'\"\n          [class.border-or-500]=\"group.logicalOperator === 'or'\"\n          [class.pulse]=\"groupIndex === 0\">\n          <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\n          <div\n            class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\n            >\n            <!-- Logical Operator Popover Button -->\n            <p-button\n              [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n              (click)=\"opPopover.toggle($event)\">\n              {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\n            </p-button>\n            <!-- Popover for Operator Selection -->\n            <p-popover #opPopover appendTo=\"body\">\n              <div class=\"w-10rem\">\n                <p-listbox\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                  [(ngModel)]=\"group.logicalOperator\"\n                  (onChange)=\"updateValue(); opPopover.toggle($event)\"\n                  [style]=\"{ width: '100%' }\">\n                  <ng-template let-item pTemplate=\"item\">\n                    {{ item.label }}\n                  </ng-template>\n                </p-listbox>\n              </div>\n            </p-popover>\n          </div>\n          <!-- Group Header -->\n          <div class=\"group-header-wrapper mb-4 pl-8\">\n            <div class=\"group-header flex justify-between items-center\">\n              <div class=\"flex gap-1\">\n                <button\n                  pButton\n                  icon=\"pi pi-plus\"\n                  type=\"button\"\n                  class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                  (click)=\"addCondition(groupIndex)\"\n                  pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\n                  tooltipPosition=\"top\">\n                </button>\n                <!-- @if (filterCount > 0) {\n                <button\n                  pButton\n                  type=\"button\"\n                  icon=\"pi pi-filter\"\n                  class=\"p-button-outlined p-button-sm\"\n                  (click)=\"toggleAppliedFilters()\">\n                  {{ (showAppliedFilters ? 'SHOW_ALL' : 'SHOW_APPLIED') | translate }}\n                </button>\n                } -->\n                @if (groups.length > 1) {\n                  <button\n                    pButton\n                    icon=\"pi pi-times\"\n                    type=\"button\"\n                    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\n                    (click)=\"removeGroup(groupIndex)\"\n                    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\n                    tooltipPosition=\"top\">\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n          <!-- Conditions in this group -->\n          @for (condition of group.conditions; track condition; let conditionIndex = $index) {\n            <div\n              class=\"p-1 bg-gray-50  \">\n              <div class=\"grid grid-cols-1  gap-1 items-center\">\n                <!-- Field Selector -->\n                <div class=\"md:col-span-2\">\n                  <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\n                    <!-- Field Selector Button -->\n                    <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\n                      <button\n                        type=\"button\"\n                        style=\"height: -webkit-fill-available;\"\n                        class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\n                        (click)=\"overlay.toggle($event)\">\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n                        <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\n                      </button>\n                      <!-- Overlay Content -->\n                      <p-popover #overlay appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            tabindex=\"0\"\n                            [options]=\"props['fields']\"\n                            optionLabel=\"label\"\n                            optionValue=\"key\"\n                            [(ngModel)]=\"condition.field\"\n                            (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Operator Button -->\n                    <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\n                      <button\n                        type=\"button\"\n                        class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\n                        style=\"height: -webkit-fill-available;\"\n                        pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\n                        (click)=\"opPopover.toggle($event)\">\n                        <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\n                      </button>\n                      <p-popover #opPopover appendTo=\"body\">\n                        <div class=\"w-60\">\n                          <p-listbox\n                            [options]=\"condition.operatorsForField\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [(ngModel)]=\"condition.operator\"\n                            (onChange)=\"updateValue();opPopover.toggle($event)\"\n                            [style]=\"{ width: '100%' }\">\n                          </p-listbox>\n                        </div>\n                      </p-popover>\n                    </div>\n                    <!-- Form Field -->\n                    <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\n                      <formly-form\n                        [form]=\"form\"\n                        [fields]=\"[condition.valueFieldConfig]\"\n                        [model]=\"model\">\n                      </formly-form>\n                    </div>\n                    <!-- Delete Button -->\n                    <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\n                      <button\n                        style=\"height: -webkit-fill-available;\"\n                        class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\n                        type=\"button\"\n                        (click)=\"removeCondition(groupIndex, conditionIndex)\"\n                        pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\n                        tooltipPosition=\"top\">\n                        <i class=\"pi pi-times\"></i>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          <!-- Group Footer -->\n          <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\n            <small class=\"text-gray-500\">\n              {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\n            </small>\n            <small class=\"text-gray-500\">\n              @if (groupIndex > 0) {\n                <span>\n                  \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\n                  [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\n                  {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\n                </strong>\n              </span>\n            }\n          </small>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"flex flex-wrap gap-3 mt-6\">\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'GROUP' | translate\"\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\n    (click)=\"addGroup();\">\n  </button>\n\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-plus\"\n    [label]=\"'CONDITION' | translate\"\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\n    (click)=\"addConditionToLastGroup()\">\n  </button>\n\n  @if (groups.length > 0) {\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-trash\"\n      [label]=\"'CLEAR' | translate\"\n      class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\n      (click)=\"clearAll()\">\n    </button>\n  }\n</div>\n\n<!-- Empty State -->\n@if (groups.length === 0) {\n  <div class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\n    <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\n    <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\n    <button\n      pButton\n      type=\"button\"\n      icon=\"pi pi-plus\"\n      [label]=\"'ADD_SEARCH_CONDITION' | translate\"\n      class=\"p-button-outlined !px-4 !py-2\"\n      (click)=\"addGroup()\">\n    </button>\n  </div>\n}\n</div>\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i6$2.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
@@ -1656,124 +1679,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]