import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
export class ListViewFilterComponent {
    fb;
    listViews = [];
    tableFilterArray = [];
    selectedView = '';
    displayedColumns = [];
    availableOperators = [
        { label: 'Equals (=)', value: '=' },
        { label: 'Not Equal (!=)', value: '!=' },
        { label: 'Greater Than (>)', value: '>' },
        { label: 'Less Than (<)', value: '<' },
        { label: 'Greater Than or Equal (>=)', value: '>=' },
        { label: 'Less Than or Equal (<=)', value: '<=' }
    ]; // 'contains', 'not contains', 'starts with', 'ends with'
    listViewEmit = new EventEmitter();
    isDropdownOpen = false;
    isModalOpen = false;
    isDeleteModalOpen = false;
    isAdding = false;
    viewToDelete = null;
    editingView;
    isColumnDropdownOpen = [];
    isOperatorDropdownOpen = [];
    isValueDropdownOpen = [];
    isColumnNameDropdownOpen = [];
    constructor(fb) {
        this.fb = fb;
        this.editingView = this.fb.group({
            filterName: ['', Validators.required],
            order: [0, [Validators.required, Validators.min(0)]],
            isDefault: [false],
            conditions: this.fb.array([]),
            columns: this.fb.array([])
        });
    }
    ngOnInit() {
        if (!this.selectedView && this.listViews?.length > 0) {
            this.selectedView = this.listViews[0].filterName;
        }
    }
    ngOnChanges(changes) {
        if (!this.selectedView && this.listViews?.length > 0) {
            this.selectedView = this.listViews[0].filterName;
        }
        console.log(this.tableFilterArray);
    }
    get conditions() {
        return this.editingView.get('conditions');
    }
    // SKS3MAY25 Returns the FormArray of columns from the editing form
    get columns() {
        return this.editingView.get('columns');
    }
    // SKS3MAY25 Adds a new filter condition to the form
    addFilter() {
        this.conditions.push(this.fb.group({
            field: ['', Validators.required],
            operator: ['', Validators.required],
            value: ['', Validators.required]
        }));
        this.isColumnDropdownOpen.push(false);
        this.isOperatorDropdownOpen.push(false);
        this.isValueDropdownOpen.push(false);
    }
    // SKS3MAY25 Removes a filter condition by index
    removeFilter(index) {
        this.conditions.removeAt(index);
        this.isColumnDropdownOpen.splice(index, 1);
        this.isOperatorDropdownOpen.splice(index, 1);
        this.isValueDropdownOpen.splice(index, 1);
    }
    addColumn() {
        this.columns.push(this.fb.group({
            name: ['', Validators.required],
            sortable: [false],
            filterable: [false]
        }));
        this.isColumnNameDropdownOpen.push(false);
    }
    removeColumn(index) {
        this.columns.removeAt(index);
        this.isColumnNameDropdownOpen.splice(index, 1);
    }
    toggleDropdown() {
        this.listViewEmit.emit({ "action": 'filterGet' });
        this.isDropdownOpen = !this.isDropdownOpen;
    }
    // SKS3MAY25 Handles selecting a list view from the dropdown
    selectListView(view) {
        this.selectedView = view.filterName;
        this.listViewEmit.emit({ 'action': 'select', 'data': view });
        this.isDropdownOpen = false;
    }
    // SKS3MAY25 Opens modal to edit an existing list view
    startEdit(view, event) {
        if (event)
            event.stopPropagation();
        this.isAdding = false;
        this.isModalOpen = true;
        this.editingView.reset();
        while (this.conditions.length)
            this.conditions.removeAt(0);
        while (this.columns.length)
            this.columns.removeAt(0);
        this.editingView.patchValue({
            filterName: view.filterName,
            order: view.order,
            isDefault: view.isDefault
        });
        view?.conditions?.forEach(filter => {
            this.conditions.push(this.fb.group({
                field: [filter.field, Validators.required],
                operator: [filter.operator, Validators.required],
                value: [filter.value, Validators.required]
            }));
        });
        view?.columns?.forEach(col => {
            this.displayedColumns.forEach(field => {
                if (col.name == field.fieldName) {
                    this.columns.push(this.fb.group({
                        name: [field.label, Validators.required],
                        sortable: [col.sortable],
                        filterable: [col.filterable]
                    }));
                }
            });
        });
    }
    // SKS3MAY25 Opens modal to create a new list view
    startAdd() {
        this.isAdding = true;
        this.isModalOpen = true;
        this.editingView.reset();
        while (this.conditions.length)
            this.conditions.removeAt(0);
        while (this.columns.length)
            this.columns.removeAt(0);
        this.editingView.patchValue({
            order: this.listViews?.length,
            isDefault: false
        });
        this.isDropdownOpen = false;
        // SKS26MAY25 Second loop: from displayedColumns, skip duplicates
        this.displayedColumns.forEach(field => {
            this.columns.push(this.fb.group({
                name: [field.label, Validators.required],
                sortable: [field.hyperLink],
                filterable: [field.filter]
            }));
        });
    }
    // SKS3MAY25 Saves the currently edited or added list view
    save() {
        if (this.editingView.valid) {
            const formValue = this.editingView.value;
            formValue?.columns?.forEach((col) => {
                this.displayedColumns.forEach((dCol) => {
                    if (dCol.label === col.name) {
                        col.name = dCol.fieldName;
                    }
                });
            });
            formValue?.conditions?.forEach((col) => {
                this.displayedColumns.forEach((dCol) => {
                    if (dCol.label === col.field) {
                        col.field = dCol.fieldName;
                    }
                });
            });
            const listView = {
                filterName: formValue.filterName,
                order: formValue.order,
                isDefault: formValue.isDefault,
                conditions: formValue.conditions,
                columns: formValue.columns
            };
            // if (listView.isDefault) {
            //   this.listViews.forEach(view => {
            //     if (view.id !== listView.id) view.isDefault = false;
            //   });
            // }
            // const existingIndex = this.listViews.findIndex(view => view.id === listView.id);
            // if (existingIndex >= 0) {
            //   this.listViews[existingIndex] = { ...listView };
            // } else {
            //   this.listViews.push(listView);
            // }
            this.listViews.sort((a, b) => a.order - b.order);
            this.selectedView = listView.filterName;
            this.listViewEmit.emit({ 'action': 'save', "data": listView });
            this.closeModal();
        }
    }
    closeModal() {
        this.isModalOpen = false;
    }
    // SKS3MAY25 Shows action buttons for a list view on hover
    showActions(view) {
        view.showActions = true;
    }
    // SKS3MAY25 Hides action buttons for all list views
    hideActions() {
        this.listViews.forEach(view => view.showActions = false);
    }
    // SKS3MAY25 Opens confirmation modal to delete a list view
    confirmDelete(view, event) {
        if (event)
            event.stopPropagation();
        this.viewToDelete = view;
        this.isDeleteModalOpen = true;
        this.isDropdownOpen = false;
    }
    // SKS3MAY25 Closes the delete confirmation modal
    closeDeleteModal() {
        this.isDeleteModalOpen = false;
        this.viewToDelete = null;
    }
    // SKS3MAY25 Deletes the selected list view after confirmation
    deleteConfirmed() {
        if (this.viewToDelete) {
            const index = this.listViews.findIndex(view => view.filterName === this.viewToDelete?.filterName);
            if (index >= 0) {
                // this.listViews.splice(index, 1);
                if (this.selectedView === this.viewToDelete.filterName) {
                    this.selectedView = this.listViews?.length > 0 ? this.listViews[0].filterName : '';
                    this.listViewEmit.emit({ 'action': 'select', 'data': this.selectedView });
                }
                this.listViewEmit.emit({ 'action': 'delete', "data": this.viewToDelete });
            }
            this.closeDeleteModal();
        }
    }
    // SKS3MAY25 Returns filtered list of columns based on input search term
    getFilteredColumns(term) {
        if (!term)
            return this.tableFilterArray;
        term = term.toLowerCase();
        return this.tableFilterArray.filter(col => col.label.toLowerCase().includes(term));
    }
    getColumnColumns(term) {
        console.log(term);
        if (!term)
            return this.displayedColumns;
        term = term.toLowerCase();
        return this.displayedColumns.filter(col => col.label.toLowerCase().includes(term));
    }
    // SKS3MAY25 Returns possible values for a selected field/column
    getPossibleValues(field, term) {
        const match = this.tableFilterArray.find(col => col.label === field);
        if (!match || !Array.isArray(match.value))
            return [];
        if (!term)
            return match.value;
        const lowerTerm = term.toLowerCase();
        return match.value.filter(val => typeof val === 'string' && val.toLowerCase().includes(lowerTerm));
    }
    // SKS3MAY25 Returns filtered list of operators based on input search term
    getFilteredOperators(term) {
        if (!term)
            return this.availableOperators;
        term = term.toLowerCase();
        return this.availableOperators.filter(operator => operator.label.toLowerCase().includes(term));
    }
    operatorInput = [];
    onOperatorInput(value, index) {
        this.operatorInput[index] = value;
    }
    getOperatorLabel(value) {
        const found = this.availableOperators.find(op => op.value === value);
        return found ? found.label : value;
    }
    // SKS3MAY25 Opens a dropdown on focus for the given input type and index
    onFocus(type, index) {
        if (type === 'field') {
            this.isColumnDropdownOpen[index] = true;
        }
        else if (type === 'operator') {
            this.isOperatorDropdownOpen[index] = true;
        }
        else if (type === 'value') {
            this.isValueDropdownOpen[index] = true;
        }
        else if (type === 'columnName') {
            this.isColumnNameDropdownOpen[index] = true;
        }
    }
    // SKS3MAY25 Delays closing dropdown to allow selection on blur
    onBlur(type, index) {
        setTimeout(() => {
            if (type === 'field') {
                this.isColumnDropdownOpen[index] = false;
            }
            else if (type === 'operator') {
                this.isOperatorDropdownOpen[index] = false;
            }
            else if (type === 'value') {
                this.isValueDropdownOpen[index] = false;
            }
            else if (type === 'columnName') {
                this.isColumnNameDropdownOpen[index] = false;
            }
        }, 200);
    }
    // SKS3MAY25 Sets selected value in the form control and closes the dropdown
    selectOption(type, index, value) {
        if (type === 'field') {
            this.conditions.at(index).get('field')?.setValue(value);
            this.isColumnDropdownOpen[index] = false;
        }
        else if (type === 'operator') {
            this.conditions.at(index).get('operator')?.setValue(value);
            this.isOperatorDropdownOpen[index] = false;
        }
        else if (type === 'value') {
            this.conditions.at(index).get('value')?.setValue(value);
            this.isValueDropdownOpen[index] = false;
        }
        else if (type === 'columnName') {
            this.columns.at(index).get('name')?.setValue(value);
            this.isColumnNameDropdownOpen[index] = false;
        }
    }
    getLabelByFieldName(fieldName) {
        console.log(fieldName);
        const match = this.displayedColumns.find(col => col.fieldName === fieldName);
        return match?.label ? match.label : fieldName;
    }
    onManualInput(inputValue, index) {
        const match = this.displayedColumns.find(col => col.label.toLowerCase() === inputValue.toLowerCase());
        if (match) {
            this.columns.at(index).get('name').setValue(match.label);
        }
    }
    // SKS3MAY25 Listens to document click and closes the dropdown if clicked outside
    onDocumentClick(event) {
        event.stopPropagation();
        const target = event.target;
        if (!target.closest('.list-view-filter')) {
            this.isDropdownOpen = false;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  placeholder=\"Enter or select operator\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Select field to display in table</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                placeholder=\"Enter or select column name\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  placeholder=\"Enter or select operator\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Select field to display in table</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                placeholder=\"Enter or select column name\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { listViews: [{
                type: Input
            }], tableFilterArray: [{
                type: Input
            }], selectedView: [{
                type: Input
            }], displayedColumns: [{
                type: Input
            }], availableOperators: [{
                type: Input
            }], listViewEmit: [{
                type: Output
            }], onDocumentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 