import * as i2 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i5 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { pipe } from 'rxjs';
import { randomHash } from '@seniorsistemas/angular-components/utils';
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
import * as i4 from '@seniorsistemas/angular-components/button';
import { ButtonModule } from '@seniorsistemas/angular-components/button';

class PicklistComponent {
    cdr;
    itensToSelect = [];
    selectedItens = [];
    availableItensLabel;
    availableItensPlaceholder;
    addSelectedItensLabel;
    addAllItensLabel;
    selectedItensLabel;
    selectedItensPlaceholder;
    removeSelectedItemsLabel;
    removeAllItemsLabel;
    showCheckbox = false;
    filterBy = '';
    selectedItensChange = new EventEmitter();
    itensToSelectChange = new EventEmitter();
    availableItensFilter = '';
    selectedItensFilter = '';
    itemToSelectTemplate = null;
    itemSelectedTemplate = null;
    itensToSelectFilterUtil = {
        rawItensToSelect: [],
        filteredItensToSelect: [],
    };
    selectedItensFilterUtil = {
        rawSelectedItens: [],
        filteredSelectedItens: [],
    };
    selectedItensMap = new Set();
    itensToSelectId = randomHash('itensToSelect');
    selectedItensId = randomHash('selectedItens');
    _logErrorTemplate = true;
    templates = null;
    constructor(cdr) {
        this.cdr = cdr;
    }
    ngAfterViewInit() {
        this.itemToSelectTemplate = this.templates?.find((x) => x.type === 'item-to-select')?.template ?? null;
        this.itemSelectedTemplate = this.templates?.find((x) => x.type === 'selected-item')?.template ?? null;
        if (this._logErrorTemplate) {
            if (!this.itemToSelectTemplate) {
                console.error(`Missing template for 'item-to-select' add this template using sTemplate directive.`);
            }
            if (!this.itemSelectedTemplate) {
                console.error(`Missing template for 'selected-item' add this template using sTemplate directive.`);
            }
        }
        this.cdr.detectChanges();
    }
    ngOnChanges(changes) {
        if (changes['itensToSelect']?.firstChange) {
            this.itensToSelectFilterUtil = {
                rawItensToSelect: this.itensToSelect,
                filteredItensToSelect: this.itensToSelect,
            };
        }
        if (changes['selectedItens']?.firstChange) {
            this.selectedItensFilterUtil = {
                filteredSelectedItens: this.selectedItens,
                rawSelectedItens: this.selectedItens,
            };
        }
    }
    toggleSelected(internalPicklistItem, containerListId) {
        if (internalPicklistItem.disabled) {
            return;
        }
        this.unselectedItensByListId(this.getOppositiveId(containerListId));
        internalPicklistItem.selected = !internalPicklistItem.selected;
        if (internalPicklistItem.selected) {
            this.selectedItensMap.add(internalPicklistItem);
        }
        else {
            this.selectedItensMap.delete(internalPicklistItem);
        }
        this.cdr.detectChanges();
    }
    remove(all = false) {
        const itens = filterEnabled(all ? this.selectedItensFilterUtil.rawSelectedItens : this.selectedItensMap);
        if (!itens.length) {
            return;
        }
        itens.forEach((itemRemove) => {
            this.itensToSelect.push(itemRemove);
            itemRemove.selected = false;
            this.selectedItensMap.delete(itemRemove);
        });
        this.selectedItens = this.selectedItens.filter((x) => !itens.includes(x));
        this.selectedItensFilterUtil.rawSelectedItens = this.selectedItens;
        this.filterSelectedItens();
        this.filterItensToSelect();
        this.emitData();
        this.cdr.detectChanges();
    }
    add(all = false) {
        const itens = filterEnabled(all ? this.itensToSelectFilterUtil.rawItensToSelect : this.selectedItensMap);
        if (!itens.length) {
            return;
        }
        itens.forEach((itemRemove) => {
            this.selectedItens.push(itemRemove);
            itemRemove.selected = false;
            this.selectedItensMap.delete(itemRemove);
        });
        this.itensToSelect = this.itensToSelect.filter((x) => !itens.includes(x));
        this.itensToSelectFilterUtil.rawItensToSelect = this.itensToSelect;
        this.filterSelectedItens();
        this.filterItensToSelect();
        this.emitData();
        this.cdr.detectChanges();
    }
    filterItensToSelect() {
        let searchTerm = this.availableItensFilter;
        searchTerm = searchTerm.trim();
        if (searchTerm) {
            this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect.filter((item) => compareStrings(item.data[this.filterBy], searchTerm));
        }
        else {
            this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
        }
        this.cdr.detectChanges();
    }
    filterSelectedItens() {
        let searchTerm = this.selectedItensFilter;
        searchTerm = searchTerm.trim();
        if (searchTerm) {
            this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens.filter((item) => compareStrings(item.data[this.filterBy], searchTerm));
        }
        else {
            this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
        }
    }
    drop(event) {
        const isDifferentContainer = event.container !== event.previousContainer;
        if (!isDifferentContainer) {
            return;
        }
        const isRemovedItens = event.previousContainer.id === this.selectedItensId;
        if (isRemovedItens) {
            this.remove();
        }
        else {
            this.add();
        }
        this.cdr.detectChanges();
    }
    onDragStart(event, dragListId) {
        this.unselectedItensByListId(this.getOppositiveId(dragListId));
        event.source.data.selected = true;
        this.selectedItensMap.add(event.source.data);
        this.selectedItensMap.forEach((x) => (x.invisible = true));
        this.cdr.detectChanges();
    }
    onDragRelease() {
        this.selectedItensMap.forEach((item) => (item.invisible = false));
    }
    checkAllAvailableItensChange(target) {
        const checked = target.checked;
        this._checkAllSelectedItensChange(checked, this.itensToSelectFilterUtil.filteredItensToSelect, this.itensToSelectId);
    }
    checkAllSelectedItensChange(target) {
        const checked = target.checked;
        this._checkAllSelectedItensChange(checked, this.selectedItensFilterUtil.filteredSelectedItens, this.selectedItensId);
    }
    get disableSelectedItensCheckbox() {
        return filterEnabled(this.selectedItensFilterUtil.filteredSelectedItens).length === 0;
    }
    get disableItensToSelectCheckbox() {
        return filterEnabled(this.itensToSelectFilterUtil.filteredItensToSelect).length === 0;
    }
    get itensToSelectAllSelected() {
        return this._checkAllSelectedByList(this.itensToSelectFilterUtil.filteredItensToSelect);
    }
    get selectedItensAllSelected() {
        return this._checkAllSelectedByList(this.selectedItensFilterUtil.filteredSelectedItens);
    }
    get canAddItens() {
        return this.itensToSelect.filter((x) => x?.selected).length > 0;
    }
    get canRemoveItens() {
        return this.selectedItens.filter((x) => x?.selected).length > 0;
    }
    _checkAllSelectedByList(list) {
        const _listItens = filterEnabled(list);
        if (!_listItens.length) {
            return false;
        }
        else {
            return _listItens.every((x) => x.selected);
        }
    }
    _checkAllSelectedItensChange(checked, list, listId) {
        this.unselectedItensByListId(listId === this.selectedItensId ? this.itensToSelectId : this.selectedItensId);
        filterEnabled(list).forEach((item) => {
            item.selected = checked;
            this.selectedItensMap.add(item);
        });
        this.cdr.detectChanges();
    }
    unselectedItensByListId(listId) {
        const clearList = this.getAllElementsByListId(listId);
        clearList.forEach((x) => {
            x.selected = false;
            this.selectedItensMap.delete(x);
        });
        this.cdr.detectChanges();
    }
    getAllElementsByListId(listId) {
        return listId === this.selectedItensId ? this.selectedItensFilterUtil.rawSelectedItens : this.itensToSelectFilterUtil.rawItensToSelect;
    }
    getOppositiveId(listId) {
        return listId === this.selectedItensId ? this.itensToSelectId : this.selectedItensId;
    }
    emitData() {
        this.itensToSelectChange.emit(parseValueEmit(this.itensToSelect));
        this.selectedItensChange.emit(parseValueEmit(this.selectedItens));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PicklistComponent, selector: "s-picklist", inputs: { itensToSelect: "itensToSelect", selectedItens: "selectedItens", availableItensLabel: "availableItensLabel", availableItensPlaceholder: "availableItensPlaceholder", addSelectedItensLabel: "addSelectedItensLabel", addAllItensLabel: "addAllItensLabel", selectedItensLabel: "selectedItensLabel", selectedItensPlaceholder: "selectedItensPlaceholder", removeSelectedItemsLabel: "removeSelectedItemsLabel", removeAllItemsLabel: "removeAllItemsLabel", showCheckbox: "showCheckbox", filterBy: "filterBy" }, outputs: { selectedItensChange: "selectedItensChange", itensToSelectChange: "itensToSelectChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template\n    #previewRender\n    let-itens=\"itens\"\n    let-template=\"template\"\n>\n    <section class=\"picklist-items\">\n        @for (item of itens; track $index) {\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        }\n    </section>\n</ng-template>\n\n<ng-template\n    #picklistItensRender\n    let-id=\"id\"\n    let-itens=\"itens\"\n    let-template=\"template\"\n    let-listConnectedTo=\"listConnectedTo\"\n>\n    <div\n        class=\"picklist-items\"\n        cdkDropList\n        [id]=\"id\"\n        [cdkDropListSortingDisabled]=\"true\"\n        [cdkDropListData]=\"itens\"\n        [cdkDropListConnectedTo]=\"listConnectedTo\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        @for (item of itens; track $index) {\n            <div\n                cdkDrag\n                [cdkDragDisabled]=\"item.disabled\"\n                [cdkDragData]=\"item\"\n                (click)=\"toggleSelected(item, id)\"\n                (cdkDragStarted)=\"onDragStart($event, id)\"\n                (cdkDragReleased)=\"onDragRelease()\"\n                class=\"picklist-item\"\n                [class.picklist-disabled]=\"item.disabled\"\n                [class.picklist-item-invisible]=\"item.invisible\"\n                [class.picklist-item-active]=\"item.selected\"\n            >\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        class=\"input-checkbox\"\n                        [(ngModel)]=\"item.selected\"\n                        [disabled]=\"item.disabled\"\n                    />\n                }\n                <div class=\"picklist-content\">\n                    <ng-container *ngTemplateOutlet=\"template; context: { item: item.data, selected: item.selected, disabled: item.disabled }\"></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"></ng-container>\n                </ng-container>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template\n    #checkboxTitleRender\n    let-disabled=\"disabled\"\n    let-checked=\"checked\"\n    let-changeFn=\"changeFn\"\n>\n    @if (showCheckbox) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($event.target)\"\n        />\n    }\n</ng-template>\n\n<div class=\"picklist-container\">\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy && showCheckbox) {\n                <div class=\"picklist-filter\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                    @if (filterBy) {\n                        <input\n                            type=\"text\"\n                            class=\"input-search\"\n                            [(ngModel)]=\"availableItensFilter\"\n                            (ngModelChange)=\"filterItensToSelect()\"\n                            [placeholder]=\"availableItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                        />\n                    }\n                </div>\n            }\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: itensToSelectId,\n                        itens: itensToSelectFilterUtil.filteredItensToSelect,\n                        template: itemToSelectTemplate,\n                        listConnectedTo: selectedItensId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"addSelectedItensLabel || 'platform.angular_components.add' | translate\"\n                priority=\"primary\"\n                rightIconClass=\"fa fa-fw fa-arrow-right\"\n                [disabled]=\"!canAddItens\"\n                (clicked)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"add(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div\n                class=\"picklist-filter\"\n                *ngIf=\"filterBy && showCheckbox\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        checkboxTitleRender;\n                        context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\n                    \"\n                ></ng-container>\n                @if (filterBy) {\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                    />\n                }\n            </div>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"removeSelectedItemsLabel || 'platform.angular_components.remove' | translate\"\n                priority=\"primary\"\n                iconClass=\"fa fa-fw fa-arrow-left\"\n                [disabled]=\"!canRemoveItens\"\n                [auxiliary]=\"false\"\n                (clicked)=\"remove()\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"remove(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n</div>\n", styles: [".picklist-container{display:flex;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:flex;flex-direction:column;flex:1}.picklist-container .picklist-item-container .picklist-box{border:1px solid #dedce5;padding:8px;height:100%;min-width:200px}.picklist-container .picklist-item-container .picklist-box .picklist-filter{display:flex;width:100%}.picklist-container .picklist-item-container .picklist-box .picklist-filter .input-search{border:1px solid #dedce5;min-height:35px;width:100%;border-radius:3px;margin-bottom:10px;margin-top:10px;padding:0 8px;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:flex;align-items:center}.picklist-container .picklist-item-container .picklist-box .picklist-title-container .picklist-title{font-family:Open Sans;font-size:14px;font-weight:700;line-height:21px;text-underline-position:from-font;text-decoration-skip-ink:none}.picklist-container .picklist-item-container .picklist-box .picklist-items{max-height:23em;overflow:auto;height:100%;min-height:55px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-content{width:100%;height:100%;padding-right:8px;border-radius:3px;margin-bottom:8px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item{height:55px;border:3px;display:flex}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:not(.picklist-disabled){cursor:pointer}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:hover:not(.picklist-disabled,.picklist-item-active,.picklist-item-invisible){background-color:#f1f7f8}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-active:not(.picklist-item-invisible){background-color:#d5e8ec}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-disabled{opacity:.5;background-color:#fbfafc}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-invisible{display:none!important}.picklist-container .picklist-item-container .buttons-container{padding-top:10px;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { 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"] }, { kind: "component", type: i4.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-picklist', template: "<ng-template\n    #previewRender\n    let-itens=\"itens\"\n    let-template=\"template\"\n>\n    <section class=\"picklist-items\">\n        @for (item of itens; track $index) {\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        }\n    </section>\n</ng-template>\n\n<ng-template\n    #picklistItensRender\n    let-id=\"id\"\n    let-itens=\"itens\"\n    let-template=\"template\"\n    let-listConnectedTo=\"listConnectedTo\"\n>\n    <div\n        class=\"picklist-items\"\n        cdkDropList\n        [id]=\"id\"\n        [cdkDropListSortingDisabled]=\"true\"\n        [cdkDropListData]=\"itens\"\n        [cdkDropListConnectedTo]=\"listConnectedTo\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        @for (item of itens; track $index) {\n            <div\n                cdkDrag\n                [cdkDragDisabled]=\"item.disabled\"\n                [cdkDragData]=\"item\"\n                (click)=\"toggleSelected(item, id)\"\n                (cdkDragStarted)=\"onDragStart($event, id)\"\n                (cdkDragReleased)=\"onDragRelease()\"\n                class=\"picklist-item\"\n                [class.picklist-disabled]=\"item.disabled\"\n                [class.picklist-item-invisible]=\"item.invisible\"\n                [class.picklist-item-active]=\"item.selected\"\n            >\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        class=\"input-checkbox\"\n                        [(ngModel)]=\"item.selected\"\n                        [disabled]=\"item.disabled\"\n                    />\n                }\n                <div class=\"picklist-content\">\n                    <ng-container *ngTemplateOutlet=\"template; context: { item: item.data, selected: item.selected, disabled: item.disabled }\"></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"></ng-container>\n                </ng-container>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template\n    #checkboxTitleRender\n    let-disabled=\"disabled\"\n    let-checked=\"checked\"\n    let-changeFn=\"changeFn\"\n>\n    @if (showCheckbox) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($event.target)\"\n        />\n    }\n</ng-template>\n\n<div class=\"picklist-container\">\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy && showCheckbox) {\n                <div class=\"picklist-filter\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                    @if (filterBy) {\n                        <input\n                            type=\"text\"\n                            class=\"input-search\"\n                            [(ngModel)]=\"availableItensFilter\"\n                            (ngModelChange)=\"filterItensToSelect()\"\n                            [placeholder]=\"availableItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                        />\n                    }\n                </div>\n            }\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: itensToSelectId,\n                        itens: itensToSelectFilterUtil.filteredItensToSelect,\n                        template: itemToSelectTemplate,\n                        listConnectedTo: selectedItensId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"addSelectedItensLabel || 'platform.angular_components.add' | translate\"\n                priority=\"primary\"\n                rightIconClass=\"fa fa-fw fa-arrow-right\"\n                [disabled]=\"!canAddItens\"\n                (clicked)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"add(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div\n                class=\"picklist-filter\"\n                *ngIf=\"filterBy && showCheckbox\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        checkboxTitleRender;\n                        context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\n                    \"\n                ></ng-container>\n                @if (filterBy) {\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                    />\n                }\n            </div>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"removeSelectedItemsLabel || 'platform.angular_components.remove' | translate\"\n                priority=\"primary\"\n                iconClass=\"fa fa-fw fa-arrow-left\"\n                [disabled]=\"!canRemoveItens\"\n                [auxiliary]=\"false\"\n                (clicked)=\"remove()\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"remove(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n</div>\n", styles: [".picklist-container{display:flex;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:flex;flex-direction:column;flex:1}.picklist-container .picklist-item-container .picklist-box{border:1px solid #dedce5;padding:8px;height:100%;min-width:200px}.picklist-container .picklist-item-container .picklist-box .picklist-filter{display:flex;width:100%}.picklist-container .picklist-item-container .picklist-box .picklist-filter .input-search{border:1px solid #dedce5;min-height:35px;width:100%;border-radius:3px;margin-bottom:10px;margin-top:10px;padding:0 8px;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:flex;align-items:center}.picklist-container .picklist-item-container .picklist-box .picklist-title-container .picklist-title{font-family:Open Sans;font-size:14px;font-weight:700;line-height:21px;text-underline-position:from-font;text-decoration-skip-ink:none}.picklist-container .picklist-item-container .picklist-box .picklist-items{max-height:23em;overflow:auto;height:100%;min-height:55px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-content{width:100%;height:100%;padding-right:8px;border-radius:3px;margin-bottom:8px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item{height:55px;border:3px;display:flex}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:not(.picklist-disabled){cursor:pointer}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:hover:not(.picklist-disabled,.picklist-item-active,.picklist-item-invisible){background-color:#f1f7f8}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-active:not(.picklist-item-invisible){background-color:#d5e8ec}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-disabled{opacity:.5;background-color:#fbfafc}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-invisible{display:none!important}.picklist-container .picklist-item-container .buttons-container{padding-top:10px;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { itensToSelect: [{
                type: Input
            }], selectedItens: [{
                type: Input
            }], availableItensLabel: [{
                type: Input
            }], availableItensPlaceholder: [{
                type: Input
            }], addSelectedItensLabel: [{
                type: Input
            }], addAllItensLabel: [{
                type: Input
            }], selectedItensLabel: [{
                type: Input
            }], selectedItensPlaceholder: [{
                type: Input
            }], removeSelectedItemsLabel: [{
                type: Input
            }], removeAllItemsLabel: [{
                type: Input
            }], showCheckbox: [{
                type: Input
            }], filterBy: [{
                type: Input
            }], selectedItensChange: [{
                type: Output
            }], itensToSelectChange: [{
                type: Output
            }], templates: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });
const normalizeString = (str) => {
    return str
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase();
};
/**
 * Compares two strings by normalizing them to a case-insensitive and accent-free form,
 * and checks if the main string contains the substring.
 *
 * @param mainString - The string to be searched.
 * @param substring - The string to search for within the main string.
 * @returns A boolean indicating whether the normalized main string contains the normalized substring.
 */
const compareStrings = (mainString, substring) => {
    return normalizeString(mainString).includes(normalizeString(substring));
};
const filterEnabled = (list) => {
    const _list = list instanceof Set ? Array.from(list) : list;
    return _list.filter((x) => !x.disabled);
};
const mapData = (list) => {
    return list.map((x) => x.data);
};
const parseValueEmit = pipe(filterEnabled, mapData);
const parseItensPickList = (array, disabledFn) => {
    return array.map((x) => {
        return {
            data: x,
            disabled: disabledFn ? disabledFn(x) : false,
        };
    });
};

class PicklistModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, declarations: [PicklistComponent], imports: [CommonModule,
            TranslateModule,
            DragDropModule,
            FormsModule,
            ButtonModule], exports: [PicklistComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, imports: [CommonModule,
            TranslateModule,
            DragDropModule,
            FormsModule,
            ButtonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PicklistComponent],
                    imports: [
                        CommonModule,
                        TranslateModule,
                        DragDropModule,
                        FormsModule,
                        ButtonModule,
                    ],
                    exports: [PicklistComponent]
                }]
        }] });

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

export { PicklistComponent, PicklistModule, parseItensPickList };
//# sourceMappingURL=seniorsistemas-angular-components-picklist.mjs.map
