@seniorsistemas/angular-components 17.15.4 → 17.16.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -9781,6 +9781,7 @@
                 calendar: __assign(__assign({}, this.localeService.getLocaleOptions().calendar), { dateFormat: convertToMomentDateFormat(this.localeService.getLocaleOptions().calendar.dateFormat) }),
                 number: __assign(__assign({}, this.localeService.getLocaleOptions().number), { scale: 0 }),
             };
+            this.cellsData = [];
             this.formattedColumns = [];
         }
         TableColumnsComponent.prototype.ngOnChanges = function (changes) {
@@ -9793,7 +9794,7 @@
         TableColumnsComponent.prototype.isArray = function (value) {
             return Array.isArray(value);
         };
-        TableColumnsComponent.prototype.getSplittedString = function (column) {
+        TableColumnsComponent.prototype.getCellData = function (column) {
             var columnValue = column.columnValue, separator = column.separator, uninformed = column.uninformed;
             if (typeof columnValue === "string") {
                 var splittedString_1 = columnValue.split(separator);
@@ -9802,7 +9803,7 @@
                     return {
                         value: string,
                         isUninformed: string === uninformed,
-                        separator: !isLastIndex ? separator : "",
+                        separator: !isLastIndex ? separator : null,
                     };
                 });
             }
@@ -9824,8 +9825,8 @@
             var columns = ((_a = changes.columns) === null || _a === void 0 ? void 0 : _a.currentValue) || this.columns;
             var rowValue = ((_b = changes.rowValue) === null || _b === void 0 ? void 0 : _b.currentValue) || this.rowValue;
             var locale = ((_c = changes.locale) === null || _c === void 0 ? void 0 : _c.currentValue) || this.locale;
-            this.formattedColumns = [];
-            columns.forEach(function (column) { return _this.formattedColumns.push(_this.getColumnValue(column, rowValue, locale)); });
+            this.formattedColumns = columns.map(function (column) { return _this.getColumnValue(column, rowValue, locale); });
+            this.cellsData = this.formattedColumns.map(function (column) { return _this.getCellData(column); });
             this.viewContainerRef.createEmbeddedView(this.columnsTemplate);
         };
         TableColumnsComponent.prototype.getColumnSeparator = function (column) {
@@ -10015,7 +10016,7 @@
         ], TableColumnsComponent.prototype, "locale", void 0);
         TableColumnsComponent = __decorate([
             core.Component({
-                template: "<ng-template #columnsTemplate>\n    <td\n        *ngFor=\"let column of formattedColumns\"\n        [ngStyle]=\"column.style\"\n        (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\"\n    >\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n            <span *ngIf=\"column.type !== 'LINK'\" [sTooltip]=\"column.tooltip\" [escape]=\"false\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n            </span>\n\n            <a\n                *ngIf=\"column.type === 'LINK'\"\n                [sTooltip]=\"column.tooltip\"\n                [escape]=\"false\"\n                (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\"\n            >\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n            </a>\n\n            <ng-template #columnValueTemplate>\n                <ng-container *ngFor=\"let value of getSplittedString(column)\">\n                    <span *ngIf=\"value.isUninformed; else isInformedTemplate\" class=\"sds-empty-value\">{{ value.value }}</span>\n\n                    <ng-template #isInformedTemplate>\n                        <s-badge\n                            *ngIf=\"column.badgeConfigs; else withoutBadgeTemplate\"\n                            [sTooltip]=\"column.tooltip\"\n                            [color]=\"column.badgeConfigs.color\"\n                            [text]=\"value.value\"\n                        ></s-badge>\n\n                        <ng-template #withoutBadgeTemplate>\n                            <span>{{ value.value }}</span>\n                        </ng-template>\n                    </ng-template>\n\n                    <span>{{ value.separator }}</span>\n                </ng-container>\n\n                <ng-container *ngIf=\"!!column.infoSign\">\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                </ng-container>\n            </ng-template>\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list [tokens]=\"column.columnValue\" [hidePointerEvents]=\"true\"></s-token-list>\n\n            <ng-container *ngIf=\"!!column.infoSign\">\n                <span *sInfoSign=\"column.infoSign\"></span>\n            </ng-container>\n        </ng-template>\n    </td>\n</ng-template>\n",
+                template: "<ng-template #columnsTemplate>\n    <td\n        *ngFor=\"let column of formattedColumns; let i = index\"\n        [ngStyle]=\"column.style\"\n        (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\"\n    >\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n            <span *ngIf=\"column.type !== 'LINK'\" [sTooltip]=\"column.tooltip\" [escape]=\"false\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n            </span>\n\n            <ng-container *ngIf=\"column.type === 'LINK'\">\n                <span *ngIf=\"cellsData[i][0].isUninformed; else anchorTemplate\" class=\"sds-empty-value\">{{ cellsData[i][0].value }}</span>\n\n                <ng-template #anchorTemplate>\n                    <a [sTooltip]=\"column.tooltip\" [escape]=\"false\" (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\">\n                        <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container>\n                    </a>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #columnValueTemplate>\n                <ng-container *ngFor=\"let cellData of cellsData[i]\">\n                    <span *ngIf=\"cellData.isUninformed; else isInformedTemplate\" class=\"sds-empty-value\">{{ cellData.value }}</span>\n\n                    <ng-template #isInformedTemplate>\n                        <s-badge\n                            *ngIf=\"column.badgeConfigs; else withoutBadgeTemplate\"\n                            [sTooltip]=\"column.tooltip\"\n                            [color]=\"column.badgeConfigs.color\"\n                            [text]=\"cellData.value\"\n                        ></s-badge>\n\n                        <ng-template #withoutBadgeTemplate>\n                            <span>{{ cellData.value }}</span>\n                        </ng-template>\n                    </ng-template>\n\n                    <span *ngIf=\"cellData.separator\">{{ cellData.separator }}</span>\n                </ng-container>\n\n                <ng-container *ngIf=\"!!column.infoSign\">\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                </ng-container>\n            </ng-template>\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list [tokens]=\"column.columnValue\" [hidePointerEvents]=\"true\"></s-token-list>\n\n            <ng-container *ngIf=\"!!column.infoSign\">\n                <span *sInfoSign=\"column.infoSign\"></span>\n            </ng-container>\n        </ng-template>\n    </td>\n</ng-template>\n",
                 selector: "s-table-columns",
                 styles: [":host{display:none}"]
             }),
@@ -20255,6 +20256,363 @@
         return LabelValueModule;
     }());
 
+
+    (function (PicklistTemplateTypes) {
+        PicklistTemplateTypes["ItemToSelect"] = "item-to-select";
+        PicklistTemplateTypes["SelectedItem"] = "selected-item";
+    })(exports.PicklistTemplateTypes || (exports.PicklistTemplateTypes = {}));
+
+    var PicklistComponent = /** @class */ (function () {
+        function PicklistComponent(cdr) {
+            this.cdr = cdr;
+            this.itensToSelect = [];
+            this.selectedItens = [];
+            this.showCheckbox = false;
+            this.filterBy = '';
+            this.selectedItensChange = new core.EventEmitter();
+            this.itensToSelectChange = new core.EventEmitter();
+            this.availableItensFilter = '';
+            this.selectedItensFilter = '';
+            this.itensToSelectFilterUtil = {
+                rawItensToSelect: [],
+                filteredItensToSelect: [],
+            };
+            this.selectedItensFilterUtil = {
+                rawSelectedItens: [],
+                filteredSelectedItens: [],
+            };
+            this.selectedItensMap = new Set();
+            this.itensToSelectId = randomHash('itensToSelect');
+            this.selectedItensId = randomHash('selectedItens');
+        }
+        PicklistComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            this.itemToSelectTemplate = (_a = this.templates.find(function (x) { return x.type === exports.PicklistTemplateTypes.ItemToSelect; })) === null || _a === void 0 ? void 0 : _a.template;
+            this.itemSelectedTemplate = (_b = this.templates.find(function (x) { return x.type === exports.PicklistTemplateTypes.SelectedItem; })) === null || _b === void 0 ? void 0 : _b.template;
+            if (!this.itemToSelectTemplate) {
+                console.error("Missing template for " + exports.PicklistTemplateTypes.ItemToSelect + " add this template using sTemplate directive.");
+            }
+            if (!this.itemSelectedTemplate) {
+                console.error("Missing template for " + exports.PicklistTemplateTypes.SelectedItem + " add this template using sTemplate directive.");
+            }
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.itensToSelect && changes.itensToSelect.firstChange) {
+                this.itensToSelectFilterUtil = {
+                    rawItensToSelect: this.itensToSelect,
+                    filteredItensToSelect: this.itensToSelect,
+                };
+            }
+            if (changes.selectedItens && changes.selectedItens.firstChange) {
+                this.selectedItensFilterUtil = {
+                    filteredSelectedItens: this.selectedItens,
+                    rawSelectedItens: this.selectedItens
+                };
+            }
+        };
+        PicklistComponent.prototype.toggleSelected = function (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();
+        };
+        PicklistComponent.prototype.remove = function (all) {
+            var _this = this;
+            if (all === void 0) { all = false; }
+            var itens = filterEnabled((all ? this.selectedItensFilterUtil.rawSelectedItens : this.selectedItensMap));
+            if (!itens.length) {
+                return;
+            }
+            itens.forEach(function (itemRemove) {
+                _this.itensToSelect.push(itemRemove);
+                itemRemove.selected = false;
+                _this.selectedItensMap.delete(itemRemove);
+            });
+            this.selectedItens = this.selectedItens.filter(function (x) { return !itens.includes(x); });
+            this.selectedItensFilterUtil.rawSelectedItens = this.selectedItens;
+            this.filterSelectedItens();
+            this.filterItensToSelect();
+            this.emitData();
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.add = function (all) {
+            var _this = this;
+            if (all === void 0) { all = false; }
+            var itens = filterEnabled((all ? this.itensToSelectFilterUtil.rawItensToSelect : this.selectedItensMap));
+            if (!itens.length) {
+                return;
+            }
+            itens.forEach(function (itemRemove) {
+                _this.selectedItens.push(itemRemove);
+                itemRemove.selected = false;
+                _this.selectedItensMap.delete(itemRemove);
+            });
+            this.itensToSelect = this.itensToSelect.filter(function (x) { return !itens.includes(x); });
+            this.itensToSelectFilterUtil.rawItensToSelect = this.itensToSelect;
+            this.filterSelectedItens();
+            this.filterItensToSelect();
+            this.emitData();
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.filterItensToSelect = function () {
+            var _this = this;
+            var searchTerm = this.availableItensFilter;
+            searchTerm = searchTerm.trim();
+            if (searchTerm) {
+                this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect
+                    .filter(function (item) { return compareStrings(item.data[_this.filterBy], searchTerm); });
+            }
+            else {
+                this.itensToSelectFilterUtil.filteredItensToSelect = this.itensToSelectFilterUtil.rawItensToSelect;
+            }
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.filterSelectedItens = function () {
+            var _this = this;
+            var searchTerm = this.selectedItensFilter;
+            searchTerm = searchTerm.trim();
+            if (searchTerm) {
+                this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens
+                    .filter(function (item) { return compareStrings(item.data[_this.filterBy], searchTerm); });
+            }
+            else {
+                this.selectedItensFilterUtil.filteredSelectedItens = this.selectedItensFilterUtil.rawSelectedItens;
+            }
+        };
+        PicklistComponent.prototype.drop = function (event) {
+            var isDifferentContainer = event.container !== event.previousContainer;
+            if (!isDifferentContainer) {
+                return;
+            }
+            var isRemovedItens = event.previousContainer.id === this.selectedItensId;
+            if (isRemovedItens) {
+                this.remove();
+            }
+            else {
+                this.add();
+            }
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.onDragStart = function (event, dragListId) {
+            this.unselectedItensByListId(this.getOppositiveId(dragListId));
+            event.source.data.selected = true;
+            this.selectedItensMap.add(event.source.data);
+            this.selectedItensMap.forEach(function (x) { return x.invisible = true; });
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.onDragRelease = function () {
+            this.selectedItensMap.forEach(function (item) { return item.invisible = false; });
+        };
+        PicklistComponent.prototype.checkAllAvailableItensChange = function (checked) {
+            this._checkAllSelectedItensChange(checked, this.itensToSelectFilterUtil.filteredItensToSelect, this.itensToSelectId);
+        };
+        PicklistComponent.prototype.checkAllSelectedItensChange = function (checked) {
+            this._checkAllSelectedItensChange(checked, this.selectedItensFilterUtil.filteredSelectedItens, this.selectedItensId);
+        };
+        Object.defineProperty(PicklistComponent.prototype, "disableSelectedItensCheckbox", {
+            get: function () {
+                return filterEnabled(this.selectedItensFilterUtil.filteredSelectedItens).length === 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PicklistComponent.prototype, "disableItensToSelectCheckbox", {
+            get: function () {
+                return filterEnabled(this.itensToSelectFilterUtil.filteredItensToSelect).length === 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PicklistComponent.prototype, "itensToSelectAllSelected", {
+            get: function () {
+                return this._checkAllSelectedByList(this.itensToSelectFilterUtil.filteredItensToSelect);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PicklistComponent.prototype, "selectedItensAllSelected", {
+            get: function () {
+                return this._checkAllSelectedByList(this.selectedItensFilterUtil.filteredSelectedItens);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PicklistComponent.prototype, "canAddItens", {
+            get: function () {
+                return this.itensToSelect.filter(function (x) { return x === null || x === void 0 ? void 0 : x.selected; }).length > 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PicklistComponent.prototype, "canRemoveItens", {
+            get: function () {
+                return this.selectedItens.filter(function (x) { return x === null || x === void 0 ? void 0 : x.selected; }).length > 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PicklistComponent.prototype._checkAllSelectedByList = function (list) {
+            var _listItens = filterEnabled(list);
+            if (!_listItens.length) {
+                return false;
+            }
+            else {
+                return _listItens.every(function (x) { return x.selected; });
+            }
+        };
+        PicklistComponent.prototype._checkAllSelectedItensChange = function (checked, list, listId) {
+            var _this = this;
+            this.unselectedItensByListId(listId === this.selectedItensId ? this.itensToSelectId : this.selectedItensId);
+            filterEnabled(list).forEach(function (item) {
+                item.selected = checked;
+                _this.selectedItensMap.add(item);
+            });
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.unselectedItensByListId = function (listId) {
+            var _this = this;
+            var clearList = this.getAllElementsByListId(listId);
+            clearList.forEach(function (x) {
+                x.selected = false;
+                _this.selectedItensMap.delete(x);
+            });
+            this.cdr.detectChanges();
+        };
+        PicklistComponent.prototype.getAllElementsByListId = function (listId) {
+            return listId === this.selectedItensId ? this.selectedItensFilterUtil.rawSelectedItens : this.itensToSelectFilterUtil.rawItensToSelect;
+        };
+        PicklistComponent.prototype.getOppositiveId = function (listId) {
+            return listId === this.selectedItensId ? this.itensToSelectId : this.selectedItensId;
+        };
+        PicklistComponent.prototype.emitData = function () {
+            this.itensToSelectChange.emit(parseValueEmit(this.itensToSelect));
+            this.selectedItensChange.emit(parseValueEmit(this.selectedItens));
+        };
+        PicklistComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "itensToSelect", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "selectedItens", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "availableItensLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "availableItensPlaceholder", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "addSelectedItensLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "addAllItensLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "selectedItensLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "selectedItensPlaceholder", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "removeSelectedItemsLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "removeAllItemsLabel", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "showCheckbox", void 0);
+        __decorate([
+            core.Input()
+        ], PicklistComponent.prototype, "filterBy", void 0);
+        __decorate([
+            core.Output()
+        ], PicklistComponent.prototype, "selectedItensChange", void 0);
+        __decorate([
+            core.Output()
+        ], PicklistComponent.prototype, "itensToSelectChange", void 0);
+        __decorate([
+            core.ContentChildren(TemplateDirective)
+        ], PicklistComponent.prototype, "templates", void 0);
+        PicklistComponent = __decorate([
+            core.Component({
+                selector: 's-picklist',
+                template: "<ng-template #previewRender let-itens=\"itens\" let-template=\"template\">\n    <section class=\"picklist-items\">\n        <ng-container *ngFor=\"let item of itens\">\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        </ng-container>\n    </section>\n</ng-template>\n\n<ng-template #picklistItensRender let-id=\"id\" let-itens=\"itens\" let-template=\"template\" let-listConnectedTo=\"listConnectedTo\">\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    <div\n        *ngFor=\"let item of itens\"\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        <input\n            type=\"checkbox\"\n            class=\"input-checkbox\"\n            [(ngModel)]=\"item.selected\"\n            [disabled]=\"item.disabled\"\n            *ngIf=\"showCheckbox\">\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</div>\n</ng-template>\n\n<ng-template #checkboxTitleRender let-disabled=\"disabled\" let-checked=\"checked\" let-changeFn=\"changeFn\">\n    <input\n        *ngIf=\"showCheckbox\"\n        class=\"input-checkbox\"\n        type=\"checkbox\"\n        [disabled]=\"disabled\"\n        [checked]=\"checked\"\n        (change)=\"changeFn($event.target.checked)\">\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                <ng-container *ngIf=\"!filterBy\">\n                    <ng-container *ngTemplateOutlet=\"checkboxTitleRender; context: { disabled: disableItensToSelectCheckbox, checked: itensToSelectAllSelected, changeFn: checkAllAvailableItensChange.bind(this) }\"></ng-container>\n                </ng-container>\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            <div class=\"picklist-filter\" *ngIf=\"filterBy && showCheckbox\">\n                <ng-container *ngTemplateOutlet=\"checkboxTitleRender; context: { disabled: disableItensToSelectCheckbox, checked: itensToSelectAllSelected, changeFn: checkAllAvailableItensChange.bind(this) }\"></ng-container>\n                <input\n                    *ngIf=\"filterBy\"\n                    type=\"text\"\n                    class=\"input-search\"\n                    [(ngModel)]=\"availableItensFilter\"\n                    (ngModelChange)=\"filterItensToSelect()\"\n                    [placeholder]=\"availableItensPlaceholder || 'plataform.angular_components.picklist-placeholder' | translate\">\n            </div>\n            <ng-container *ngTemplateOutlet=\"picklistItensRender;\n                 context: {\n                    id: itensToSelectId,\n                    itens: itensToSelectFilterUtil.filteredItensToSelect,\n                    template: itemToSelectTemplate,\n                    listConnectedTo: selectedItensId\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                (onClick)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\">\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (onClick)=\"add(true)\"\n                [auxiliary]=\"false\">\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                <ng-container *ngIf=\"!filterBy\">\n                    <ng-container *ngTemplateOutlet=\"checkboxTitleRender; context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\"></ng-container>\n                </ng-container>\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div class=\"picklist-filter\" *ngIf=\"filterBy && showCheckbox\">\n                <ng-container *ngTemplateOutlet=\"checkboxTitleRender; context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\"></ng-container>\n                <input\n                    *ngIf=\"filterBy\"\n                    type=\"text\"\n                    class=\"input-search\"\n                    [(ngModel)]=\"selectedItensFilter\"\n                    (ngModelChange)=\"filterSelectedItens()\"\n                    [placeholder]=\"selectedItensPlaceholder || 'plataform.angular_components.picklist-placeholder' | translate\">\n            </div>\n            <ng-container *ngTemplateOutlet=\"picklistItensRender;\n                 context: {\n                    id: selectedItensId,\n                    itens: selectedItensFilterUtil.filteredSelectedItens,\n                    template: itemSelectedTemplate,\n                    listConnectedTo: itensToSelectId\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                (onClick)=\"remove()\"\n                [caret]=\"false\">\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (onClick)=\"remove(true)\"\n                [auxiliary]=\"false\">\n            </s-button>\n        </div>\n    </div>\n</div>\n",
+                styles: [".picklist-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;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:-ms-flexbox;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;-ms-flex:1;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;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;-webkit-text-decoration-skip-ink:none;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:-ms-flexbox;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:-ms-flexbox;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}"]
+            })
+        ], PicklistComponent);
+        return PicklistComponent;
+    }());
+    var normalizeString = function (str) {
+        return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    };
+    var ɵ0$3 = normalizeString;
+    /**
+     * 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.
+     */
+    var compareStrings = function (mainString, substring) {
+        return normalizeString(mainString).includes(normalizeString(substring));
+    };
+    var ɵ1$2 = compareStrings;
+    var randomHash = function (prefix) {
+        if (prefix === void 0) { prefix = 'id'; }
+        return prefix + "-" + Math.random().toString(36).substring(2, 9) + "-" + Date.now().toString(36);
+    };
+    var ɵ2$1 = randomHash;
+    var filterEnabled = function (list) {
+        var _list = list instanceof Set ? Array.from(list) : list;
+        return _list.filter(function (x) { return !x.disabled; });
+    };
+    var ɵ3 = filterEnabled;
+    var mapData = function (list) {
+        return list.map(function (x) { return x.data; });
+    };
+    var ɵ4 = mapData;
+    var parseValueEmit = rxjs.pipe(filterEnabled, mapData);
+    var parseItensPickList = function (array, disabledFn) {
+        return array.map(function (x) {
+            return {
+                data: x,
+                disabled: disabledFn ? disabledFn(x) : false
+            };
+        });
+    };
+
+    var PicklistModule = /** @class */ (function () {
+        function PicklistModule() {
+        }
+        PicklistModule = __decorate([
+            core.NgModule({
+                declarations: [PicklistComponent],
+                imports: [
+                    common.CommonModule,
+                    core$1.TranslateModule,
+                    dragDrop.DragDropModule,
+                    forms.FormsModule,
+                    ButtonModule,
+                ],
+                exports: [PicklistComponent]
+            })
+        ], PicklistModule);
+        return PicklistModule;
+    }());
+
     var fallback = {
         "platform.angular_components.drag_your_photo_or": "Arraste sua foto ou",
         "platform.angular_components.select_a_file": "selecione um arquivo",
@@ -20569,7 +20927,12 @@
         "platform.angular_components.country_name_tm": "Turquemenistão",
         "platform.angular_components.country_name_uz": "Uzbequistão",
         "platform.angular_components.country_name_ve": "Venezuela",
-        "platform.angular_components.date_modified_custom_blob": "Enviado às {{hour}}:{{minutes}} de {{day}}/{{month}}/{{fullYear}}"
+        "platform.angular_components.date_modified_custom_blob": "Enviado às {{hour}}:{{minutes}} de {{day}}/{{month}}/{{fullYear}}",
+        "platform.angular_components.available-items": "Itens disponíveis",
+        "platform.angular_components.selected-items": "Itens selecionados",
+        "plataform.angular_components.picklist-placeholder": "Busque pelo nome ou termo",
+        "platform.angular_components.add_all": "Adicionar todos",
+        "platform.angular_components.remove_all": "Remover todos"
     };
 
     exports.AccordionComponent = AccordionComponent;
@@ -20697,6 +21060,8 @@
     exports.PasswordStrengthComponent = PasswordStrengthComponent;
     exports.PasswordStrengthDirective = PasswordStrengthDirective;
     exports.PasswordStrengthModule = PasswordStrengthModule;
+    exports.PicklistComponent = PicklistComponent;
+    exports.PicklistModule = PicklistModule;
     exports.ProductHeaderComponent = ProductHeaderComponent;
     exports.ProductHeaderModule = ProductHeaderModule;
     exports.ProfilePicturePickerComponent = ProfilePicturePickerComponent;
@@ -20758,6 +21123,12 @@
     exports.convertToMomentDateFormat = convertToMomentDateFormat;
     exports.countries = countries;
     exports.fallback = fallback;
+    exports.parseItensPickList = parseItensPickList;
+    exports.ɵ0 = ɵ0$3;
+    exports.ɵ1 = ɵ1$2;
+    exports.ɵ2 = ɵ2$1;
+    exports.ɵ3 = ɵ3;
+    exports.ɵ4 = ɵ4;
     exports.ɵa = TooltipComponent;
     exports.ɵb = TooltipDirective;
     exports.ɵba = TablePagingComponent;
@@ -20845,6 +21216,7 @@
     exports.ɵec = CollapseOptionComponent;
     exports.ɵed = CollapsedItemsComponent;
     exports.ɵee = VerticalItemsComponent;
+    exports.ɵef = ButtonModule;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;