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

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

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class GenericAssetsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericAssetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: GenericAssetsModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericAssetsModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericAssetsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericAssetsModule };
+//# sourceMappingURL=elite.framework-ng.ui.core-generic-assets.mjs.map

package/fesm2022/elite.framework-ng.ui.core-generic-assets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elite.framework-ng.ui.core-generic-assets.mjs","sources":["../tmp-esm2022/generic-assets/lib/generic-assets-module.js","../tmp-esm2022/generic-assets/elite.framework-ng.ui.core-generic-assets.js"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport * as i0 from \"@angular/core\";\nexport class GenericAssetsModule {\n    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: GenericAssetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\n    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"20.1.8\", ngImport: i0, type: GenericAssetsModule, imports: [CommonModule] });\n    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: GenericAssetsModule, imports: [CommonModule] });\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: GenericAssetsModule, decorators: [{\n            type: NgModule,\n            args: [{\n                    imports: [CommonModule],\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJpYy1hc3NldHMtbW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZy51aS5jb3JlL2dlbmVyaWMtYXNzZXRzL3NyYy9saWIvZ2VuZXJpYy1hc3NldHMtbW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQUsvQyxNQUFNLE9BQU8sbUJBQW1CO3VHQUFuQixtQkFBbUI7d0dBQW5CLG1CQUFtQixZQUZwQixZQUFZO3dHQUVYLG1CQUFtQixZQUZwQixZQUFZOzsyRkFFWCxtQkFBbUI7a0JBSC9CLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgR2VuZXJpY0Fzc2V0c01vZHVsZSB7fVxuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxpdGUuZnJhbWV3b3JrLW5nLnVpLmNvcmUtZ2VuZXJpYy1hc3NldHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL25nLnVpLmNvcmUvZ2VuZXJpYy1hc3NldHMvc3JjL2VsaXRlLmZyYW1ld29yay1uZy51aS5jb3JlLWdlbmVyaWMtYXNzZXRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19"],"names":[],"mappings":";;;;AAGO,MAAM,mBAAmB,CAAC;AACjC,IAAI,OAAO,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC;AAC5K,IAAI,OAAO,IAAI,GAAG,EAAE,CAAC,mBAAmB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC;AACvJ,IAAI,OAAO,IAAI,GAAG,EAAE,CAAC,mBAAmB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC;AACvJ;AACA,EAAE,CAAC,wBAAwB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,CAAC;AAC7H,YAAY,IAAI,EAAE,QAAQ;AAC1B,YAAY,IAAI,EAAE,CAAC;AACnB,oBAAoB,OAAO,EAAE,CAAC,YAAY,CAAC;AAC3C,iBAAiB;AACjB,SAAS,CAAC,EAAE,CAAC;;ACbb;AACA;AACA;;;;"}

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

@@ -309,7 +309,8 @@ class QueryBuilderService {
         this.traverseFields(fields, (field) => {
             if (field.key &&
                 field.props &&
-                ((field.props['select'] && field.props['select'].hidden === false) || !field.props['select']) &&
+                // ((field.props['select'] && field.props['select'].hidden === false) || !field.props['select']) &&
+                ((field.props['report'] && field.props['report'].hidden === false) || !field.props['report']) &&
                 !field.props?.hidden) {
                 const isNumeric = ['number', 'currency'].includes(field.type);
                 const tableConfig = field.props['table'] ?? {};
@@ -1219,12 +1220,19 @@ class QueryBuilderComponent extends FieldType {
         const field = this.props['fields'].find((f) => f.key === fieldKey);
         return field?.type || 'input';
     }
-    getOperatorsForField(fieldKey) {
-        if (!fieldKey)
+    getOperatorsForField(field) {
+        if (!field)
             return [];
-        const field = this.props['fields'].find((f) => f.key === fieldKey);
+        let fieldKey;
+        if (typeof field === 'object' && field !== null) {
+            fieldKey = field['key'];
+        }
+        else {
+            fieldKey = field;
+        }
+        const field_ = this.props['fields'].find((f) => f.key === fieldKey);
         // Use operators from the field configuration
-        const operators = field?.operators || this.queryBuilderService['getOperatorsForType'](field?.type);
+        const operators = field_?.operators || this.queryBuilderService['getOperatorsForType'](field_?.type);
         return operators.map((op) => ({
             label: this.getOperatorLabel(op).label,
             icon: this.getOperatorLabel(op).icon,
@@ -1407,7 +1415,7 @@ class QueryBuilderComponent extends FieldType {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7$1.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: QueryBuilderComponent, isStandalone: true, selector: "formly-query-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"updateValue();opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SelectModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7$1.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
             type: Component,
@@ -1429,7 +1437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         InputGroupAddonModule,
                         PopoverModule,
                         ListboxModule
-                    ], template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"] }]
+                    ], template: "<div>\r\n\r\n  <!-- Groups Container with Connecting Lines -->\r\n  <div class=\"groups-container\" #groupsContainer>\r\n    <div *ngFor=\"let group of groups; let groupIndex = index\"\r\n         class=\"group-wrapper relative\"\r\n         #groupElement>\r\n\r\n     <!-- Vertical Connector Line from Previous Group -->\r\n<div *ngIf=\"groupIndex > 0\" class=\"vertical-connector\">\r\n  <div class=\"vertical-line\"></div>\r\n\r\n  <!-- Operator Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"group-logical-operator-box\"\r\n    [class.and]=\"group.groupLogicalOperator === 'and'\"\r\n    [class.or]=\"group.groupLogicalOperator === 'or'\"\r\n    (click)=\"opPopover.toggle($event)\">\r\n    <span class=\"operator-text\">\r\n      {{ getLogicalOperatorText(group.groupLogicalOperator || 'and') }}\r\n    </span>\r\n    <div class=\"connector-arrow\"></div>\r\n  </button>\r\n\r\n  <!-- Popover -->\r\n  <p-popover #opPopover appendTo=\"body\">\r\n    <div class=\"w-12rem\">\r\n      <p-listbox\r\n        [options]=\"logicalOperators\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [(ngModel)]=\"group.groupLogicalOperator\"\r\n        (onChange)=\" opPopover.toggle($event)\"\r\n        [style]=\"{ width: '100%' }\">\r\n      </p-listbox>\r\n    </div>\r\n  </p-popover>\r\n</div>\r\n\r\n      <div class=\"group-container mb-6 p-1 bg-white rounded-lg border-l-4 border-t-1 border-b-1 border-r-1  shadow-sm transition-all duration-300 relative\"\r\n           [class.border-blue-500]=\"group.logicalOperator === 'and'\"\r\n           [class.border-or-500]=\"group.logicalOperator === 'or'\"\r\n           [class.pulse]=\"groupIndex === 0\">\r\n\r\n        <!-- Rounded Button for \"\u0631\u0628\u0637 \u0627\u0644\u0634\u0631\u0648\u0637\" on left border -->\r\n<div\r\n  class=\"absolute -left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300\"\r\n\r\n>\r\n\r\n\r\n\r\n<!-- Logical Operator Popover Button -->\r\n<p-button\r\n  [severity]=\"group.logicalOperator === 'and' ? 'success' : 'info'\"\r\n  [styleClass]=\"group.logicalOperator === 'and'\r\n    ? 'p-button-icon-only p-button-rounded p-button-sm logical-and'\r\n    : 'p-button-icon-only p-button-rounded p-button-sm logical-or'\"\r\n  (click)=\"opPopover.toggle($event)\">\r\n  {{group.logicalOperator === 'and' ? ('and' | translate) : ('or' | translate)}}\r\n</p-button>\r\n\r\n<!-- Popover for Operator Selection -->\r\n<p-popover #opPopover appendTo=\"body\">\r\n  <div class=\"w-10rem\">\r\n    <p-listbox\r\n      [options]=\"[\r\n        { label: 'and' | translate, value: 'and' },\r\n        { label: 'or' | translate, value: 'or' }\r\n      ]\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(ngModel)]=\"group.logicalOperator\"\r\n      (onChange)=\"updateValue(); opPopover.toggle($event)\"\r\n      [style]=\"{ width: '100%' }\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        {{ item.label }}\r\n      </ng-template>\r\n    </p-listbox>\r\n  </div>\r\n</p-popover>\r\n\r\n</div>\r\n\r\n\r\n\r\n        <!-- Group Header -->\r\n        <div class=\"group-header-wrapper mb-4 pl-8\">\r\n          <div class=\"group-header flex justify-between items-center\">\r\n\r\n           <div class=\"flex gap-1\">\r\n  <button\r\n    pButton\r\n    icon=\"pi pi-plus\"\r\n    type=\"button\"\r\n    class=\"p-button-success p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"addCondition(groupIndex)\"\r\n    pTooltip=\"{{ 'ADD_CONDITION' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n  <button\r\n    *ngIf=\"groups.length > 1\"\r\n    pButton\r\n    icon=\"pi pi-times\"\r\n    type=\"button\"\r\n    class=\"p-button-danger p-button p-button-sm !p-1.5 rounded-md transition-colors\"\r\n    (click)=\"removeGroup(groupIndex)\"\r\n    pTooltip=\"{{ 'DELETE_GROUP' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n  </button>\r\n</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Conditions in this group -->\r\n        <div *ngFor=\"let condition of group.conditions; let conditionIndex = index\"\r\n             class=\"p-1 bg-gray-50  \">\r\n          <div class=\"grid grid-cols-1  gap-1 items-center\">\r\n            <!-- Field Selector -->\r\n            <div class=\"md:col-span-2\">\r\n            <div class=\"flex w-full rounded-md overflow-hidden border border-gray-300 bg-white shadow-sm\">\r\n  <!-- Field Selector Button -->\r\n  <div style=\"align-items: center;display: flex;    min-width: 130px;max-width: 130px;\" class=\"flex-shrink-0 \">\r\n    <button\r\n      type=\"button\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-between w-full px-3 py-2 text-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2  focus:z-10\"\r\n      (click)=\"overlay.toggle($event)\">\r\n      <span  style=\"\r\n    display: inline-block;\r\n    max-width: 100px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  \">{{ getFieldLabel(condition.field) || ('SELECT_FIELD' | translate) }}</span>\r\n      <i class=\"pi pi-chevron-down mr-2 ml-2 text-xs\"></i>\r\n    </button>\r\n\r\n    <!-- Overlay Content -->\r\n    <p-popover #overlay appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n        tabindex=\"0\"\r\n          [options]=\"props['fields']\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"key\"\r\n          [(ngModel)]=\"condition.field\"\r\n          (onChange)=\"onFieldChange(condition, groupIndex, conditionIndex); overlay.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n <!-- Operator Button -->\r\n  <div style=\"align-items: center;display: flex;\"  class=\"flex-shrink-0 border-l border-r border-gray-300\">\r\n    <button\r\n    type=\"button\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2  focus:z-10\"\r\n      style=\"height: -webkit-fill-available;\"\r\n      pTooltip=\"{{ getOperatorLabel(condition.operator).label }}\"\r\n      (click)=\"opPopover.toggle($event)\">\r\n      <i [class]=\"getOperatorLabel(condition.operator).icon\"></i>\r\n    </button>\r\n\r\n    <p-popover #opPopover appendTo=\"body\">\r\n      <div class=\"w-60\">\r\n        <p-listbox\r\n          [options]=\"condition.operatorsForField\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [(ngModel)]=\"condition.operator\"\r\n          (onChange)=\"updateValue();opPopover.toggle($event)\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-listbox>\r\n      </div>\r\n    </p-popover>\r\n  </div>\r\n  <!-- Form Field -->\r\n  <div style=\"background: #f9fafb\" class=\"flex-grow p-1\">\r\n    <formly-form\r\n      [form]=\"form\"\r\n      [fields]=\"[condition.valueFieldConfig]\"\r\n      [model]=\"model\">\r\n    </formly-form>\r\n  </div>\r\n\r\n\r\n\r\n  <!-- Delete Button -->\r\n  <div style=\"align-items: center;display: flex;\" class=\"flex-shrink-0\">\r\n    <button\r\n    style=\"height: -webkit-fill-available;\"\r\n      class=\"flex items-center justify-center w-full px-3 py-2 text-sm bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:z-10\"\r\n      type=\"button\"\r\n      (click)=\"removeCondition(groupIndex, conditionIndex)\"\r\n      pTooltip=\"\u062D\u0630\u0641 \u0627\u0644\u0634\u0631\u0637\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n            </div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Group Footer -->\r\n        <div class=\"group-footer flex justify-between items-center mt-3 pt-3 border-t border-gray-200 \">\r\n          <small class=\"text-gray-500\">\r\n            {{ group.conditions.length }} \u0634\u0631\u0637 \u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629\r\n          </small>\r\n          <small class=\"text-gray-500\">\r\n            <span *ngIf=\"groupIndex > 0\">\r\n              \u0645\u0631\u062A\u0628\u0637 \u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0628\u0640 <strong [class.text-blue-600]=\"group.groupLogicalOperator === 'and'\"\r\n                                          [class.text-amber-600]=\"group.groupLogicalOperator === 'or'\">\r\n                {{ group.groupLogicalOperator === 'and' ? '\u0648' : '\u0623\u0648' }}\r\n              </strong>\r\n            </span>\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n <!-- Actions -->\r\n<div class=\"flex flex-wrap gap-3 mt-6\">\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'GROUP' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addGroup();\">\r\n  </button>\r\n\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'CONDITION' | translate\"\r\n    class=\"p-button-outlined p-button-sm !bg-white !border !border-blue-500 !text-blue-600 hover:!bg-blue-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"addConditionToLastGroup()\">\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"groups.length > 0\"\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-trash\"\r\n    [label]=\"'CLEAR' | translate\"\r\n    class=\"p-button-danger p-button-outlined p-button-sm !bg-white !border !border-red-500 !text-red-600 hover:!bg-red-50 transition-colors flex items-center gap-2\"\r\n    (click)=\"clearAll()\">\r\n  </button>\r\n</div>\r\n\r\n<!-- Empty State -->\r\n<div *ngIf=\"groups.length === 0\" class=\"empty-state text-center p-6 border-2 border-dashed border-gray-300 rounded-xl bg-gray-50\">\r\n  <i class=\"pi pi-search text-4xl text-gray-400 mb-3\"></i>\r\n  <p class=\"text-gray-500 mb-4\">{{ 'NO_SEARCH_CONDITIONS' | translate }}</p>\r\n  <button\r\n    pButton\r\n    type=\"button\"\r\n    icon=\"pi pi-plus\"\r\n    [label]=\"'ADD_SEARCH_CONDITION' | translate\"\r\n    class=\"p-button-outlined !px-4 !py-2\"\r\n    (click)=\"addGroup()\">\r\n  </button>\r\n</div>\r\n</div>\r\n", styles: [".vertical-connector{position:relative;display:flex;justify-content:center;margin-bottom:1rem}.vertical-line{position:absolute;top:-1rem;height:1rem;width:2px;background-color:#d1d5db}.group-logical-operator-box{position:relative;padding:.25rem .75rem;border-radius:.375rem;font-weight:500;font-size:.75rem;z-index:10;transition:all .3s ease}.group-logical-operator-box.and{background-color:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.group-logical-operator-box.or{background-color:#fef3c7;color:#92400e;border:1px solid #fcd34d}.connector-arrow{position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}.group-logical-operator-box.and .connector-arrow{border-top:6px solid #93c5fd}.group-logical-operator-box.or .connector-arrow{border-top:6px solid #fcd34d}.border-blue-500{border-color:#93c5fd}.border-or-500{border-color:#fcd34d}.border-t-1{border-top-width:1px}.border-b-1{border-bottom-width:1px}.border-r-1{border-right-width:1px}.p-popover-content{padding:5px!important}\n"] }]
         }] });
 
 // tab-type.component.ts