import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/trax.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class GroupSelectComponent {
    cd;
    authService;
    onClick(event) {
        const target = event.target;
        if (!target.closest('.dropdown')) {
            this.showDropdown = false;
        }
    }
    items;
    searchField;
    multi;
    idField;
    selectedValues = [];
    disabled;
    label;
    selected = new EventEmitter();
    filteredValues = [];
    showDropdown;
    searchValue;
    instanceId;
    constructor(cd, authService) {
        this.cd = cd;
        this.authService = authService;
    }
    ngOnInit() {
        this.instanceId = crypto.randomUUID();
        this.authService.dropDownTrigger.subscribe((e) => {
            if (e !== this.instanceId) {
                this.showDropdown = false;
                this.cd.detectChanges();
            }
        });
    }
    ngOnChanges(changes) {
        if (changes['items'] && this.items?.length) {
            this.initializeItems();
        }
        if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {
            this.updateSelectedValues();
        }
    }
    initializeItems() {
        this.filteredValues = this.items.map((item) => ({ ...item }));
        this.updateSelectedValues();
    }
    updateSelectedValues() {
        this.selectedValues?.forEach((selectedItem) => {
            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
            if (item) {
                item.isSelected = true;
            }
        });
    }
    openDropdown(event) {
        this.authService.dropDownTrigger.next(this.instanceId);
        event.stopPropagation();
        this.showDropdown = !this.showDropdown;
    }
    onInput(event) {
        if (!event.target.value) {
            this.filteredValues = [...this.items];
        }
        else {
            const searchTerm = event.target.value.toLowerCase();
            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
        }
        this.updateSelectedValues();
        this.cd.detectChanges();
    }
    onSelect(event, item) {
        if (this.multi) {
            if (event.currentTarget.checked) {
                this.selectedValues.push(item);
            }
            else {
                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
            }
        }
        else {
            this.selectedValues = [{ ...item }];
            this.filteredValues.forEach((element) => {
                if (element[this.idField] !== item[this.idField]) {
                    element.isSelected = false;
                }
            });
            this.showDropdown = false;
        }
        const valuesToEmit = this.selectedValues.map((value) => {
            const selectedItem = { ...value };
            delete selectedItem.isSelected;
            return selectedItem;
        });
        this.cd.detectChanges();
        this.emitSelectedValues(valuesToEmit);
    }
    onSelectAll(event) {
        const selectAll = event.currentTarget.checked;
        this.filteredValues.forEach((item) => item.isSelected = selectAll);
        if (selectAll) {
            this.selectedValues = [...this.filteredValues];
        }
        else {
            this.selectedValues = [];
        }
        const valuesToEmit = this.selectedValues.map((value) => {
            const { isSelected, ...selectedItem } = value;
            return selectedItem;
        });
        this.cd.detectChanges();
        this.emitSelectedValues(valuesToEmit);
    }
    emitSelectedValues(values) {
        if (this.multi) {
            this.selected.emit(values);
        }
        else {
            this.selected.emit(values[0]);
        }
    }
    checkIfAllSelected() {
        return this.filteredValues.every((item) => item.isSelected);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TraxService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupSelectComponent, selector: "lib-group-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-group-select', template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TraxService }], propDecorators: { onClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }], items: [{
                type: Input
            }], searchField: [{
                type: Input
            }], multi: [{
                type: Input
            }], idField: [{
                type: Input
            }], selectedValues: [{
                type: Input
            }], disabled: [{
                type: Input
            }], label: [{
                type: Input
            }], selected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 