import * as i0 from '@angular/core';
import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';

class SdQueryBuilder {
    group = {
        condition: 'AND',
        rules: [
            { field: 'Employee ID', operator: 'Equal', value: '1' },
            { field: 'Title', operator: 'Equal', value: 'Sales Manager' },
            {
                condition: 'OR',
                rules: [
                    { field: 'Select Field', operator: '', value: '' }
                ]
            }
        ]
    };
    groupChange = new EventEmitter();
    isGroup(item) {
        return item.rules !== undefined;
    }
    toggleCondition(group, condition) {
        group.condition = condition;
    }
    // --- LOGIC DROPDOWN & Z-INDEX ---
    toggleDropdown(group, event) {
        event.stopPropagation();
        // Đóng tất cả các dropdown khác để tránh chồng chéo
        if (!group.isOpen) {
            this.closeAllDropdowns(this.group);
        }
        group.isOpen = !group.isOpen;
    }
    closeAll() {
        this.closeAllDropdowns(this.group);
    }
    closeAllDropdowns(group) {
        group.isOpen = false;
        group.rules.forEach(rule => {
            if (this.isGroup(rule))
                this.closeAllDropdowns(rule);
        });
    }
    // --------------------------------
    addRule(group) {
        group.rules.push({ field: '', operator: 'Equal', value: '' });
        group.isOpen = false;
    }
    addGroup(group) {
        group.rules.push({
            condition: 'OR',
            rules: [{ field: '', operator: '', value: '' }]
        });
        group.isOpen = false;
    }
    removeItem(parentGroup, index) {
        parentGroup.rules.splice(index, 1);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdQueryBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, host: { listeners: { "document:click": "closeAll()" } }, ngImport: i0, template: "<div class=\"qb-container\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\r\n  <div class=\"qb-group\">\r\n    \r\n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\r\n      <div class=\"qb-condition-switch\">\r\n        <button type=\"button\" \r\n                [class.active]=\"group.condition === 'AND'\" \r\n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\r\n        <button type=\"button\" \r\n                [class.active]=\"group.condition === 'OR'\" \r\n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\r\n      </div>\r\n\r\n      <div class=\"qb-actions\">\r\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\r\n        \r\n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\r\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\r\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\r\n        </div>\r\n\r\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"qb-body\">\r\n      <div class=\"qb-list\">\r\n        <div *ngFor=\"let item of group.rules; let i = index\" \r\n             class=\"qb-treenode\"\r\n             [class.is-group]=\"isGroup(item)\"\r\n             [class.is-rule]=\"!isGroup(item)\">\r\n          \r\n          <ng-container *ngIf=\"!isGroup(item)\">\r\n            <div class=\"qb-rule-card\">\r\n              <div class=\"form-row\">\r\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\r\n                <ng-container *ngIf=\"item.field\">\r\n                    <div class=\"divider\"></div>\r\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\r\n                        <option value=\"Equal\">Equal</option>\r\n                        <option value=\"Not Equal\">Not Equal</option>\r\n                    </select>\r\n                    <div class=\"divider\"></div>\r\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\r\n                </ng-container>\r\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isGroup(item)\">\r\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdQueryBuilder, decorators: [{
            type: Component,
            args: [{ selector: 'sd-query-builder', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"qb-container\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\r\n  <div class=\"qb-group\">\r\n    \r\n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\r\n      <div class=\"qb-condition-switch\">\r\n        <button type=\"button\" \r\n                [class.active]=\"group.condition === 'AND'\" \r\n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\r\n        <button type=\"button\" \r\n                [class.active]=\"group.condition === 'OR'\" \r\n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\r\n      </div>\r\n\r\n      <div class=\"qb-actions\">\r\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\r\n        \r\n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\r\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\r\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\r\n        </div>\r\n\r\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"qb-body\">\r\n      <div class=\"qb-list\">\r\n        <div *ngFor=\"let item of group.rules; let i = index\" \r\n             class=\"qb-treenode\"\r\n             [class.is-group]=\"isGroup(item)\"\r\n             [class.is-rule]=\"!isGroup(item)\">\r\n          \r\n          <ng-container *ngIf=\"!isGroup(item)\">\r\n            <div class=\"qb-rule-card\">\r\n              <div class=\"form-row\">\r\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\r\n                <ng-container *ngIf=\"item.field\">\r\n                    <div class=\"divider\"></div>\r\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\r\n                        <option value=\"Equal\">Equal</option>\r\n                        <option value=\"Not Equal\">Not Equal</option>\r\n                    </select>\r\n                    <div class=\"divider\"></div>\r\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\r\n                </ng-container>\r\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isGroup(item)\">\r\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"] }]
        }], propDecorators: { group: [{
                type: Input
            }], groupChange: [{
                type: Output
            }], closeAll: [{
                type: HostListener,
                args: ['document:click']
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SdQueryBuilder };
//# sourceMappingURL=sd-angular-core-components-query-builder.mjs.map
