primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [.
* @group Props
*/
filterBy;
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. Use sourceTrackBy or targetTrackBy in case different algorithms are needed per list.
* @group Props
*/
trackBy = (index, item) => item;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy in source list, default algorithm checks for object identity.
* @group Props
*/
sourceTrackBy;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy in target list, default algorithm checks for object identity.
* @group Props
*/
targetTrackBy;
/**
* Whether to show filter input for source list when filterBy is enabled.
* @group Props
*/
showSourceFilter = true;
/**
* Whether to show filter input for target list when filterBy is enabled.
* @group Props
*/
showTargetFilter = true;
/**
* Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
* @group Props
*/
metaKeySelection = true;
/**
* Whether to enable dragdrop based reordering.
* @group Props
*/
dragdrop = false;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Inline style of the source list element.
* @group Props
*/
sourceStyle;
/**
* Inline style of the target list element.
* @group Props
*/
targetStyle;
/**
* Whether to show buttons of source list.
* @group Props
*/
showSourceControls = true;
/**
* Whether to show buttons of target list.
* @group Props
*/
showTargetControls = true;
/**
* Placeholder text on source filter input.
* @group Props
*/
sourceFilterPlaceholder;
/**
* Placeholder text on target filter input.
* @group Props
*/
targetFilterPlaceholder;
/**
* When present, it specifies that the component should be disabled.
* @group Props
*/
disabled = false;
/**
* Defines a string that labels the filter input of source list.
* @group Props
*/
ariaSourceFilterLabel;
/**
* Defines a string that labels the filter input of target list.
* @group Props
*/
ariaTargetFilterLabel;
/**
* Defines how the items are filtered.
* @group Props
*/
filterMatchMode = 'contains';
/**
* Whether to displays rows with alternating colors.
* @group Props
*/
stripedRows;
/**
* Keeps selection on the transfer list.
* @group Props
*/
keepSelection = false;
/**
* Indicates the width of the screen at which the component should change its behavior.
* @group Props
*/
get breakpoint() {
return this._breakpoint;
}
set breakpoint(value) {
if (value !== this._breakpoint) {
this._breakpoint = value;
if (isPlatformBrowser(this.platformId)) {
this.destroyMedia();
this.initMedia();
}
}
}
/**
* Callback to invoke when items are moved from target to source.
* @param {PickListMoveToSourceEvent} event - custom move to source event.
* @group Emits
*/
onMoveToSource = new EventEmitter();
/**
* Callback to invoke when all items are moved from target to source.
* @param {PickListMoveAllToSourceEvent} event - custom move all to source event.
* @group Emits
*/
onMoveAllToSource = new EventEmitter();
/**
* Callback to invoke when all items are moved from source to target.
* @param {PickListMoveAllToTargetEvent} event - custom move all to target event.
* @group Emits
*/
onMoveAllToTarget = new EventEmitter();
/**
* Callback to invoke when items are moved from source to target.
* @param {PickListMoveToTargetEvent} event - custom move to target event.
* @group Emits
*/
onMoveToTarget = new EventEmitter();
/**
* Callback to invoke when items are reordered within source list.
* @param {PickListSourceReorderEvent} event - custom source reorder event.
* @group Emits
*/
onSourceReorder = new EventEmitter();
/**
* Callback to invoke when items are reordered within target list.
* @param {PickListTargetReorderEvent} event - custom target reorder event.
* @group Emits
*/
onTargetReorder = new EventEmitter();
/**
* Callback to invoke when items are selected within source list.
* @param {PickListSourceSelectEvent} event - custom source select event.
* @group Emits
*/
onSourceSelect = new EventEmitter();
/**
* Callback to invoke when items are selected within target list.
* @param {PickListTargetSelectEvent} event - custom target select event.
* @group Emits
*/
onTargetSelect = new EventEmitter();
/**
* Callback to invoke when the source list is filtered
* @param {PickListSourceFilterEvent} event - custom source filter event.
* @group Emits
*/
onSourceFilter = new EventEmitter();
/**
* Callback to invoke when the target list is filtered
* @param {PickListTargetFilterEvent} event - custom target filter event.
* @group Emits
*/
onTargetFilter = new EventEmitter();
listViewSourceChild;
listViewTargetChild;
sourceFilterViewChild;
targetFilterViewChild;
templates;
_breakpoint = '960px';
itemTemplate;
moveTopIconTemplate;
moveUpIconTemplate;
moveDownIconTemplate;
moveBottomIconTemplate;
moveToTargetIconTemplate;
moveAllToTargetIconTemplate;
moveToSourceIconTemplate;
moveAllToSourceIconTemplate;
targetFilterIconTemplate;
sourceFilterIconTemplate;
visibleOptionsSource;
visibleOptionsTarget;
selectedItemsSource = [];
selectedItemsTarget = [];
reorderedListElement;
movedUp;
movedDown;
itemTouched;
styleElement;
id = UniqueComponentId();
filterValueSource;
filterValueTarget;
fromListType;
emptyMessageSourceTemplate;
emptyFilterMessageSourceTemplate;
emptyMessageTargetTemplate;
emptyFilterMessageTargetTemplate;
sourceHeaderTemplate;
targetHeaderTemplate;
sourceFilterTemplate;
targetFilterTemplate;
sourceFilterOptions;
targetFilterOptions;
SOURCE_LIST = -1;
TARGET_LIST = 1;
window;
media;
viewChanged;
mediaChangeListener;
constructor(document, platformId, renderer, el, cd, filterService) {
this.document = document;
this.platformId = platformId;
this.renderer = renderer;
this.el = el;
this.cd = cd;
this.filterService = filterService;
this.window = this.document.defaultView;
}
ngOnInit() {
if (this.responsive) {
this.createStyle();
this.initMedia();
}
if (this.filterBy) {
this.sourceFilterOptions = {
filter: (value) => this.filterSource(value),
reset: () => this.resetSourceFilter()
};
this.targetFilterOptions = {
filter: (value) => this.filterTarget(value),
reset: () => this.resetTargetFilter()
};
}
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'item':
this.itemTemplate = item.template;
break;
case 'sourceHeader':
this.sourceHeaderTemplate = item.template;
break;
case 'targetHeader':
this.targetHeaderTemplate = item.template;
break;
case 'sourceFilter':
this.sourceFilterTemplate = item.template;
break;
case 'targetFilter':
this.targetFilterTemplate = item.template;
break;
case 'emptymessagesource':
this.emptyMessageSourceTemplate = item.template;
break;
case 'emptyfiltermessagesource':
this.emptyFilterMessageSourceTemplate = item.template;
break;
case 'emptymessagetarget':
this.emptyMessageTargetTemplate = item.template;
break;
case 'emptyfiltermessagetarget':
this.emptyFilterMessageTargetTemplate = item.template;
break;
case 'moveupicon':
this.moveUpIconTemplate = item.template;
break;
case 'movetopicon':
this.moveTopIconTemplate = item.template;
break;
case 'movedownicon':
this.moveDownIconTemplate = item.template;
break;
case 'movebottomicon':
this.moveBottomIconTemplate = item.template;
break;
case 'movetotargeticon':
this.moveToTargetIconTemplate = item.template;
break;
case 'movealltotargeticon':
this.moveAllToTargetIconTemplate = item.template;
break;
case 'movetosourceicon':
this.moveToSourceIconTemplate = item.template;
break;
case 'movealltosourceicon':
this.moveAllToSourceIconTemplate = item.template;
break;
case 'targetfiltericon':
this.targetFilterIconTemplate = item.template;
break;
case 'sourcefiltericon':
this.sourceFilterIconTemplate = item.template;
break;
default:
this.itemTemplate = item.template;
break;
}
});
}
ngAfterViewChecked() {
if (this.movedUp || this.movedDown) {
let listItems = DomHandler.find(this.reorderedListElement, 'li.p-highlight');
let listItem;
if (this.movedUp)
listItem = listItems[0];
else
listItem = listItems[listItems.length - 1];
DomHandler.scrollInView(this.reorderedListElement, listItem);
this.movedUp = false;
this.movedDown = false;
this.reorderedListElement = null;
}
}
onItemClick(event, item, selectedItems, callback) {
if (this.disabled) {
return;
}
let index = this.findIndexInSelection(item, selectedItems);
let selected = index != -1;
let metaSelection = this.itemTouched ? false : this.metaKeySelection;
if (metaSelection) {
let metaKey = event.metaKey || event.ctrlKey || event.shiftKey;
if (selected && metaKey) {
selectedItems.splice(index, 1);
}
else {
if (!metaKey) {
selectedItems.length = 0;
}
selectedItems.push(item);
}
}
else {
if (selected)
selectedItems.splice(index, 1);
else
selectedItems.push(item);
}
callback.emit({ originalEvent: event, items: selectedItems });
this.itemTouched = false;
}
onSourceItemDblClick() {
if (this.disabled) {
return;
}
this.moveRight();
}
onTargetItemDblClick() {
if (this.disabled) {
return;
}
this.moveLeft();
}
onFilter(event, listType) {
let query = event.target.value;
if (listType === this.SOURCE_LIST)
this.filterSource(query);
else if (listType === this.TARGET_LIST)
this.filterTarget(query);
}
filterSource(value = '') {
this.filterValueSource = value.trim().toLocaleLowerCase(this.filterLocale);
this.filter(this.source, this.SOURCE_LIST);
}
filterTarget(value = '') {
this.filterValueTarget = value.trim().toLocaleLowerCase(this.filterLocale);
this.filter(this.target, this.TARGET_LIST);
}
filter(data, listType) {
let searchFields = this.filterBy.split(',');
if (listType === this.SOURCE_LIST) {
this.visibleOptionsSource = this.filterService.filter(data, searchFields, this.filterValueSource, this.filterMatchMode, this.filterLocale);
this.onSourceFilter.emit({ query: this.filterValueSource, value: this.visibleOptionsSource });
}
else if (listType === this.TARGET_LIST) {
this.visibleOptionsTarget = this.filterService.filter(data, searchFields, this.filterValueTarget, this.filterMatchMode, this.filterLocale);
this.onTargetFilter.emit({ query: this.filterValueTarget, value: this.visibleOptionsTarget });
}
}
isItemVisible(item, listType) {
if (listType == this.SOURCE_LIST)
return this.isVisibleInList(this.visibleOptionsSource, item, this.filterValueSource);
else
return this.isVisibleInList(this.visibleOptionsTarget, item, this.filterValueTarget);
}
isEmpty(listType) {
if (listType == this.SOURCE_LIST)
return this.filterValueSource ? !this.visibleOptionsSource || this.visibleOptionsSource.length === 0 : !this.source || this.source.length === 0;
else
return this.filterValueTarget ? !this.visibleOptionsTarget || this.visibleOptionsTarget.length === 0 : !this.target || this.target.length === 0;
}
isVisibleInList(data, item, filterValue) {
if (filterValue && filterValue.trim().length) {
for (let i = 0; i < data.length; i++) {
if (item == data[i]) {
return true;
}
}
}
else {
return true;
}
}
onItemTouchEnd() {
if (this.disabled) {
return;
}
this.itemTouched = true;
}
sortByIndexInList(items, list) {
return items.sort((item1, item2) => ObjectUtils.findIndexInList(item1, list) - ObjectUtils.findIndexInList(item2, list));
}
moveUp(listElement, list, selectedItems, callback, listType) {
if (selectedItems && selectedItems.length) {
selectedItems = this.sortByIndexInList(selectedItems, list);
for (let i = 0; i < selectedItems.length; i++) {
let selectedItem = selectedItems[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
if (selectedItemIndex != 0) {
let movedItem = list[selectedItemIndex];
let temp = list[selectedItemIndex - 1];
list[selectedItemIndex - 1] = movedItem;
list[selectedItemIndex] = temp;
}
else {
break;
}
}
if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
this.filter(list, listType);
this.movedUp = true;
this.reorderedListElement = listElement;
callback.emit({ items: selectedItems });
}
}
moveTop(listElement, list, selectedItems, callback, listType) {
if (selectedItems && selectedItems.length) {
selectedItems = this.sortByIndexInList(selectedItems, list);
for (let i = 0; i < selectedItems.length; i++) {
let selectedItem = selectedItems[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
if (selectedItemIndex != 0) {
let movedItem = list.splice(selectedItemIndex, 1)[0];
list.unshift(movedItem);
}
else {
break;
}
}
if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
this.filter(list, listType);
listElement.scrollTop = 0;
callback.emit({ items: selectedItems });
}
}
moveDown(listElement, list, selectedItems, callback, listType) {
if (selectedItems && selectedItems.length) {
selectedItems = this.sortByIndexInList(selectedItems, list);
for (let i = selectedItems.length - 1; i >= 0; i--) {
let selectedItem = selectedItems[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
if (selectedItemIndex != list.length - 1) {
let movedItem = list[selectedItemIndex];
let temp = list[selectedItemIndex + 1];
list[selectedItemIndex + 1] = movedItem;
list[selectedItemIndex] = temp;
}
else {
break;
}
}
if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
this.filter(list, listType);
this.movedDown = true;
this.reorderedListElement = listElement;
callback.emit({ items: selectedItems });
}
}
moveBottom(listElement, list, selectedItems, callback, listType) {
if (selectedItems && selectedItems.length) {
selectedItems = this.sortByIndexInList(selectedItems, list);
for (let i = selectedItems.length - 1; i >= 0; i--) {
let selectedItem = selectedItems[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
if (selectedItemIndex != list.length - 1) {
let movedItem = list.splice(selectedItemIndex, 1)[0];
list.push(movedItem);
}
else {
break;
}
}
if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
this.filter(list, listType);
listElement.scrollTop = listElement.scrollHeight;
callback.emit({ items: selectedItems });
}
}
moveRight() {
if (this.selectedItemsSource && this.selectedItemsSource.length) {
for (let i = 0; i < this.selectedItemsSource.length; i++) {
let selectedItem = this.selectedItemsSource[i];
if (ObjectUtils.findIndexInList(selectedItem, this.target) == -1) {
this.target?.push(this.source?.splice(ObjectUtils.findIndexInList(selectedItem, this.source), 1)[0]);
if (this.visibleOptionsSource)
this.visibleOptionsSource.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsSource), 1);
}
}
this.onMoveToTarget.emit({
items: this.selectedItemsSource
});
if (this.keepSelection) {
this.selectedItemsTarget = [...this.selectedItemsTarget, ...this.selectedItemsSource];
}
this.selectedItemsSource = [];
if (this.filterValueTarget) {
this.filter(this.target, this.TARGET_LIST);
}
}
}
moveAllRight() {
if (this.source) {
let movedItems = [];
for (let i = 0; i < this.source.length; i++) {
if (this.isItemVisible(this.source[i], this.SOURCE_LIST)) {
let removedItem = this.source.splice(i, 1)[0];
this.target?.push(removedItem);
movedItems.push(removedItem);
i--;
}
}
this.onMoveAllToTarget.emit({
items: movedItems
});
if (this.keepSelection) {
this.selectedItemsTarget = [...this.selectedItemsTarget, ...this.selectedItemsSource];
}
this.selectedItemsSource = [];
if (this.filterValueTarget) {
this.filter(this.target, this.TARGET_LIST);
}
this.visibleOptionsSource = [];
}
}
moveLeft() {
if (this.selectedItemsTarget && this.selectedItemsTarget.length) {
for (let i = 0; i < this.selectedItemsTarget.length; i++) {
let selectedItem = this.selectedItemsTarget[i];
if (ObjectUtils.findIndexInList(selectedItem, this.source) == -1) {
this.source?.push(this.target?.splice(ObjectUtils.findIndexInList(selectedItem, this.target), 1)[0]);
if (this.visibleOptionsTarget)
this.visibleOptionsTarget.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsTarget), 1)[0];
}
}
this.onMoveToSource.emit({
items: this.selectedItemsTarget
});
if (this.keepSelection) {
this.selectedItemsSource = [...this.selectedItemsSource, ...this.selectedItemsTarget];
}
this.selectedItemsTarget = [];
if (this.filterValueSource) {
this.filter(this.source, this.SOURCE_LIST);
}
}
}
moveAllLeft() {
if (this.target) {
let movedItems = [];
for (let i = 0; i < this.target.length; i++) {
if (this.isItemVisible(this.target[i], this.TARGET_LIST)) {
let removedItem = this.target.splice(i, 1)[0];
this.source?.push(removedItem);
movedItems.push(removedItem);
i--;
}
}
this.onMoveAllToSource.emit({
items: movedItems
});
if (this.keepSelection) {
this.selectedItemsSource = [...this.selectedItemsSource, ...this.selectedItemsTarget];
}
this.selectedItemsTarget = [];
if (this.filterValueSource) {
this.filter(this.source, this.SOURCE_LIST);
}
this.visibleOptionsTarget = [];
}
}
isSelected(item, selectedItems) {
return this.findIndexInSelection(item, selectedItems) != -1;
}
findIndexInSelection(item, selectedItems) {
return ObjectUtils.findIndexInList(item, selectedItems);
}
onDrop(event, listType) {
let isTransfer = event.previousContainer !== event.container;
let dropIndexes = this.getDropIndexes(event.previousIndex, event.currentIndex, listType, isTransfer, event.item.data);
if (listType === this.SOURCE_LIST) {
if (isTransfer) {
transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
let selectedItemIndex = ObjectUtils.findIndexInList(event.item.data, this.selectedItemsTarget);
if (selectedItemIndex != -1) {
this.selectedItemsTarget.splice(selectedItemIndex, 1);
if (this.keepSelection) {
this.selectedItemsTarget.push(event.item.data);
}
}
if (this.visibleOptionsTarget)
this.visibleOptionsTarget.splice(event.previousIndex, 1);
this.onMoveToSource.emit({ items: [event.item.data] });
}
else {
moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
this.onSourceReorder.emit({ items: [event.item.data] });
}
if (this.filterValueSource) {
this.filter(this.source, this.SOURCE_LIST);
}
}
else {
if (isTransfer) {
transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
let selectedItemIndex = ObjectUtils.findIndexInList(event.item.data, this.selectedItemsSource);
if (selectedItemIndex != -1) {
this.selectedItemsSource.splice(selectedItemIndex, 1);
if (this.keepSelection) {
this.selectedItemsTarget.push(event.item.data);
}
}
if (this.visibleOptionsSource)
this.visibleOptionsSource.splice(event.previousIndex, 1);
this.onMoveToTarget.emit({ items: [event.item.data] });
}
else {
moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
this.onTargetReorder.emit({ items: [event.item.data] });
}
if (this.filterValueTarget) {
this.filter(this.target, this.TARGET_LIST);
}
}
}
getDropIndexes(fromIndex, toIndex, droppedList, isTransfer, data) {
let previousIndex, currentIndex;
if (droppedList === this.SOURCE_LIST) {
previousIndex = isTransfer ? (this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex) : this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex;
currentIndex = this.filterValueSource ? this.findFilteredCurrentIndex(this.visibleOptionsSource, toIndex, this.source) : toIndex;
}
else {
previousIndex = isTransfer ? (this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex) : this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex;
currentIndex = this.filterValueTarget ? this.findFilteredCurrentIndex(this.visibleOptionsTarget, toIndex, this.target) : toIndex;
}
return { previousIndex, currentIndex };
}
findFilteredCurrentIndex(visibleOptions, index, options) {
if (visibleOptions.length === index) {
let toIndex = ObjectUtils.findIndexInList(visibleOptions[index - 1], options);
return toIndex + 1;
}
else {
return ObjectUtils.findIndexInList(visibleOptions[index], options);
}
}
resetSourceFilter() {
this.visibleOptionsSource = null;
this.filterValueSource = null;
this.sourceFilterViewChild && (this.sourceFilterViewChild.nativeElement.value = '');
}
resetTargetFilter() {
this.visibleOptionsTarget = null;
this.filterValueTarget = null;
this.targetFilterViewChild && (this.targetFilterViewChild.nativeElement.value = '');
}
resetFilter() {
this.resetSourceFilter();
this.resetTargetFilter();
}
onItemKeydown(event, item, selectedItems, callback) {
let listItem = event.currentTarget;
switch (event.which) {
//down
case 40:
var nextItem = this.findNextItem(listItem);
if (nextItem) {
nextItem.focus();
}
event.preventDefault();
break;
//up
case 38:
var prevItem = this.findPrevItem(listItem);
if (prevItem) {
prevItem.focus();
}
event.preventDefault();
break;
//enter
case 13:
this.onItemClick(event, item, selectedItems, callback);
event.preventDefault();
break;
}
}
findNextItem(item) {
let nextItem = item.nextElementSibling;
if (nextItem)
return !DomHandler.hasClass(nextItem, 'p-picklist-item') || DomHandler.isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem;
else
return null;
}
findPrevItem(item) {
let prevItem = item.previousElementSibling;
if (prevItem)
return !DomHandler.hasClass(prevItem, 'p-picklist-item') || DomHandler.isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem;
else
return null;
}
initMedia() {
if (isPlatformBrowser(this.platformId)) {
this.media = this.window.matchMedia(`(max-width: ${this.breakpoint})`);
this.viewChanged = this.media.matches;
this.bindMediaChangeListener();
}
}
destroyMedia() {
this.unbindMediaChangeListener();
}
bindMediaChangeListener() {
if (this.media && !this.mediaChangeListener) {
this.mediaChangeListener = this.renderer.listen(this.media, 'change', (event) => {
this.viewChanged = event.matches;
this.cd.markForCheck();
});
}
}
unbindMediaChangeListener() {
if (this.mediaChangeListener) {
this.mediaChangeListener();
this.mediaChangeListener = null;
}
}
createStyle() {
if (isPlatformBrowser(this.platformId)) {
if (!this.styleElement) {
this.renderer.setAttribute(this.el.nativeElement.children[0], this.id, '');
this.styleElement = this.renderer.createElement('style');
this.renderer.setAttribute(this.styleElement, 'type', 'text/css');
this.renderer.appendChild(this.document.head, this.styleElement);
let innerHTML = `
@media screen and (max-width: ${this.breakpoint}) {
.p-picklist[${this.id}] {
flex-direction: column;
}
.p-picklist[${this.id}] .p-picklist-buttons {
padding: var(--content-padding);
flex-direction: row;
}
.p-picklist[${this.id}] .p-picklist-buttons .p-button {
margin-right: var(--inline-spacing);
margin-bottom: 0;
}
.p-picklist[${this.id}] .p-picklist-buttons .p-button:last-child {
margin-right: 0;
}
}`;
this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
}
}
}
sourceMoveDisabled() {
if (this.disabled || !this.selectedItemsSource.length) {
return true;
}
}
targetMoveDisabled() {
if (this.disabled || !this.selectedItemsTarget.length) {
return true;
}
}
moveRightDisabled() {
return this.disabled || ObjectUtils.isEmpty(this.selectedItemsSource);
}
moveLeftDisabled() {
return this.disabled || ObjectUtils.isEmpty(this.selectedItemsTarget);
}
moveAllRightDisabled() {
return this.disabled || ObjectUtils.isEmpty(this.source);
}
moveAllLeftDisabled() {
return this.disabled || ObjectUtils.isEmpty(this.target);
}
destroyStyle() {
if (this.styleElement) {
this.renderer.removeChild(this.document.head, this.styleElement);
this.styleElement = null;
``;
}
}
ngOnDestroy() {
this.destroyStyle();
this.destroyMedia();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickList, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PickList, selector: "p-pickList", inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: "responsive", filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: "showSourceFilter", showTargetFilter: "showTargetFilter", metaKeySelection: "metaKeySelection", dragdrop: "dragdrop", style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: "showSourceControls", showTargetControls: "showTargetControls", sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: "disabled", ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", stripedRows: "stripedRows", keepSelection: "keepSelection", breakpoint: "breakpoint" }, outputs: { onMoveToSource: "onMoveToSource", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onMoveToTarget: "onMoveToTarget", onSourceReorder: "onSourceReorder", onTargetReorder: "onTargetReorder", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect", onSourceFilter: "onSourceFilter", onTargetFilter: "onTargetFilter" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewSourceChild", first: true, predicate: ["sourcelist"], descendants: true }, { propertyName: "listViewTargetChild", first: true, predicate: ["targetlist"], descendants: true }, { propertyName: "sourceFilterViewChild", first: true, predicate: ["sourceFilter"], descendants: true }, { propertyName: "targetFilterViewChild", first: true, predicate: ["targetFilter"], descendants: true }], ngImport: i0, template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="{ 'p-picklist p-component': true, 'p-picklist-striped': stripedRows }" cdkDropListGroup>
<div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
<button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleUpIcon *ngIf="!moveUpIconTemplate" />
<ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" />
<ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDownIcon *ngIf="!moveDownIconTemplate" />
<ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" />
<ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
</button>
</div>
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
<div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
<div class="p-picklist-title" *ngIf="!sourceHeaderTemplate">{{ sourceHeader }}</div>
<ng-container *ngTemplateOutlet="sourceHeaderTemplate"></ng-container>
</div>
<div class="p-picklist-filter-container" *ngIf="filterBy && showSourceFilter !== false">
<ng-container *ngIf="sourceFilterTemplate; else builtInSourceElement">
<ng-container *ngTemplateOutlet="sourceFilterTemplate; context: { options: sourceFilterOptions }"></ng-container>
</ng-container>
<ng-template #builtInSourceElement>
<div class="p-picklist-filter">
<input
#sourceFilter
type="text"
role="textbox"
(keyup)="onFilter($event, SOURCE_LIST)"
class="p-picklist-filter-input p-inputtext p-component"
[disabled]="disabled"
[attr.placeholder]="sourceFilterPlaceholder"
[attr.aria-label]="ariaSourceFilterLabel"
/>
<SearchIcon *ngIf="!sourceFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'" />
<span class="p-picklist-filter-icon" *ngIf="sourceFilterIconTemplate">
<ng-template *ngTemplateOutlet="sourceFilterIconTemplate"></ng-template>
</span>
</div>
</ng-template>
</div>
<ul #sourcelist class="p-picklist-list p-picklist-source" cdkDropList [cdkDropListData]="source" (cdkDropListDropped)="onDrop($event, SOURCE_LIST)" [ngStyle]="sourceStyle" role="listbox" aria-multiselectable="multiple">
<ng-template ngFor let-item [ngForOf]="source" [ngForTrackBy]="sourceTrackBy || trackBy" let-i="index" let-l="last">
<li
[ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsSource), 'p-disabled': disabled }"
pRipple
cdkDrag
[cdkDragData]="item"
[cdkDragDisabled]="!dragdrop"
(click)="onItemClick($event, item, selectedItemsSource, onSourceSelect)"
(dblclick)="onSourceItemDblClick()"
(touchend)="onItemTouchEnd()"
(keydown)="onItemKeydown($event, item, selectedItemsSource, onSourceSelect)"
*ngIf="isItemVisible(item, SOURCE_LIST)"
tabindex="0"
role="option"
[attr.aria-selected]="isSelected(item, selectedItemsSource)"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
</li>
</ng-template>
<ng-container *ngIf="isEmpty(SOURCE_LIST) && (emptyMessageSourceTemplate || emptyFilterMessageSourceTemplate)">
<li class="p-picklist-empty-message" *ngIf="!filterValueSource || !emptyFilterMessageSourceTemplate">
<ng-container *ngTemplateOutlet="emptyMessageSourceTemplate"></ng-container>
</li>
<li class="p-picklist-empty-message" *ngIf="filterValueSource">
<ng-container *ngTemplateOutlet="emptyFilterMessageSourceTemplate"></ng-container>
</li>
</ng-container>
</ul>
</div>
<div class="p-picklist-buttons p-picklist-transfer-buttons">
<button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()">
<ng-container *ngIf="!moveToTargetIconTemplate">
<AngleRightIcon *ngIf="!viewChanged" />
<AngleDownIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()">
<ng-container *ngIf="!moveAllToTargetIconTemplate">
<AngleDoubleRightIcon *ngIf="!viewChanged" />
<AngleDoubleDownIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveAllToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()">
<ng-container *ngIf="!moveToSourceIconTemplate">
<AngleLeftIcon *ngIf="!viewChanged" />
<AngleUpIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()">
<ng-container *ngIf="!moveAllToSourceIconTemplate">
<AngleDoubleLeftIcon *ngIf="!viewChanged" />
<AngleDoubleUpIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveAllToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
</div>
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
<div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
<div class="p-picklist-title" *ngIf="!targetHeaderTemplate">{{ targetHeader }}</div>
<ng-container *ngTemplateOutlet="targetHeaderTemplate"></ng-container>
</div>
<div class="p-picklist-filter-container" *ngIf="filterBy && showTargetFilter !== false">
<ng-container *ngIf="targetFilterTemplate; else builtInTargetElement">
<ng-container *ngTemplateOutlet="targetFilterTemplate; context: { options: targetFilterOptions }"></ng-container>
</ng-container>
<ng-template #builtInTargetElement>
<div class="p-picklist-filter">
<input
#targetFilter
type="text"
role="textbox"
(keyup)="onFilter($event, TARGET_LIST)"
class="p-picklist-filter-input p-inputtext p-component"
[disabled]="disabled"
[attr.placeholder]="targetFilterPlaceholder"
[attr.aria-label]="ariaTargetFilterLabel"
/>
<SearchIcon *ngIf="!targetFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'" />
<span class="p-picklist-filter-icon" *ngIf="targetFilterIconTemplate">
<ng-template *ngTemplateOutlet="targetFilterIconTemplate"></ng-template>
</span>
</div>
</ng-template>
</div>
<ul #targetlist class="p-picklist-list p-picklist-target" cdkDropList [cdkDropListData]="target" (cdkDropListDropped)="onDrop($event, TARGET_LIST)" [ngStyle]="targetStyle" role="listbox" aria-multiselectable="multiple">
<ng-template ngFor let-item [ngForOf]="target" [ngForTrackBy]="targetTrackBy || trackBy" let-i="index" let-l="last">
<li
[ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsTarget), 'p-disabled': disabled }"
pRipple
cdkDrag
[cdkDragData]="item"
[cdkDragDisabled]="!dragdrop"
(click)="onItemClick($event, item, selectedItemsTarget, onTargetSelect)"
(dblclick)="onTargetItemDblClick()"
(touchend)="onItemTouchEnd()"
(keydown)="onItemKeydown($event, item, selectedItemsTarget, onTargetSelect)"
*ngIf="isItemVisible(item, TARGET_LIST)"
tabindex="0"
role="option"
[attr.aria-selected]="isSelected(item, selectedItemsTarget)"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
</li>
</ng-template>
<ng-container *ngIf="isEmpty(TARGET_LIST) && (emptyMessageTargetTemplate || emptyFilterMessageTargetTemplate)">
<li class="p-picklist-empty-message" *ngIf="!filterValueTarget || !emptyFilterMessageTargetTemplate">
<ng-container *ngTemplateOutlet="emptyMessageTargetTemplate"></ng-container>
</li>
<li class="p-picklist-empty-message" *ngIf="filterValueTarget">
<ng-container *ngTemplateOutlet="emptyFilterMessageTargetTemplate"></ng-container>
</li>
</ng-container>
</ul>
</div>
<div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
<button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleUpIcon *ngIf="!moveUpIconTemplate" />
<ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" />
<ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDownIcon *ngIf="!moveDownIconTemplate" />
<ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" />
<ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
</button>
</div>
</div>
`, isInline: true, styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem}.p-picklist-item{display:block;cursor:pointer;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.Ripple; }), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.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: i0.forwardRef(function () { return i5.CdkDropListGroup; }), selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleDownIcon; }), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleLeftIcon; }), selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleRightIcon; }), selector: "AngleDoubleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleUpIcon; }), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDownIcon; }), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleLeftIcon; }), selector: "AngleLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleUpIcon; }), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(function () { return SearchIcon; }), selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickList, decorators: [{
type: Component,
args: [{ selector: 'p-pickList', template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="{ 'p-picklist p-component': true, 'p-picklist-striped': stripedRows }" cdkDropListGroup>
<div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
<button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleUpIcon *ngIf="!moveUpIconTemplate" />
<ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" />
<ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDownIcon *ngIf="!moveDownIconTemplate" />
<ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
<AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" />
<ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
</button>
</div>
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
<div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
<div class="p-picklist-title" *ngIf="!sourceHeaderTemplate">{{ sourceHeader }}</div>
<ng-container *ngTemplateOutlet="sourceHeaderTemplate"></ng-container>
</div>
<div class="p-picklist-filter-container" *ngIf="filterBy && showSourceFilter !== false">
<ng-container *ngIf="sourceFilterTemplate; else builtInSourceElement">
<ng-container *ngTemplateOutlet="sourceFilterTemplate; context: { options: sourceFilterOptions }"></ng-container>
</ng-container>
<ng-template #builtInSourceElement>
<div class="p-picklist-filter">
<input
#sourceFilter
type="text"
role="textbox"
(keyup)="onFilter($event, SOURCE_LIST)"
class="p-picklist-filter-input p-inputtext p-component"
[disabled]="disabled"
[attr.placeholder]="sourceFilterPlaceholder"
[attr.aria-label]="ariaSourceFilterLabel"
/>
<SearchIcon *ngIf="!sourceFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'" />
<span class="p-picklist-filter-icon" *ngIf="sourceFilterIconTemplate">
<ng-template *ngTemplateOutlet="sourceFilterIconTemplate"></ng-template>
</span>
</div>
</ng-template>
</div>
<ul #sourcelist class="p-picklist-list p-picklist-source" cdkDropList [cdkDropListData]="source" (cdkDropListDropped)="onDrop($event, SOURCE_LIST)" [ngStyle]="sourceStyle" role="listbox" aria-multiselectable="multiple">
<ng-template ngFor let-item [ngForOf]="source" [ngForTrackBy]="sourceTrackBy || trackBy" let-i="index" let-l="last">
<li
[ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsSource), 'p-disabled': disabled }"
pRipple
cdkDrag
[cdkDragData]="item"
[cdkDragDisabled]="!dragdrop"
(click)="onItemClick($event, item, selectedItemsSource, onSourceSelect)"
(dblclick)="onSourceItemDblClick()"
(touchend)="onItemTouchEnd()"
(keydown)="onItemKeydown($event, item, selectedItemsSource, onSourceSelect)"
*ngIf="isItemVisible(item, SOURCE_LIST)"
tabindex="0"
role="option"
[attr.aria-selected]="isSelected(item, selectedItemsSource)"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
</li>
</ng-template>
<ng-container *ngIf="isEmpty(SOURCE_LIST) && (emptyMessageSourceTemplate || emptyFilterMessageSourceTemplate)">
<li class="p-picklist-empty-message" *ngIf="!filterValueSource || !emptyFilterMessageSourceTemplate">
<ng-container *ngTemplateOutlet="emptyMessageSourceTemplate"></ng-container>
</li>
<li class="p-picklist-empty-message" *ngIf="filterValueSource">
<ng-container *ngTemplateOutlet="emptyFilterMessageSourceTemplate"></ng-container>
</li>
</ng-container>
</ul>
</div>
<div class="p-picklist-buttons p-picklist-transfer-buttons">
<button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()">
<ng-container *ngIf="!moveToTargetIconTemplate">
<AngleRightIcon *ngIf="!viewChanged" />
<AngleDownIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()">
<ng-container *ngIf="!moveAllToTargetIconTemplate">
<AngleDoubleRightIcon *ngIf="!viewChanged" />
<AngleDoubleDownIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveAllToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()">
<ng-container *ngIf="!moveToSourceIconTemplate">
<AngleLeftIcon *ngIf="!viewChanged" />
<AngleUpIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
<button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()">
<ng-container *ngIf="!moveAllToSourceIconTemplate">
<AngleDoubleLeftIcon *ngIf="!viewChanged" />
<AngleDoubleUpIcon *ngIf="viewChanged" />
</ng-container>
<ng-template *ngTemplateOutlet="moveAllToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
</button>
</div>
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
<div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
<div class="p-picklist-title" *ngIf="!targetHeaderTemplate">{{ targetHeader }}</div>
<ng-container *ngTemplateOutlet="targetHeaderTemplate"></ng-container>
</div>
<div class="p-picklist-filter-container" *ngIf="filterBy && showTargetFilter !== false">
<ng-container *ngIf="targetFilterTemplate; else builtInTargetElement">
<ng-container *ngTemplateOutlet="targetFilterTemplate; context: { options: targetFilterOptions }"></ng-container>
</ng-container>
<ng-template #builtInTargetElement>
<div class="p-picklist-filter">
<input
#targetFilter
type="text"
role="textbox"
(keyup)="onFilter($event, TARGET_LIST)"
class="p-picklist-filter-input p-inputtext p-component"
[disabled]="disabled"
[attr.placeholder]="targetFilterPlaceholder"
[attr.aria-label]="ariaTargetFilterLabel"
/>
<SearchIcon *ngIf="!targetFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'" />
<span class="p-picklist-filter-icon" *ngIf="targetFilterIconTemplate">
<ng-template *ngTemplateOutlet="targetFilterIconTemplate"></ng-template>
</span>
</div>
</ng-template>
</div>
<ul #targetlist class="p-picklist-list p-picklist-target" cdkDropList [cdkDropListData]="target" (cdkDropListDropped)="onDrop($event, TARGET_LIST)" [ngStyle]="targetStyle" role="listbox" aria-multiselectable="multiple">
<ng-template ngFor let-item [ngForOf]="target" [ngForTrackBy]="targetTrackBy || trackBy" let-i="index" let-l="last">
<li
[ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsTarget), 'p-disabled': disabled }"
pRipple
cdkDrag
[cdkDragData]="item"
[cdkDragDisabled]="!dragdrop"
(click)="onItemClick($event, item, selectedItemsTarget, onTargetSelect)"
(dblclick)="onTargetItemDblClick()"
(touchend)="onItemTouchEnd()"
(keydown)="onItemKeydown($event, item, selectedItemsTarget, onTargetSelect)"
*ngIf="isItemVisible(item, TARGET_LIST)"
tabindex="0"
role="option"
[attr.aria-selected]="isSelected(item, selectedItemsTarget)"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
</li>
</ng-template>
<ng-container *ngIf="isEmpty(TARGET_LIST) && (emptyMessageTargetTemplate || emptyFilterMessageTargetTemplate)">
<li class="p-picklist-empty-message" *ngIf="!filterValueTarget || !emptyFilterMessageTargetTemplate">
<ng-container *ngTemplateOutlet="emptyMessageTargetTemplate"></ng-container>
</li>
<li class="p-picklist-empty-message" *ngIf="filterValueTarget">
<ng-container *ngTemplateOutlet="emptyFilterMessageTargetTemplate"></ng-container>
</li>
</ng-container>
</ul>
</div>
<div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
<button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleUpIcon *ngIf="!moveUpIconTemplate" />
<ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="topButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" />
<ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="downButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDownIcon *ngIf="!moveDownIconTemplate" />
<ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
</button>
<button type="button" [attr.aria-label]="bottomButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
<AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" />
<ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
</button>
</div>
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'p-element'
}, styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem}.p-picklist-item{display:block;cursor:pointer;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
}], ctorParameters: function () { return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }]; }, propDecorators: { source: [{
type: Input
}], target: [{
type: Input
}], sourceHeader: [{
type: Input
}], rightButtonAriaLabel: [{
type: Input
}], leftButtonAriaLabel: [{
type: Input
}], allRightButtonAriaLabel: [{
type: Input
}], allLeftButtonAriaLabel: [{
type: Input
}], upButtonAriaLabel: [{
type: Input
}], downButtonAriaLabel: [{
type: Input
}], topButtonAriaLabel: [{
type: Input
}], bottomButtonAriaLabel: [{
type: Input
}], targetHeader: [{
type: Input
}], responsive: [{
type: Input
}], filterBy: [{
type: Input
}], filterLocale: [{
type: Input
}], trackBy: [{
type: Input
}], sourceTrackBy: [{
type: Input
}], targetTrackBy: [{
type: Input
}], showSourceFilter: [{
type: Input
}], showTargetFilter: [{
type: Input
}], metaKeySelection: [{
type: Input
}], dragdrop: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], sourceStyle: [{
type: Input
}], targetStyle: [{
type: Input
}], showSourceControls: [{
type: Input
}], showTargetControls: [{
type: Input
}], sourceFilterPlaceholder: [{
type: Input
}], targetFilterPlaceholder: [{
type: Input
}], disabled: [{
type: Input
}], ariaSourceFilterLabel: [{
type: Input
}], ariaTargetFilterLabel: [{
type: Input
}], filterMatchMode: [{
type: Input
}], stripedRows: [{
type: Input
}], keepSelection: [{
type: Input
}], breakpoint: [{
type: Input
}], onMoveToSource: [{
type: Output
}], onMoveAllToSource: [{
type: Output
}], onMoveAllToTarget: [{
type: Output
}], onMoveToTarget: [{
type: Output
}], onSourceReorder: [{
type: Output
}], onTargetReorder: [{
type: Output
}], onSourceSelect: [{
type: Output
}], onTargetSelect: [{
type: Output
}], onSourceFilter: [{
type: Output
}], onTargetFilter: [{
type: Output
}], listViewSourceChild: [{
type: ViewChild,
args: ['sourcelist']
}], listViewTargetChild: [{
type: ViewChild,
args: ['targetlist']
}], sourceFilterViewChild: [{
type: ViewChild,
args: ['sourceFilter']
}], targetFilterViewChild: [{
type: ViewChild,
args: ['targetFilter']
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class PickListModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: PickListModule, declarations: [PickList], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon], exports: [PickList, SharedModule, DragDropModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickListModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon, SharedModule, DragDropModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickListModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon],
exports: [PickList, SharedModule, DragDropModule],
declarations: [PickList]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PickList, PickListModule };
//# sourceMappingURL=primeng-picklist.mjs.map