@seniorsistemas/angular-components 19.3.4 → 19.4.1

package/fesm2022/seniorsistemas-angular-components-picklist.mjs

@@ -1,18 +1,19 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, input, signal, output, EventEmitter, DestroyRef, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
 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 { inject, ChangeDetectorRef, EventEmitter, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i5 from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { pipe } from 'rxjs';
-import { randomHash } from '@seniorsistemas/angular-components/utils';
+import { ButtonComponent } from '@seniorsistemas/angular-components/button';
+import * as i4 from '@seniorsistemas/angular-components/loading-state';
+import { LoadingStateIndicators, LoadingStateModule } from '@seniorsistemas/angular-components/loading-state';
 import { TemplateDirective } from '@seniorsistemas/angular-components/template';
-import * as i4 from '@seniorsistemas/angular-components/button';
-import { ButtonModule } from '@seniorsistemas/angular-components/button';
+import { randomHash } from '@seniorsistemas/angular-components/utils';
+import { Subject, switchMap, distinctUntilChanged, debounceTime, tap, pipe } from 'rxjs';
 
 /**
  * @description Componente de lista de dupla seleção (picklist) com suporte a
@@ -55,6 +56,18 @@ class PicklistComponent {
     showCheckbox = false;
     /** @description Propriedade usada para filtrar os itens das listas. @default '' */
     filterBy = '';
+    /** @description Habilita o carregamento preguiçoso (lazy load) para as listas. @default false */
+    lazyLoad = input(false);
+    /** @description Número de linhas a serem exibidas por página caso o lazyLoad esteja habilitado. @default 10 */
+    rows = input(10);
+    /** @description Função loader para a lista de disponíveis (to-select). Quando fornecida, o componente gerencia internamente paginação, loading e race conditions. */
+    sourceLoader = input();
+    /** @description Função loader para a lista de selecionados (selected). Quando fornecida, o componente gerencia internamente paginação, loading e race conditions. */
+    targetLoader = input();
+    _loadingTarget = signal(false);
+    _loadingSource = signal(false);
+    /** @description Emitido quando um item é movido entre as listas e o lazy load está habilitado. */
+    nodeMoved = output();
     /** @description Emitido quando a lista de selecionados muda. */
     selectedItensChange = new EventEmitter();
     /** @description Emitido quando a lista de disponíveis muda. */
@@ -63,17 +76,29 @@ class PicklistComponent {
     selectedItensFilter = '';
     itemToSelectTemplate = null;
     itemSelectedTemplate = null;
+    logoIndicator = LoadingStateIndicators.Logo;
     itensToSelectFilterUtil = {
+        allItensSelected: false,
         rawItensToSelect: [],
         filteredItensToSelect: [],
     };
     selectedItensFilterUtil = {
+        allItensSelected: false,
         rawSelectedItens: [],
         filteredSelectedItens: [],
     };
     selectedItensMap = new Set();
     itensToSelectId = randomHash('itensToSelect');
     selectedItensId = randomHash('selectedItens');
+    destroyRef = inject(DestroyRef);
+    sourceFilterSubject = new Subject();
+    targetFilterSubject = new Subject();
+    sourceLoadSubject = new Subject();
+    targetLoadSubject = new Subject();
+    _internalTotalSource = 0;
+    _internalTotalTarget = 0;
+    sourceCurrentPage = 0;
+    targetCurrentPage = 0;
     _logErrorTemplate = true;
     templates = null;
     ngAfterViewInit() {
@@ -89,19 +114,48 @@ class PicklistComponent {
         }
         this.cdr.detectChanges();
     }
+    ngOnInit() {
+        this.setupLoaderPipelines();
+        this.setupLazyLoadEvents();
+        this.setupFilterDebounce();
+    }
     ngOnChanges(changes) {
-        if (changes['itensToSelect']?.firstChange) {
+        const changedItensToSelect = changes['itensToSelect'];
+        const changedSelectedItens = changes['selectedItens'];
+        if (changedItensToSelect && !this.lazyLoad()) {
             this.itensToSelectFilterUtil = {
+                allItensSelected: this.itensToSelectFilterUtil.allItensSelected || false,
                 rawItensToSelect: this.itensToSelect,
                 filteredItensToSelect: this.itensToSelect,
             };
         }
-        if (changes['selectedItens']?.firstChange) {
+        else if (changedItensToSelect && this.lazyLoad()) {
+            this.itensToSelectFilterUtil.rawItensToSelect = [
+                ...this.itensToSelectFilterUtil.rawItensToSelect,
+                ...this.itensToSelect,
+            ];
+            if (this.itensToSelectFilterUtil.allItensSelected) {
+                this._checkAllSelectedItensChange(this.itensToSelectFilterUtil.allItensSelected, this.itensToSelectFilterUtil.rawItensToSelect, this.itensToSelectId);
+            }
+            this.itensToSelectFilterUtil.filteredItensToSelect = [...this.itensToSelectFilterUtil.rawItensToSelect];
+        }
+        if (changedSelectedItens && !this.lazyLoad()) {
             this.selectedItensFilterUtil = {
+                allItensSelected: this.selectedItensFilterUtil.allItensSelected || false,
                 filteredSelectedItens: this.selectedItens,
                 rawSelectedItens: this.selectedItens,
             };
         }
+        else if (changedSelectedItens && this.lazyLoad()) {
+            this.selectedItensFilterUtil.rawSelectedItens = [
+                ...this.selectedItensFilterUtil.rawSelectedItens,
+                ...this.selectedItens,
+            ];
+            if (this.selectedItensFilterUtil.allItensSelected) {
+                this._checkAllSelectedItensChange(this.selectedItensFilterUtil.allItensSelected, this.selectedItensFilterUtil.rawSelectedItens, this.selectedItensId);
+            }
+            this.selectedItensFilterUtil.filteredSelectedItens = [...this.selectedItensFilterUtil.rawSelectedItens];
+        }
     }
     toggleSelected(internalPicklistItem, containerListId) {
         if (internalPicklistItem.disabled) {
@@ -115,6 +169,16 @@ class PicklistComponent {
         else {
             this.selectedItensMap.delete(internalPicklistItem);
         }
+        const containerFilterUtil = containerListId === this.selectedItensId ? this.selectedItensFilterUtil : this.itensToSelectFilterUtil;
+        const isAllSelected = this._checkAllSelectedByList(containerListId === this.selectedItensId
+            ? this.selectedItensFilterUtil.filteredSelectedItens
+            : this.itensToSelectFilterUtil.filteredItensToSelect);
+        if (this.lazyLoad() && !internalPicklistItem.selected && containerFilterUtil.allItensSelected) {
+            containerFilterUtil.allItensSelected = false;
+        }
+        else if (this.lazyLoad() && isAllSelected && containerFilterUtil.allItensSelected !== isAllSelected) {
+            containerFilterUtil.allItensSelected = isAllSelected;
+        }
         this.cdr.detectChanges();
     }
     remove(all = false) {
@@ -122,16 +186,57 @@ class PicklistComponent {
         if (!itens.length) {
             return;
         }
-        itens.forEach((itemRemove) => {
-            this.itensToSelect.push(itemRemove);
-            itemRemove.selected = false;
-            this.selectedItensMap.delete(itemRemove);
+        const allElements = this.lazyLoad() ? [] : this.selectedItensFilterUtil.rawSelectedItens;
+        const revertAction = () => {
+            this.selectedItensFilterUtil.rawSelectedItens = [
+                ...this.selectedItensFilterUtil.rawSelectedItens,
+                ...itens.map((i) => {
+                    i.selected = false;
+                    return i;
+                }),
+            ];
+            this.itensToSelectFilterUtil.rawItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect.filter((x) => !itens.includes(x));
+            this.selectedItensFilterUtil.allItensSelected = false;
+            if (this.lazyLoad()) {
+                this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+                this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+            }
+            else {
+                this.selectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+                this.itensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+                this.filterSelectedItens();
+                this.filterItensToSelect();
+                this.emitData();
+            }
+            this.cdr.detectChanges();
+        };
+        this.nodeMoved.emit({
+            direction: 'to-select',
+            items: all ? allElements : parseValueEmit(Array.from(this.selectedItensMap)),
+            moveAll: all,
+            revertAction,
         });
-        this.selectedItens = this.selectedItens.filter((x) => !itens.includes(x));
-        this.selectedItensFilterUtil.rawSelectedItens = this.selectedItens;
-        this.filterSelectedItens();
-        this.filterItensToSelect();
-        this.emitData();
+        this.itensToSelectFilterUtil.rawItensToSelect = [
+            ...this.itensToSelectFilterUtil.rawItensToSelect,
+            ...itens.map((itemRemove) => {
+                itemRemove.selected = false;
+                this.selectedItensMap.delete(itemRemove);
+                return itemRemove;
+            }),
+        ];
+        this.selectedItensFilterUtil.rawSelectedItens = this.selectedItensFilterUtil.rawSelectedItens.filter((x) => !itens.includes(x));
+        this.selectedItensFilterUtil.allItensSelected = false;
+        if (this.lazyLoad()) {
+            this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+            this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+        }
+        else {
+            this.itensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+            this.selectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+            this.filterSelectedItens();
+            this.filterItensToSelect();
+            this.emitData();
+        }
         this.cdr.detectChanges();
     }
     add(all = false) {
@@ -139,21 +244,67 @@ class PicklistComponent {
         if (!itens.length) {
             return;
         }
-        itens.forEach((itemRemove) => {
-            this.selectedItens.push(itemRemove);
-            itemRemove.selected = false;
-            this.selectedItensMap.delete(itemRemove);
+        const allElements = this.lazyLoad() ? [] : this.itensToSelectFilterUtil.rawItensToSelect;
+        const revertAction = () => {
+            this.itensToSelectFilterUtil.rawItensToSelect = [
+                ...this.itensToSelectFilterUtil.rawItensToSelect,
+                ...itens.map((i) => {
+                    i.selected = false;
+                    this.selectedItensMap.delete(i);
+                    return i;
+                }),
+            ];
+            this.selectedItensFilterUtil.rawSelectedItens = this.selectedItensFilterUtil.rawSelectedItens.filter((x) => !itens.includes(x));
+            this.itensToSelectFilterUtil.allItensSelected = false;
+            if (this.lazyLoad()) {
+                this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+                this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+            }
+            else {
+                this.itensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+                this.selectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+                this.filterSelectedItens();
+                this.filterItensToSelect();
+                this.emitData();
+            }
+            this.cdr.detectChanges();
+        };
+        this.nodeMoved.emit({
+            direction: 'selected',
+            items: all ? allElements : parseValueEmit(Array.from(this.selectedItensMap)),
+            moveAll: all,
+            revertAction,
         });
-        this.itensToSelect = this.itensToSelect.filter((x) => !itens.includes(x));
-        this.itensToSelectFilterUtil.rawItensToSelect = this.itensToSelect;
-        this.filterSelectedItens();
-        this.filterItensToSelect();
-        this.emitData();
+        this.selectedItensFilterUtil.rawSelectedItens = [
+            ...this.selectedItensFilterUtil.rawSelectedItens,
+            ...itens.map((itemRemove) => {
+                itemRemove.selected = false;
+                this.selectedItensMap.delete(itemRemove);
+                return itemRemove;
+            }),
+        ];
+        this.itensToSelectFilterUtil.rawItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect.filter((x) => !itens.includes(x));
+        this.itensToSelectFilterUtil.allItensSelected = false;
+        if (this.lazyLoad()) {
+            this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+            this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+        }
+        else {
+            this.selectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+            this.itensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+            this.filterSelectedItens();
+            this.filterItensToSelect();
+            this.emitData();
+        }
         this.cdr.detectChanges();
     }
     filterItensToSelect() {
-        let searchTerm = this.availableItensFilter;
-        searchTerm = searchTerm.trim();
+        if (this.lazyLoad()) {
+            this._loadingSource.set(true);
+            this.sourceFilterSubject.next(this.availableItensFilter);
+            return;
+        }
+        let searchTerm = this.availableItensFilter.trim();
         if (searchTerm) {
             this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect.filter((item) => compareStrings(item.data[this.filterBy], searchTerm));
         }
@@ -163,8 +314,12 @@ class PicklistComponent {
         this.cdr.detectChanges();
     }
     filterSelectedItens() {
-        let searchTerm = this.selectedItensFilter;
-        searchTerm = searchTerm.trim();
+        if (this.lazyLoad()) {
+            this._loadingTarget.set(true);
+            this.targetFilterSubject.next(this.selectedItensFilter);
+            return;
+        }
+        let searchTerm = this.selectedItensFilter.trim();
         if (searchTerm) {
             this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens.filter((item) => compareStrings(item.data[this.filterBy], searchTerm));
         }
@@ -196,14 +351,30 @@ class PicklistComponent {
     onDragRelease() {
         this.selectedItensMap.forEach((item) => (item.invisible = false));
     }
-    checkAllAvailableItensChange(target) {
-        const checked = target.checked;
+    checkAllAvailableItensChange(checked) {
         this._checkAllSelectedItensChange(checked, this.itensToSelectFilterUtil.filteredItensToSelect, this.itensToSelectId);
     }
-    checkAllSelectedItensChange(target) {
-        const checked = target.checked;
+    checkAllSelectedItensChange(checked) {
         this._checkAllSelectedItensChange(checked, this.selectedItensFilterUtil.filteredSelectedItens, this.selectedItensId);
     }
+    onScroll(event, listId) {
+        if (!this.lazyLoad()) {
+            return;
+        }
+        const element = event.target;
+        const reachLimit = element.offsetHeight + element.scrollTop >= element.scrollHeight;
+        if (!reachLimit) {
+            return;
+        }
+        const target = listId === this.selectedItensId ? 'selected' : 'to-select';
+        const targetReachLimit = target === 'selected'
+            ? this.selectedItensFilterUtil.filteredSelectedItens.length >= this._internalTotalTarget
+            : this.itensToSelectFilterUtil.filteredItensToSelect.length >= this._internalTotalSource;
+        if (targetReachLimit) {
+            return;
+        }
+        this.loadNextPage(target);
+    }
     get disableSelectedItensCheckbox() {
         return filterEnabled(this.selectedItensFilterUtil.filteredSelectedItens).length === 0;
     }
@@ -216,11 +387,69 @@ class PicklistComponent {
     get selectedItensAllSelected() {
         return this._checkAllSelectedByList(this.selectedItensFilterUtil.filteredSelectedItens);
     }
-    get canAddItens() {
-        return this.itensToSelect.filter((x) => x?.selected).length > 0;
+    get hasSelectedItens() {
+        return this.selectedItensMap.size > 0;
     }
-    get canRemoveItens() {
-        return this.selectedItens.filter((x) => x?.selected).length > 0;
+    /**
+     * @description Recarrega as listas após a confirmação de uma movimentação pelo backend.
+     *
+     * **Por que usar?**
+     * Ao mover itens, o componente atualiza a UI de forma otimista — os itens são movidos
+     * imediatamente antes da confirmação do servidor. Após o backend confirmar a operação,
+     * chame `resetList` para limpar e recarregar as listas afetadas do zero, garantindo que
+     * o estado da UI reflita os dados reais persistidos.
+     *
+     * **O que espera?**
+     * Recebe o objeto `PicklistItemMove<T>` emitido pelo output `(nodeMoved)`. O componente
+     * utiliza `node.direction` para determinar qual lista recarregar (a lista de destino da
+     * movimentação) e `node.moveAll` para verificar se a origem também deve ser recarregada
+     * (por exemplo, ao mover todos os itens de uma lista para outra, ambas ficam com estado
+     * alterado no backend).
+     *
+     * **O que faz?**
+     * - Reseta o contador de página da lista de destino para `0` (primeira página).
+     * - Limpa todos os itens carregados na lista de destino.
+     * - Dispara imediatamente o carregamento da primeira página via `sourceLoader`/`targetLoader`.
+     * - Se `node.moveAll === true`, repete o processo para a lista de origem.
+     *
+     * **Exemplo de uso:**
+     * ```typescript
+     * nodeMoved(node: PicklistItemMove<MyItem>): void {
+     *     this.service.moveItems(node).subscribe({
+     *         next: () => this.myPicklist().resetList(node),
+     *         error: () => node.revertAction(),
+     *     });
+     * }
+     * ```
+     *
+     * @param node - O objeto de movimentação emitido pelo output `(nodeMoved)`.
+     */
+    resetList(node) {
+        if (!this.lazyLoad()) {
+            return;
+        }
+        this._resetListByTarget(node.direction);
+        if (node.moveAll) {
+            this._resetListByTarget(node.direction === 'selected' ? 'to-select' : 'selected');
+        }
+    }
+    _resetListByTarget(target) {
+        if (target === 'selected') {
+            this.targetCurrentPage = -1;
+            this._internalTotalTarget = 0;
+            this.selectedItens = [];
+            this.selectedItensFilterUtil.rawSelectedItens = [];
+            this.selectedItensFilterUtil.filteredSelectedItens = [];
+        }
+        else {
+            this.sourceCurrentPage = -1;
+            this._internalTotalSource = 0;
+            this.itensToSelect = [];
+            this.itensToSelectFilterUtil.rawItensToSelect = [];
+            this.itensToSelectFilterUtil.filteredItensToSelect = [];
+        }
+        this.cdr.detectChanges();
+        Promise.resolve().then(() => this.loadNextPage(target));
     }
     _checkAllSelectedByList(list) {
         const _listItens = filterEnabled(list);
@@ -231,12 +460,135 @@ class PicklistComponent {
             return _listItens.every((x) => x.selected);
         }
     }
+    setupLoaderPipelines() {
+        if (!this.lazyLoad()) {
+            return;
+        }
+        if (!this.sourceLoader && !this.targetLoader && this._logErrorTemplate) {
+            console.error(`Lazy load is enabled but no loader function was provided. Please provide at least one loader function using 'sourceLoader' or 'targetLoader' input.`);
+        }
+        if (this.sourceLoader()) {
+            this.sourceLoadSubject
+                .pipe(switchMap((event) => {
+                this._loadingSource.set(true);
+                return this.sourceLoader()(event);
+            }), takeUntilDestroyed(this.destroyRef))
+                .subscribe(({ items, totalRecords }) => {
+                this._internalTotalSource = totalRecords;
+                this.itensToSelectFilterUtil.rawItensToSelect = [
+                    ...this.itensToSelectFilterUtil.rawItensToSelect,
+                    ...items,
+                ];
+                if (this.itensToSelectFilterUtil.allItensSelected) {
+                    this._checkAllSelectedItensChange(true, this.itensToSelectFilterUtil.rawItensToSelect, this.itensToSelectId);
+                }
+                this.itensToSelectFilterUtil.filteredItensToSelect = [
+                    ...this.itensToSelectFilterUtil.rawItensToSelect,
+                ];
+                this._loadingSource.set(false);
+                this.cdr.detectChanges();
+            });
+        }
+        if (this.targetLoader()) {
+            this.targetLoadSubject
+                .pipe(switchMap((event) => {
+                this._loadingTarget.set(true);
+                return this.targetLoader()(event);
+            }), takeUntilDestroyed(this.destroyRef))
+                .subscribe(({ items, totalRecords }) => {
+                this._internalTotalTarget = totalRecords;
+                this.selectedItensFilterUtil.rawSelectedItens = [
+                    ...this.selectedItensFilterUtil.rawSelectedItens,
+                    ...items,
+                ];
+                if (this.selectedItensFilterUtil.allItensSelected) {
+                    this._checkAllSelectedItensChange(true, this.selectedItensFilterUtil.rawSelectedItens, this.selectedItensId);
+                }
+                this.selectedItensFilterUtil.filteredSelectedItens = [
+                    ...this.selectedItensFilterUtil.rawSelectedItens,
+                ];
+                this._loadingTarget.set(false);
+                this.cdr.detectChanges();
+            });
+        }
+    }
+    setupFilterDebounce() {
+        if (!this.lazyLoad()) {
+            return;
+        }
+        this.sourceFilterSubject
+            .pipe(distinctUntilChanged(), debounceTime(300), tap(() => {
+            this.sourceCurrentPage = -1;
+            this.itensToSelect = [];
+            this.itensToSelectFilterUtil.rawItensToSelect = [];
+            this.itensToSelectFilterUtil.filteredItensToSelect = [];
+            this.cdr.detectChanges();
+        }), switchMap(() => {
+            this.loadNextPage('to-select');
+            return [];
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.targetFilterSubject
+            .pipe(distinctUntilChanged(), debounceTime(300), tap(() => {
+            this.targetCurrentPage = -1;
+            this.selectedItens = [];
+            this.selectedItensFilterUtil.rawSelectedItens = [];
+            this.selectedItensFilterUtil.filteredSelectedItens = [];
+            this.cdr.detectChanges();
+        }), switchMap(() => {
+            this.loadNextPage('selected');
+            return [];
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    setupLazyLoadEvents() {
+        if (!this.lazyLoad()) {
+            return;
+        }
+        Promise.resolve().then(() => {
+            this.loadNextPage('to-select');
+            this.loadNextPage('selected');
+        });
+    }
+    loadNextPage(target) {
+        const totalRegisters = target === 'selected' ? this._internalTotalTarget : this._internalTotalSource;
+        const lastPage = Math.ceil(totalRegisters / this.rows());
+        if (target === 'selected' && this.targetCurrentPage < lastPage) {
+            this.targetCurrentPage++;
+        }
+        else if (target === 'to-select' && this.sourceCurrentPage < lastPage) {
+            this.sourceCurrentPage++;
+        }
+        this.emitCurrentPage(target);
+    }
+    emitCurrentPage(target) {
+        const filter = target === 'selected' ? this.selectedItensFilter : this.availableItensFilter;
+        const page = target === 'selected' ? this.targetCurrentPage : this.sourceCurrentPage;
+        const event = { target, page, filter, pageSize: this.rows() };
+        if (target === 'selected') {
+            this.targetLoadSubject.next(event);
+        }
+        else {
+            this.sourceLoadSubject.next(event);
+        }
+    }
     _checkAllSelectedItensChange(checked, list, listId) {
         this.unselectedItensByListId(listId === this.selectedItensId ? this.itensToSelectId : this.selectedItensId);
         filterEnabled(list).forEach((item) => {
             item.selected = checked;
-            this.selectedItensMap.add(item);
+            if (checked) {
+                this.selectedItensMap.add(item);
+            }
+            else {
+                this.selectedItensMap.delete(item);
+            }
         });
+        if (listId === this.selectedItensId) {
+            this.selectedItensFilterUtil.allItensSelected = checked;
+        }
+        else {
+            this.itensToSelectFilterUtil.allItensSelected = checked;
+        }
         this.cdr.detectChanges();
     }
     unselectedItensByListId(listId) {
@@ -260,11 +612,11 @@ class PicklistComponent {
         this.selectedItensChange.emit(parseValueEmit(this.selectedItens));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistComponent, deps: [], 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", "menuAriaLabel"], outputs: ["clicked"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PicklistComponent, isStandalone: true, selector: "s-picklist", inputs: { itensToSelect: { classPropertyName: "itensToSelect", publicName: "itensToSelect", isSignal: false, isRequired: false, transformFunction: null }, selectedItens: { classPropertyName: "selectedItens", publicName: "selectedItens", isSignal: false, isRequired: false, transformFunction: null }, availableItensLabel: { classPropertyName: "availableItensLabel", publicName: "availableItensLabel", isSignal: false, isRequired: false, transformFunction: null }, availableItensPlaceholder: { classPropertyName: "availableItensPlaceholder", publicName: "availableItensPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, addSelectedItensLabel: { classPropertyName: "addSelectedItensLabel", publicName: "addSelectedItensLabel", isSignal: false, isRequired: false, transformFunction: null }, addAllItensLabel: { classPropertyName: "addAllItensLabel", publicName: "addAllItensLabel", isSignal: false, isRequired: false, transformFunction: null }, selectedItensLabel: { classPropertyName: "selectedItensLabel", publicName: "selectedItensLabel", isSignal: false, isRequired: false, transformFunction: null }, selectedItensPlaceholder: { classPropertyName: "selectedItensPlaceholder", publicName: "selectedItensPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, removeSelectedItemsLabel: { classPropertyName: "removeSelectedItemsLabel", publicName: "removeSelectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, removeAllItemsLabel: { classPropertyName: "removeAllItemsLabel", publicName: "removeAllItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, sourceLoader: { classPropertyName: "sourceLoader", publicName: "sourceLoader", isSignal: true, isRequired: false, transformFunction: null }, targetLoader: { classPropertyName: "targetLoader", publicName: "targetLoader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeMoved: "nodeMoved", 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    let-isLoading=\"isLoading\"\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        *sLoadingState=\"{ loading: isLoading, indicator: logoIndicator }\"\n        (scroll)=\"onScroll($event, id)\"\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\n                        *ngTemplateOutlet=\"\n                            template;\n                            context: { item: item.data, selected: item.selected, disabled: item.disabled }\n                        \"\n                    ></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container\n                        *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"\n                    ></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    let-id=\"id\"\n>\n    @if (showCheckbox && !lazyLoad()) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($any($event.target).checked)\"\n        />\n    } @else if (showCheckbox && lazyLoad() && id === itensToSelectId) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"itensToSelectFilterUtil.allItensSelected\"\n            (change)=\"checkAllAvailableItensChange($any($event.target).checked)\"\n        />\n    } @else if (showCheckbox && lazyLoad() && id === selectedItensId) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"selectedItensFilterUtil.allItensSelected\"\n            (change)=\"checkAllSelectedItensChange($any($event.target).checked)\"\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 && !lazyLoad()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                                id: itensToSelectId,\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 || lazyLoad()) {\n                <div class=\"picklist-filter\">\n                    @if (showCheckbox) {\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableItensToSelectCheckbox,\n                                    checked: itensToSelectAllSelected,\n                                    changeFn: checkAllAvailableItensChange.bind(this),\n                                    id: itensToSelectId,\n                                }\n                            \"\n                        ></ng-container>\n                    }\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"availableItensFilter\"\n                        (ngModelChange)=\"filterItensToSelect()\"\n                        [placeholder]=\"\n                            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                        isLoading: _loadingSource(),\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]=\"!hasSelectedItens\"\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 && !lazyLoad()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableSelectedItensCheckbox,\n                                checked: selectedItensAllSelected,\n                                changeFn: checkAllSelectedItensChange.bind(this),\n                                id: selectedItensId,\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy || lazyLoad()) {\n                <div class=\"picklist-filter\">\n                    @if (showCheckbox) {\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                    id: selectedItensId,\n                                }\n                            \"\n                        ></ng-container>\n                    }\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"\n                            selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\n                        \"\n                    />\n                </div>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                        isLoading: _loadingTarget(),\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]=\"!hasSelectedItens\"\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\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:100px}.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }, { 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: "ngmodule", type: FormsModule }, { 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: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LoadingStateModule }, { kind: "directive", type: i4.LoadingStateDirective, selector: "[sLoadingState]", inputs: ["sLoadingState"] }] });
 }
 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"] }]
+            args: [{ standalone: true, imports: [TranslateModule, DragDropModule, FormsModule, ButtonComponent, NgTemplateOutlet, LoadingStateModule], 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    let-isLoading=\"isLoading\"\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        *sLoadingState=\"{ loading: isLoading, indicator: logoIndicator }\"\n        (scroll)=\"onScroll($event, id)\"\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\n                        *ngTemplateOutlet=\"\n                            template;\n                            context: { item: item.data, selected: item.selected, disabled: item.disabled }\n                        \"\n                    ></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container\n                        *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"\n                    ></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    let-id=\"id\"\n>\n    @if (showCheckbox && !lazyLoad()) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($any($event.target).checked)\"\n        />\n    } @else if (showCheckbox && lazyLoad() && id === itensToSelectId) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"itensToSelectFilterUtil.allItensSelected\"\n            (change)=\"checkAllAvailableItensChange($any($event.target).checked)\"\n        />\n    } @else if (showCheckbox && lazyLoad() && id === selectedItensId) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"selectedItensFilterUtil.allItensSelected\"\n            (change)=\"checkAllSelectedItensChange($any($event.target).checked)\"\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 && !lazyLoad()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                                id: itensToSelectId,\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 || lazyLoad()) {\n                <div class=\"picklist-filter\">\n                    @if (showCheckbox) {\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableItensToSelectCheckbox,\n                                    checked: itensToSelectAllSelected,\n                                    changeFn: checkAllAvailableItensChange.bind(this),\n                                    id: itensToSelectId,\n                                }\n                            \"\n                        ></ng-container>\n                    }\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"availableItensFilter\"\n                        (ngModelChange)=\"filterItensToSelect()\"\n                        [placeholder]=\"\n                            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                        isLoading: _loadingSource(),\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]=\"!hasSelectedItens\"\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 && !lazyLoad()) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableSelectedItensCheckbox,\n                                checked: selectedItensAllSelected,\n                                changeFn: checkAllSelectedItensChange.bind(this),\n                                id: selectedItensId,\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy || lazyLoad()) {\n                <div class=\"picklist-filter\">\n                    @if (showCheckbox) {\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                    id: selectedItensId,\n                                }\n                            \"\n                        ></ng-container>\n                    }\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"\n                            selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\n                        \"\n                    />\n                </div>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                        isLoading: _loadingTarget(),\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]=\"!hasSelectedItens\"\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\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:100px}.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"] }]
         }], propDecorators: { itensToSelect: [{
                 type: Input
             }], selectedItens: [{
@@ -322,40 +674,26 @@ const mapData = (list) => {
     return list.map((x) => x.data);
 };
 const parseValueEmit = pipe(filterEnabled, mapData);
-const parseItensPickList = (array, disabledFn) => {
+const parseItensPickList = (array, disabledFn, idKey) => {
     return array.map((x) => {
         return {
             data: x,
             disabled: disabledFn ? disabledFn(x) : false,
+            id: idKey ? String(x[idKey]) : crypto.randomUUID(),
         };
     });
 };
 
 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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, imports: [PicklistComponent], exports: [PicklistComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, imports: [PicklistComponent] });
 }
 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]
+                    imports: [PicklistComponent],
+                    exports: [PicklistComponent],
                 }]
         }] });