@gmerabishvili/ngx-picklist
Version:
Angular picklist component
320 lines (313 loc) • 27 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/cdk/drag-drop';
import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgxPicklistService {
constructor() { }
}
NgxPicklistService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxPicklistService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgxPicklistComponent {
constructor() {
this.selectedItemsSource = [];
this.selectedItemsTarget = [];
this.SOURCE_LIST = -1;
this.TARGET_LIST = 1;
this.showControls = true;
this.showResetControl = false;
this.disabled = false;
this.dragdropDisabled = false;
this.trackBy = (index, item) => item;
this.movedToTarget = new EventEmitter();
this.movedAllToTarget = new EventEmitter();
this.movedToSource = new EventEmitter();
this.movedAllToSource = new EventEmitter();
this.targetReordered = new EventEmitter();
this.sourceReordered = new EventEmitter();
this.targetSelected = new EventEmitter();
this.sourceSelected = new EventEmitter();
this.reset = new EventEmitter();
}
ngOnInit() {
}
// Controls
moveToTarget() {
if (this.selectedItemsSource && this.selectedItemsSource.length) {
for (let i = 0; i < this.selectedItemsSource.length; i++) {
let selectedItem = this.selectedItemsSource[i];
if (this.findIndexInList(selectedItem, this.target) == -1) {
this.target.push(this.source.splice(this.findIndexInList(selectedItem, this.source), 1)[0]);
}
}
this.movedToTarget.emit({
items: this.selectedItemsSource
});
this.selectedItemsSource = [];
}
}
moveAllToTarget() {
if (this.source) {
let movedItems = [];
for (let i = 0; i < this.source.length; i++) {
let removedItem = this.source.splice(i, 1)[0];
this.target.push(removedItem);
movedItems.push(removedItem);
i--;
}
this.movedAllToTarget.emit({
items: movedItems
});
this.selectedItemsSource = [];
}
}
moveToSource() {
if (this.selectedItemsTarget && this.selectedItemsTarget.length) {
for (let i = 0; i < this.selectedItemsTarget.length; i++) {
let selectedItem = this.selectedItemsTarget[i];
if (this.findIndexInList(selectedItem, this.source) == -1) {
this.source.push(this.target.splice(this.findIndexInList(selectedItem, this.target), 1)[0]);
}
}
this.movedToSource.emit({
items: this.selectedItemsTarget
});
this.selectedItemsTarget = [];
}
}
moveAllToSource() {
if (this.target) {
let movedItems = [];
for (let i = 0; i < this.target.length; i++) {
let removedItem = this.target.splice(i, 1)[0];
this.source.push(removedItem);
movedItems.push(removedItem);
i--;
}
this.movedAllToSource.emit({
items: movedItems
});
this.selectedItemsTarget = [];
}
}
resetItems() {
this.reset.emit();
}
// Events
onItemClick(event, item, selectedItems, callback) {
if (this.disabled) {
return;
}
let index = this.findIndexInSelection(item, selectedItems);
let selected = (index != -1);
let metaKey = (event.metaKey || event.ctrlKey || event.shiftKey);
if (selected && metaKey) {
selectedItems.splice(index, 1);
}
else {
if (!metaKey) {
selectedItems.length = 0;
}
selectedItems.push(item);
}
callback.emit({ originalEvent: event, items: selectedItems });
}
onItemKeydown(event, item, selectedItems, callback) {
let listItem = event.currentTarget;
switch (event.which) {
//down
case 40:
var nextItem = listItem.nextElementSibling;
if (nextItem) {
nextItem.focus();
}
event.preventDefault();
break;
//up
case 38:
var prevItem = listItem.previousElementSibling;
if (prevItem) {
prevItem.focus();
}
event.preventDefault();
break;
//enter
case 13:
this.onItemClick(event, item, selectedItems, callback);
event.preventDefault();
break;
}
}
onSourceItemDblClick() {
if (this.disabled) {
return;
}
this.moveToTarget();
}
onTargetItemDblClick() {
if (this.disabled) {
return;
}
this.moveToSource();
}
// Drag n Drop
onDrop(event, listType) {
const isTransfer = event.previousContainer !== event.container;
if (listType === this.SOURCE_LIST) {
if (isTransfer) {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
let selectedItemIndex = this.findIndexInList(event.item.data, this.selectedItemsTarget);
if (selectedItemIndex != -1) {
this.selectedItemsTarget.splice(selectedItemIndex, 1);
}
this.movedToSource.emit({ items: [event.item.data] });
}
else {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
this.sourceReordered.emit({ items: [event.item.data] });
}
}
else {
if (isTransfer) {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
let selectedItemIndex = this.findIndexInList(event.item.data, this.selectedItemsSource);
if (selectedItemIndex != -1) {
this.selectedItemsSource.splice(selectedItemIndex, 1);
}
this.movedToTarget.emit({ items: [event.item.data] });
}
else {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
this.targetReordered.emit({ items: [event.item.data] });
}
}
}
// Validations
sourceMoveDisabled() {
if (this.disabled || !this.selectedItemsSource.length) {
return true;
}
}
moveToTargetDisabled() {
return this.disabled || this.isEmpty(this.selectedItemsSource);
}
moveAllToTargetDisabled() {
return this.disabled || this.isEmpty(this.source);
}
moveToSourceDisabled() {
return this.disabled || this.isEmpty(this.selectedItemsTarget);
}
moveAllToSourceDisabled() {
return this.disabled || this.isEmpty(this.target);
}
resetDisabled() {
return this.disabled;
}
// Utils
isSelected(item, selectedItems) {
return this.findIndexInSelection(item, selectedItems) != -1;
}
findIndexInSelection(item, selectedItems) {
return this.findIndexInList(item, selectedItems);
}
findIndexInList(item, list) {
let index = -1;
if (list) {
for (let i = 0; i < list.length; i++) {
if (list[i] == item) {
index = i;
break;
}
}
}
return index;
}
isEmpty(value) {
return (value === null || value === undefined || value === '' ||
(Array.isArray(value) && value.length === 0) ||
(!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0));
}
}
NgxPicklistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxPicklistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: NgxPicklistComponent, selector: "ngx-picklist", inputs: { source: "source", target: "target", sourceHeaderTemplate: "sourceHeaderTemplate", targetHeaderTemplate: "targetHeaderTemplate", itemTemplate: "itemTemplate", showControls: "showControls", showResetControl: "showResetControl", styleClass: "styleClass", disabled: "disabled", dragdropDisabled: "dragdropDisabled", trackBy: "trackBy" }, outputs: { movedToTarget: "movedToTarget", movedAllToTarget: "movedAllToTarget", movedToSource: "movedToSource", movedAllToSource: "movedAllToSource", targetReordered: "targetReordered", sourceReordered: "sourceReordered", targetSelected: "targetSelected", sourceSelected: "sourceSelected", reset: "reset" }, ngImport: i0, template: "<div class=\"ngx-picklist\" [class]=\"styleClass\" cdkDropListGroup>\n <div class=\"ngx-picklist-list-wrapper source-wrapper\">\n <div class=\"ngx-picklist-header\" *ngIf=\"sourceHeaderTemplate\">\n <ng-container *ngTemplateOutlet=\"sourceHeaderTemplate\"></ng-container>\n </div>\n <ul class=\"ngx-picklist-list source\"\n cdkDropList\n [cdkDropListData]=\"source\"\n (cdkDropListDropped)=\"onDrop($event, SOURCE_LIST)\"\n role=\"listbox\"\n aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"trackBy\" let-i=\"index\">\n <li\n [ngClass]=\"{'ngx-picklist-item':true, 'highlight':isSelected(item,selectedItemsSource), 'disabled': disabled}\"\n cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"dragdropDisabled || disabled\"\n (click)=\"onItemClick($event, item, selectedItemsSource, sourceSelected)\"\n (dblclick)=\"onSourceItemDblClick()\"\n (keydown)=\"onItemKeydown($event, item, selectedItemsSource, sourceSelected)\"\n tabindex=\"0\" role=\"option\"\n [attr.aria-selected]=\"isSelected(item, selectedItemsSource)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n </ul>\n </div>\n\n <div class=\"ngx-picklist-buttons\" *ngIf=\"showControls\">\n <button type=\"button\" class=\"move-to-target\" aria-label=\"Move to target\"\n [disabled]=\"moveToTargetDisabled()\"\n (click)=\"moveToTarget()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">chevron_right</i>\n </button>\n <button type=\"button\" class=\"move-all-to-target\" aria-label=\"Move all to target\"\n [disabled]=\"moveAllToTargetDisabled()\"\n (click)=\"moveAllToTarget()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">keyboard_double_arrow_right</i>\n </button>\n <button type=\"button\" class=\"move-to-source\" aria-label=\"Move to source\"\n [disabled]=\"moveToSourceDisabled()\"\n (click)=\"moveToSource()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">chevron_left</i>\n </button>\n <button type=\"button\" class=\"move-all-to-source\" aria-label=\"Move all to source\"\n [disabled]=\"moveAllToSourceDisabled()\"\n (click)=\"moveAllToSource()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">keyboard_double_arrow_left</i>\n </button>\n <button type=\"button\" class=\"reset\" aria-label=\"Reset\" *ngIf=\"showResetControl\"\n [disabled]=\"resetDisabled()\"\n (click)=\"resetItems()\">\n <i class=\"material-icons\" aria-label=\"refresh\">refresh</i>\n </button>\n </div>\n\n <div class=\"ngx-picklist-list-wrapper target-wrapper\">\n <div class=\"ngx-picklist-header\" *ngIf=\"targetHeaderTemplate\">\n <ng-container *ngTemplateOutlet=\"targetHeaderTemplate\"></ng-container>\n </div>\n <ul class=\"ngx-picklist-list target\"\n cdkDropList\n [cdkDropListData]=\"target\"\n (cdkDropListDropped)=\"onDrop($event, TARGET_LIST)\"\n role=\"listbox\"\n aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"trackBy\" let-i=\"index\">\n <li\n [ngClass]=\"{'ngx-picklist-item':true, 'highlight':isSelected(item, selectedItemsTarget),'disabled': disabled}\"\n cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"dragdropDisabled || disabled\"\n (click)=\"onItemClick($event, item, selectedItemsTarget, targetSelected)\"\n (dblclick)=\"onTargetItemDblClick()\"\n (keydown)=\"onItemKeydown($event, item, selectedItemsTarget, targetSelected)\"\n tabindex=\"0\" role=\"option\"\n [attr.aria-selected]=\"isSelected(item, selectedItemsTarget)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n </ul>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.ngx-picklist{display:flex}.ngx-picklist .ngx-picklist-list-wrapper{flex:1 1 50%}.ngx-picklist .ngx-picklist-list-wrapper.source-wrapper{margin-right:20px}.ngx-picklist .ngx-picklist-list-wrapper.target-wrapper{margin-left:20px}.ngx-picklist .ngx-picklist-list{list-style-type:none;background:#ffffff;border:1px solid #dee2e6;padding:.75rem 0;border-bottom-right-radius:6px;border-bottom-left-radius:6px;margin:0;height:30rem;min-height:12rem;overflow:auto}.ngx-picklist .ngx-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.ngx-picklist .ngx-picklist-buttons button{color:#fff;background:#306bff;border:1px solid #306bff;padding:.3rem .4rem;border-radius:6px;margin-bottom:.5rem;cursor:pointer}.ngx-picklist .ngx-picklist-buttons button.reset{background:#f44336;border:1px solid #f44336}.ngx-picklist .ngx-picklist-buttons button.reset:hover:not(:disabled){background:#ea1c0d;color:#fff}.ngx-picklist .ngx-picklist-buttons button:hover:not(:disabled,.reset){background:#0048fc;color:#fff}.ngx-picklist .ngx-picklist-buttons button:disabled{opacity:.6;cursor:default}.ngx-picklist .ngx-picklist-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;margin:0;color:#495057;background:#ffffff;overflow:hidden;box-sizing:border-box}.ngx-picklist .ngx-picklist-item:hover:not(.disabled,.highlight){background:#e9ecef;color:#495057}.ngx-picklist .ngx-picklist-item.disabled{opacity:.6}.ngx-picklist .ngx-picklist-item.highlight{color:#306bff;background:#EFF6FF}.ngx-picklist-list.cdk-drop-list-dragging .ngx-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.ngx-picklist-item:not(.cdk-drag-disabled){cursor:move}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{list-style:none;padding:.75rem 1.25rem;margin:0;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-picklist', template: "<div class=\"ngx-picklist\" [class]=\"styleClass\" cdkDropListGroup>\n <div class=\"ngx-picklist-list-wrapper source-wrapper\">\n <div class=\"ngx-picklist-header\" *ngIf=\"sourceHeaderTemplate\">\n <ng-container *ngTemplateOutlet=\"sourceHeaderTemplate\"></ng-container>\n </div>\n <ul class=\"ngx-picklist-list source\"\n cdkDropList\n [cdkDropListData]=\"source\"\n (cdkDropListDropped)=\"onDrop($event, SOURCE_LIST)\"\n role=\"listbox\"\n aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"trackBy\" let-i=\"index\">\n <li\n [ngClass]=\"{'ngx-picklist-item':true, 'highlight':isSelected(item,selectedItemsSource), 'disabled': disabled}\"\n cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"dragdropDisabled || disabled\"\n (click)=\"onItemClick($event, item, selectedItemsSource, sourceSelected)\"\n (dblclick)=\"onSourceItemDblClick()\"\n (keydown)=\"onItemKeydown($event, item, selectedItemsSource, sourceSelected)\"\n tabindex=\"0\" role=\"option\"\n [attr.aria-selected]=\"isSelected(item, selectedItemsSource)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n </ul>\n </div>\n\n <div class=\"ngx-picklist-buttons\" *ngIf=\"showControls\">\n <button type=\"button\" class=\"move-to-target\" aria-label=\"Move to target\"\n [disabled]=\"moveToTargetDisabled()\"\n (click)=\"moveToTarget()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">chevron_right</i>\n </button>\n <button type=\"button\" class=\"move-all-to-target\" aria-label=\"Move all to target\"\n [disabled]=\"moveAllToTargetDisabled()\"\n (click)=\"moveAllToTarget()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">keyboard_double_arrow_right</i>\n </button>\n <button type=\"button\" class=\"move-to-source\" aria-label=\"Move to source\"\n [disabled]=\"moveToSourceDisabled()\"\n (click)=\"moveToSource()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">chevron_left</i>\n </button>\n <button type=\"button\" class=\"move-all-to-source\" aria-label=\"Move all to source\"\n [disabled]=\"moveAllToSourceDisabled()\"\n (click)=\"moveAllToSource()\">\n <i class=\"material-icons\" aria-label=\"chevron_right\">keyboard_double_arrow_left</i>\n </button>\n <button type=\"button\" class=\"reset\" aria-label=\"Reset\" *ngIf=\"showResetControl\"\n [disabled]=\"resetDisabled()\"\n (click)=\"resetItems()\">\n <i class=\"material-icons\" aria-label=\"refresh\">refresh</i>\n </button>\n </div>\n\n <div class=\"ngx-picklist-list-wrapper target-wrapper\">\n <div class=\"ngx-picklist-header\" *ngIf=\"targetHeaderTemplate\">\n <ng-container *ngTemplateOutlet=\"targetHeaderTemplate\"></ng-container>\n </div>\n <ul class=\"ngx-picklist-list target\"\n cdkDropList\n [cdkDropListData]=\"target\"\n (cdkDropListDropped)=\"onDrop($event, TARGET_LIST)\"\n role=\"listbox\"\n aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"trackBy\" let-i=\"index\">\n <li\n [ngClass]=\"{'ngx-picklist-item':true, 'highlight':isSelected(item, selectedItemsTarget),'disabled': disabled}\"\n cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"dragdropDisabled || disabled\"\n (click)=\"onItemClick($event, item, selectedItemsTarget, targetSelected)\"\n (dblclick)=\"onTargetItemDblClick()\"\n (keydown)=\"onItemKeydown($event, item, selectedItemsTarget, targetSelected)\"\n tabindex=\"0\" role=\"option\"\n [attr.aria-selected]=\"isSelected(item, selectedItemsTarget)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n </ul>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.ngx-picklist{display:flex}.ngx-picklist .ngx-picklist-list-wrapper{flex:1 1 50%}.ngx-picklist .ngx-picklist-list-wrapper.source-wrapper{margin-right:20px}.ngx-picklist .ngx-picklist-list-wrapper.target-wrapper{margin-left:20px}.ngx-picklist .ngx-picklist-list{list-style-type:none;background:#ffffff;border:1px solid #dee2e6;padding:.75rem 0;border-bottom-right-radius:6px;border-bottom-left-radius:6px;margin:0;height:30rem;min-height:12rem;overflow:auto}.ngx-picklist .ngx-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.ngx-picklist .ngx-picklist-buttons button{color:#fff;background:#306bff;border:1px solid #306bff;padding:.3rem .4rem;border-radius:6px;margin-bottom:.5rem;cursor:pointer}.ngx-picklist .ngx-picklist-buttons button.reset{background:#f44336;border:1px solid #f44336}.ngx-picklist .ngx-picklist-buttons button.reset:hover:not(:disabled){background:#ea1c0d;color:#fff}.ngx-picklist .ngx-picklist-buttons button:hover:not(:disabled,.reset){background:#0048fc;color:#fff}.ngx-picklist .ngx-picklist-buttons button:disabled{opacity:.6;cursor:default}.ngx-picklist .ngx-picklist-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;margin:0;color:#495057;background:#ffffff;overflow:hidden;box-sizing:border-box}.ngx-picklist .ngx-picklist-item:hover:not(.disabled,.highlight){background:#e9ecef;color:#495057}.ngx-picklist .ngx-picklist-item.disabled{opacity:.6}.ngx-picklist .ngx-picklist-item.highlight{color:#306bff;background:#EFF6FF}.ngx-picklist-list.cdk-drop-list-dragging .ngx-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.ngx-picklist-item:not(.cdk-drag-disabled){cursor:move}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{list-style:none;padding:.75rem 1.25rem;margin:0;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { source: [{
type: Input
}], target: [{
type: Input
}], sourceHeaderTemplate: [{
type: Input
}], targetHeaderTemplate: [{
type: Input
}], itemTemplate: [{
type: Input
}], showControls: [{
type: Input
}], showResetControl: [{
type: Input
}], styleClass: [{
type: Input
}], disabled: [{
type: Input
}], dragdropDisabled: [{
type: Input
}], trackBy: [{
type: Input
}], movedToTarget: [{
type: Output
}], movedAllToTarget: [{
type: Output
}], movedToSource: [{
type: Output
}], movedAllToSource: [{
type: Output
}], targetReordered: [{
type: Output
}], sourceReordered: [{
type: Output
}], targetSelected: [{
type: Output
}], sourceSelected: [{
type: Output
}], reset: [{
type: Output
}] } });
class NgxPicklistModule {
}
NgxPicklistModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxPicklistModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistModule, declarations: [NgxPicklistComponent], imports: [CommonModule,
DragDropModule], exports: [NgxPicklistComponent] });
NgxPicklistModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistModule, imports: [CommonModule,
DragDropModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: NgxPicklistModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxPicklistComponent
],
imports: [
CommonModule,
DragDropModule
],
exports: [
NgxPicklistComponent
]
}]
}] });
/*
* Public API Surface of ngx-picklist
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxPicklistComponent, NgxPicklistModule, NgxPicklistService };
//# sourceMappingURL=gmerabishvili-ngx-picklist.mjs.map