primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
1,212 lines (1,207 loc) • 124 kB
JavaScript
import * as i2 from '@angular/cdk/drag-drop';
import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { uuid, find, scrollInView, findIndexInList, findSingle, setAttribute, isEmpty } from '@primeuix/utils';
import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { ButtonDirective } from 'primeng/button';
import { AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon } from 'primeng/icons';
import { Listbox } from 'primeng/listbox';
import { Ripple } from 'primeng/ripple';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-picklist {
display: flex;
gap: ${dt('picklist.gap')};
}
.p-picklist-controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: ${dt('picklist.controls.gap')};
}
.p-picklist-list-container {
flex: 1 1 50%;
}
.p-picklist .p-listbox {
height: 100%;
}
`;
const classes = {
root: 'p-picklist p-component',
sourceControls: 'p-picklist-controls p-picklist-source-controls',
sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
transferControls: 'p-picklist-controls p-picklist-transfer-controls',
targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
targetControls: 'p-picklist-controls p-picklist-target-controls'
};
class PickListStyle extends BaseStyle {
name = 'picklist';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵPickListStyle_BaseFactory; return function PickListStyle_Factory(__ngFactoryType__) { return (ɵPickListStyle_BaseFactory || (ɵPickListStyle_BaseFactory = i0.ɵɵgetInheritedFactory(PickListStyle)))(__ngFactoryType__ || PickListStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PickListStyle, factory: PickListStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickListStyle, [{
type: Injectable
}], null, null); })();
/**
*
* PickList is used to reorder items between different lists.
*
* [Live Demo](https://www.primeng.org/picklist)
*
* @module pickliststyle
*
*/
var PickListClasses;
(function (PickListClasses) {
/**
* Class name of the root element
*/
PickListClasses["root"] = "p-picklist";
/**
* Class name of the source controls element
*/
PickListClasses["sourceControls"] = "p-picklist-source-controls";
/**
* Class name of the source list container element
*/
PickListClasses["sourceListContainer"] = "p-picklist-source-list-container";
/**
* Class name of the transfer controls element
*/
PickListClasses["transferControls"] = "p-picklist-transfer-controls";
/**
* Class name of the target list container element
*/
PickListClasses["targetListContainer"] = "p-picklist-target-list-container";
/**
* Class name of the target controls element
*/
PickListClasses["targetControls"] = "p-picklist-target-controls";
})(PickListClasses || (PickListClasses = {}));
const _c0 = ["item"];
const _c1 = ["sourceHeader"];
const _c2 = ["targetHeader"];
const _c3 = ["sourceFilter"];
const _c4 = ["targetFilter"];
const _c5 = ["emptymessagesource"];
const _c6 = ["emptyfiltermessagesource"];
const _c7 = ["emptymessagetarget"];
const _c8 = ["emptyfiltermessagetarget"];
const _c9 = ["moveupicon"];
const _c10 = ["movetopicon"];
const _c11 = ["movedownicon"];
const _c12 = ["movebottomicon"];
const _c13 = ["movetotargeticon"];
const _c14 = ["movealltotargeticon"];
const _c15 = ["movetosourceicon"];
const _c16 = ["movealltosourceicon"];
const _c17 = ["targetfiltericon"];
const _c18 = ["sourcefiltericon"];
const _c19 = ["sourcelist"];
const _c20 = ["targetlist"];
const _c21 = () => ({ "p-picklist p-component": true });
const _c22 = a0 => ({ $implicit: a0 });
const _c23 = a0 => ({ options: a0 });
const _c24 = (a0, a1, a2) => ({ $implicit: a0, index: a1, selected: a2 });
function PickList_div_1_AngleUpIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "moveupicon");
} }
function PickList_div_1_3_ng_template_0_Template(rf, ctx) { }
function PickList_div_1_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_1_3_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_1_AngleDoubleUpIcon_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movetopicon");
} }
function PickList_div_1_6_ng_template_0_Template(rf, ctx) { }
function PickList_div_1_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_1_6_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_1_AngleDownIcon_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movedownicon");
} }
function PickList_div_1_9_ng_template_0_Template(rf, ctx) { }
function PickList_div_1_9_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_1_9_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_1_AngleDoubleDownIcon_11_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movebottomicon");
} }
function PickList_div_1_12_ng_template_0_Template(rf, ctx) { }
function PickList_div_1_12_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_1_12_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_1_Template(rf, ctx) { if (rf & 1) {
const _r2 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 15)(1, "button", 11);
i0.ɵɵlistener("click", function PickList_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); const sourcelist_r4 = i0.ɵɵreference(4); return i0.ɵɵresetView(ctx_r2.moveUp(sourcelist_r4, ctx_r2.source, ctx_r2.selectedItemsSource, ctx_r2.onSourceReorder, ctx_r2.SOURCE_LIST)); });
i0.ɵɵtemplate(2, PickList_div_1_AngleUpIcon_2_Template, 1, 1, "AngleUpIcon", 8)(3, PickList_div_1_3_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "button", 11);
i0.ɵɵlistener("click", function PickList_div_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); const sourcelist_r4 = i0.ɵɵreference(4); return i0.ɵɵresetView(ctx_r2.moveTop(sourcelist_r4, ctx_r2.source, ctx_r2.selectedItemsSource, ctx_r2.onSourceReorder, ctx_r2.SOURCE_LIST)); });
i0.ɵɵtemplate(5, PickList_div_1_AngleDoubleUpIcon_5_Template, 1, 1, "AngleDoubleUpIcon", 8)(6, PickList_div_1_6_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "button", 11);
i0.ɵɵlistener("click", function PickList_div_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); const sourcelist_r4 = i0.ɵɵreference(4); return i0.ɵɵresetView(ctx_r2.moveDown(sourcelist_r4, ctx_r2.source, ctx_r2.selectedItemsSource, ctx_r2.onSourceReorder, ctx_r2.SOURCE_LIST)); });
i0.ɵɵtemplate(8, PickList_div_1_AngleDownIcon_8_Template, 1, 1, "AngleDownIcon", 8)(9, PickList_div_1_9_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(10, "button", 11);
i0.ɵɵlistener("click", function PickList_div_1_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); const sourcelist_r4 = i0.ɵɵreference(4); return i0.ɵɵresetView(ctx_r2.moveBottom(sourcelist_r4, ctx_r2.source, ctx_r2.selectedItemsSource, ctx_r2.onSourceReorder, ctx_r2.SOURCE_LIST)); });
i0.ɵɵtemplate(11, PickList_div_1_AngleDoubleDownIcon_11_Template, 1, 1, "AngleDoubleDownIcon", 8)(12, PickList_div_1_12_Template, 1, 0, null, 16);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵattribute("data-pc-section", "sourceControls")("data-pc-group-section", "controls");
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.sourceMoveDisabled())("buttonProps", ctx_r2.getButtonProps("moveup"));
i0.ɵɵattribute("aria-label", ctx_r2.moveUpAriaLabel)("data-pc-section", "sourceMoveUpButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveUpIconTemplate && !ctx_r2._moveUpIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveUpIconTemplate || ctx_r2._moveUpIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.sourceMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movetop"));
i0.ɵɵattribute("aria-label", ctx_r2.moveTopAriaLabel)("data-pc-section", "sourceMoveTopButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveTopIconTemplate && !ctx_r2._moveTopIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveTopIconTemplate || ctx_r2._moveTopIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.sourceMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movedown"));
i0.ɵɵattribute("aria-label", ctx_r2.moveDownAriaLabel)("data-pc-section", "sourceMoveDownButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveDownIconTemplate && !ctx_r2._moveDownIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveDownIconTemplate || ctx_r2._moveDownIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.sourceMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movebottom"));
i0.ɵɵattribute("aria-label", ctx_r2.moveBottomAriaLabel)("data-pc-section", "sourceMoveBottomButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveBottomIconTemplate || ctx_r2._moveBottomIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveBottomIconTemplate || ctx_r2._moveBottomIconTemplate);
} }
function PickList_ng_container_5_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
function PickList_ng_container_5_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_5_ng_template_1_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_5_ng_template_1_0_Template, 1, 0, null, 16);
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.sourceHeaderTemplate || ctx_r2._sourceHeaderTemplate);
} }
function PickList_ng_container_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_5_ng_template_1_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function PickList_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_6_ng_container_1_Template, 1, 0, "ng-container", 12);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.sourceFilterTemplate || ctx_r2._sourceFilterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, ctx_r2.sourceFilterOptions));
} }
function PickList_ng_container_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_7_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_7_ng_container_1_Template, 1, 0, "ng-container", 16);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.sourceFilterIconTemplate || ctx_r2._sourceFilterIconTemplate);
} }
function PickList_div_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 17);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r2.sourceHeader);
} }
function PickList_ng_container_9_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_9_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 12);
} if (rf & 2) {
const item_r5 = ctx.$implicit;
const index_r6 = ctx.index;
const selected_r7 = ctx.selected;
const ctx_r2 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate || ctx_r2._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c24, item_r5, index_r6, selected_r7));
} }
function PickList_ng_container_9_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_9_ng_template_1_Template, 1, 6, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function PickList_ng_container_10_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_10_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_10_ng_container_1_Template, 1, 0, "ng-container", 16);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyFilterMessageSourceTemplate || ctx_r2._emptyFilterMessageSourceTemplate || ctx_r2.emptyMessageSourceTemplate || ctx_r2._emptyMessageSourceTemplate);
} }
function PickList_ng_container_13_AngleRightIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleRightIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movetotargeticon");
} }
function PickList_ng_container_13_AngleDownIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movetotargeticon");
} }
function PickList_ng_container_13_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_13_AngleRightIcon_1_Template, 1, 1, "AngleRightIcon", 8)(2, PickList_ng_container_13_AngleDownIcon_2_Template, 1, 1, "AngleDownIcon", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.viewChanged);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r2.viewChanged);
} }
function PickList_14_ng_template_0_Template(rf, ctx) { }
function PickList_14_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_14_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_16_AngleDoubleRightIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleRightIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movealltotargeticon");
} }
function PickList_ng_container_16_AngleDoubleDownIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movealltotargeticon");
} }
function PickList_ng_container_16_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_16_AngleDoubleRightIcon_1_Template, 1, 1, "AngleDoubleRightIcon", 8)(2, PickList_ng_container_16_AngleDoubleDownIcon_2_Template, 1, 1, "AngleDoubleDownIcon", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.viewChanged);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r2.viewChanged);
} }
function PickList_17_ng_template_0_Template(rf, ctx) { }
function PickList_17_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_17_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_19_AngleLeftIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleLeftIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movedownsourceticon");
} }
function PickList_ng_container_19_AngleUpIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movedownsourceticon");
} }
function PickList_ng_container_19_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_19_AngleLeftIcon_1_Template, 1, 1, "AngleLeftIcon", 8)(2, PickList_ng_container_19_AngleUpIcon_2_Template, 1, 1, "AngleUpIcon", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.viewChanged);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r2.viewChanged);
} }
function PickList_20_ng_template_0_Template(rf, ctx) { }
function PickList_20_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_20_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_22_AngleDoubleLeftIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleLeftIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movealltosourceticon");
} }
function PickList_ng_container_22_AngleDoubleUpIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movealltosourceticon");
} }
function PickList_ng_container_22_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_22_AngleDoubleLeftIcon_1_Template, 1, 1, "AngleDoubleLeftIcon", 8)(2, PickList_ng_container_22_AngleDoubleUpIcon_2_Template, 1, 1, "AngleDoubleUpIcon", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.viewChanged);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r2.viewChanged);
} }
function PickList_23_ng_template_0_Template(rf, ctx) { }
function PickList_23_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_23_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_27_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
function PickList_ng_container_27_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_27_ng_template_1_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_ng_container_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_27_ng_template_1_0_Template, 1, 0, null, 16);
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.targetHeaderTemplate || ctx_r2._targetHeaderTemplate);
} }
function PickList_ng_container_27_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_27_ng_template_1_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function PickList_ng_container_28_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_28_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_28_ng_container_1_Template, 1, 0, "ng-container", 12);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.targetFilterTemplate || ctx_r2._targetFilterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, ctx_r2.targetFilterOptions));
} }
function PickList_ng_container_29_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_29_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_29_ng_container_1_Template, 1, 0, "ng-container", 16);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.targetFilterIconTemplate || ctx_r2._targetFilterIconTemplate);
} }
function PickList_div_30_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 17);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r2.targetHeader);
} }
function PickList_ng_container_31_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_31_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_ng_container_31_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 12);
} if (rf & 2) {
const item_r8 = ctx.$implicit;
const index_r9 = ctx.index;
const selected_r10 = ctx.selected;
const ctx_r2 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate || ctx_r2._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c24, item_r8, index_r9, selected_r10));
} }
function PickList_ng_container_31_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_31_ng_template_1_Template, 1, 6, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function PickList_ng_container_32_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function PickList_ng_container_32_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, PickList_ng_container_32_ng_container_1_Template, 1, 0, "ng-container", 16);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyFilterMessageTargetTemplate || ctx_r2._emptyFilterMessageTargetTemplate || ctx_r2.emptyMessageTargetTemplate || ctx_r2._emptyMessageTargetTemplate);
} }
function PickList_div_33_AngleUpIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "moveupicon");
} }
function PickList_div_33_3_ng_template_0_Template(rf, ctx) { }
function PickList_div_33_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_33_3_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_33_AngleDoubleUpIcon_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleUpIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movetopicon");
} }
function PickList_div_33_6_ng_template_0_Template(rf, ctx) { }
function PickList_div_33_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_33_6_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_33_AngleDownIcon_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movedownicon");
} }
function PickList_div_33_9_ng_template_0_Template(rf, ctx) { }
function PickList_div_33_9_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_33_9_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_33_AngleDoubleDownIcon_11_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleDownIcon");
} if (rf & 2) {
i0.ɵɵattribute("data-pc-section", "movebottomicon");
} }
function PickList_div_33_12_ng_template_0_Template(rf, ctx) { }
function PickList_div_33_12_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, PickList_div_33_12_ng_template_0_Template, 0, 0, "ng-template");
} }
function PickList_div_33_Template(rf, ctx) { if (rf & 1) {
const _r11 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 18)(1, "button", 11);
i0.ɵɵlistener("click", function PickList_div_33_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); const targetlist_r12 = i0.ɵɵreference(26); return i0.ɵɵresetView(ctx_r2.moveUp(targetlist_r12, ctx_r2.target, ctx_r2.selectedItemsTarget, ctx_r2.onTargetReorder, ctx_r2.TARGET_LIST)); });
i0.ɵɵtemplate(2, PickList_div_33_AngleUpIcon_2_Template, 1, 1, "AngleUpIcon", 8)(3, PickList_div_33_3_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "button", 11);
i0.ɵɵlistener("click", function PickList_div_33_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); const targetlist_r12 = i0.ɵɵreference(26); return i0.ɵɵresetView(ctx_r2.moveTop(targetlist_r12, ctx_r2.target, ctx_r2.selectedItemsTarget, ctx_r2.onTargetReorder, ctx_r2.TARGET_LIST)); });
i0.ɵɵtemplate(5, PickList_div_33_AngleDoubleUpIcon_5_Template, 1, 1, "AngleDoubleUpIcon", 8)(6, PickList_div_33_6_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "button", 11);
i0.ɵɵlistener("click", function PickList_div_33_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); const targetlist_r12 = i0.ɵɵreference(26); return i0.ɵɵresetView(ctx_r2.moveDown(targetlist_r12, ctx_r2.target, ctx_r2.selectedItemsTarget, ctx_r2.onTargetReorder, ctx_r2.TARGET_LIST)); });
i0.ɵɵtemplate(8, PickList_div_33_AngleDownIcon_8_Template, 1, 1, "AngleDownIcon", 8)(9, PickList_div_33_9_Template, 1, 0, null, 16);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(10, "button", 11);
i0.ɵɵlistener("click", function PickList_div_33_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); const targetlist_r12 = i0.ɵɵreference(26); return i0.ɵɵresetView(ctx_r2.moveBottom(targetlist_r12, ctx_r2.target, ctx_r2.selectedItemsTarget, ctx_r2.onTargetReorder, ctx_r2.TARGET_LIST)); });
i0.ɵɵtemplate(11, PickList_div_33_AngleDoubleDownIcon_11_Template, 1, 1, "AngleDoubleDownIcon", 8)(12, PickList_div_33_12_Template, 1, 0, null, 16);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵattribute("data-pc-section", "targetControls")("data-pc-group-section", "controls");
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.targetMoveDisabled())("buttonProps", ctx_r2.getButtonProps("moveup"));
i0.ɵɵattribute("aria-label", ctx_r2.moveUpAriaLabel)("data-pc-section", "targetMoveUpButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveUpIconTemplate && !ctx_r2._moveUpIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveUpIconTemplate || ctx_r2._moveUpIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.targetMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movetop"));
i0.ɵɵattribute("aria-label", ctx_r2.moveTopAriaLabel)("data-pc-section", "targetMoveTopButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveTopIconTemplate && !ctx_r2._moveTopIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveTopIconTemplate || ctx_r2.moveTopIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.targetMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movedown"));
i0.ɵɵattribute("aria-label", ctx_r2.moveDownAriaLabel)("data-pc-section", "targetMoveDownButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveDownIconTemplate && !ctx_r2._moveDownIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveDownIconTemplate || ctx_r2._moveDownIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r2.targetMoveDisabled())("buttonProps", ctx_r2.getButtonProps("movebottom"));
i0.ɵɵattribute("aria-label", ctx_r2.moveBottomAriaLabel)("data-pc-section", "targetMoveBottomButton");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r2.moveBottomIconTemplate && !ctx_r2._moveBottomIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.moveBottomIconTemplate || ctx_r2._moveBottomIconTemplate);
} }
/**
* PickList is used to reorder items between different lists.
* @group Components
*/
class PickList extends BaseComponent {
/**
* An array of objects for the source list.
* @group Props
*/
source;
/**
* An array of objects for the target list.
* @group Props
*/
target;
/**
* Text for the source list caption
* @group Props
*/
sourceHeader;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = 0;
/**
* Defines a string that labels the move to right button for accessibility.
* @group Props
*/
rightButtonAriaLabel;
/**
* Defines a string that labels the move to left button for accessibility.
* @group Props
*/
leftButtonAriaLabel;
/**
* Defines a string that labels the move to all right button for accessibility.
* @group Props
*/
allRightButtonAriaLabel;
/**
* Defines a string that labels the move to all left button for accessibility.
* @group Props
*/
allLeftButtonAriaLabel;
/**
* Defines a string that labels the move to up button for accessibility.
* @group Props
*/
upButtonAriaLabel;
/**
* Defines a string that labels the move to down button for accessibility.
* @group Props
*/
downButtonAriaLabel;
/**
* Defines a string that labels the move to top button for accessibility.
* @group Props
*/
topButtonAriaLabel;
/**
* Defines a string that labels the move to bottom button for accessibility.
* @group Props
*/
bottomButtonAriaLabel;
/**
* Text for the target list caption
* @group Props
*/
targetHeader;
/**
* When enabled orderlist adjusts its controls based on screen size.
* @group Props
*/
responsive;
/**
* When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
* @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 = false;
/**
* 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;
/**
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
scrollHeight = '14rem';
/**
* Whether to focus on the first visible or selected element.
* @group Props
*/
autoOptionFocus = true;
/**
* Used to pass all properties of the ButtonProps to the Button component.
* @group Props
*/
buttonProps = { severity: 'secondary' };
/**
* Used to pass all properties of the ButtonProps to the move up button inside the component.
* @group Props
*/
moveUpButtonProps;
/**
* Used to pass all properties of the ButtonProps to the move top button inside the component.
* @group Props
*/
moveTopButtonProps;
/**
* Used to pass all properties of the ButtonProps to the move down button inside the component.
* @group Props
*/
moveDownButtonProps;
/**
* Used to pass all properties of the ButtonProps to the move bottom button inside the component.
* @group Props
*/
moveBottomButtonProps;
/**
* Used to pass all properties of the ButtonProps to the move to target button inside the component.
* @group Props
*/
moveToTargetProps;
/**
* Used to pass all properties of the ButtonProps to the move all to target button inside the component.
* @group Props
*/
moveAllToTargetProps;
/**
* Used to pass all properties of the ButtonProps to the move to source button inside the component.
* @group Props
*/
moveToSourceProps;
/**
* Used to pass all properties of the ButtonProps to the move all to source button inside the component.
* @group Props
*/
moveAllToSourceProps;
/**
* 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();
/**
* Callback to invoke when the list is focused
* @param {Event} event - Browser event.
* @group Emits
*/
onFocus = new EventEmitter();
/**
* Callback to invoke when the list is blurred
* @param {Event} event - Browser event.
* @group Emits
*/
onBlur = new EventEmitter();
listViewSourceChild;
listViewTargetChild;
sourceFilterViewChild;
targetFilterViewChild;
getButtonProps(direction) {
switch (direction) {
case 'moveup':
return { ...this.buttonProps, ...this.moveUpButtonProps };
case 'movetop':
return { ...this.buttonProps, ...this.moveTopButtonProps };
case 'movedown':
return { ...this.buttonProps, ...this.moveDownButtonProps };
case 'movebottom':
return { ...this.buttonProps, ...this.moveBottomButtonProps };
case 'movetotarget':
return { ...this.buttonProps, ...this.moveToTargetProps };
case 'movealltotarget':
return { ...this.buttonProps, ...this.moveAllToTargetProps };
case 'movetosource':
return { ...this.buttonProps, ...this.moveToSourceProps };
case 'movealltosource':
return { ...this.buttonProps, ...this.moveAllToSourceProps };
default:
return this.buttonProps;
}
}
get moveUpAriaLabel() {
return this.upButtonAriaLabel ? this.upButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveUp : undefined;
}
get moveTopAriaLabel() {
return this.topButtonAriaLabel ? this.topButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveTop : undefined;
}
get moveDownAriaLabel() {
return this.downButtonAriaLabel ? this.downButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
}
get moveBottomAriaLabel() {
return this.bottomButtonAriaLabel ? this.bottomButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
}
get moveToTargetAriaLabel() {
return this.rightButtonAriaLabel ? this.rightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToTarget : undefined;
}
get moveAllToTargetAriaLabel() {
return this.allRightButtonAriaLabel ? this.allRightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToTarget : undefined;
}
get moveToSourceAriaLabel() {
return this.leftButtonAriaLabel ? this.leftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : undefined;
}
get moveAllToSourceAriaLabel() {
return this.allLeftButtonAriaLabel ? this.allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToSource : undefined;
}
get idSource() {
return this.id + '_source';
}
get idTarget() {
return this.id + '_target';
}
get focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
}
_breakpoint = '960px';
visibleOptionsSource;
visibleOptionsTarget;
selectedItemsSource = [];
selectedItemsTarget = [];
reorderedListElement;
movedUp;
movedDown;
itemTouched;
styleElement;
id = uuid('pn_id_');
filterValueSource;
filterValueTarget;
fromListType;
sourceFilterOptions;
targetFilterOptions;
SOURCE_LIST = -1;
TARGET_LIST = 1;
window;
media;
viewChanged;
focusedOptionIndex = -1;
focusedOption;
focused = {
sourceList: false,
targetList: false
};
_componentStyle = inject(PickListStyle);
mediaChangeListener;
filterService = inject(FilterService);
ngOnInit() {
super.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()
};
}
}
/**
* Custom item template.
* @group Templates
*/
itemTemplate;
/**
* Custom source header template.
* @group Templates
*/
sourceHeaderTemplate;
/**
* Custom target header template.
* @group Templates
*/
targetHeaderTemplate;
/**
* Custom source filter template.
* @group Templates
*/
sourceFilterTemplate;
/**
* Custom target filter template.
* @group Templates
*/
targetFilterTemplate;
/**
* Custom empty message when source is empty template.
* @group Templates
*/
emptyMessageSourceTemplate;
/**
* Custom empty filter message when source is empty template.
* @group Templates
*/
emptyFilterMessageSourceTemplate;
/**
* Custom empty message when target is empty template.
* @group Templates
*/
emptyMessageTargetTemplate;
/**
* Custom empty filter message when target is empty template.
* @group Templates
*/
emptyFilterMessageTargetTemplate;
/**
* Custom move up icon template.
* @group Templates
*/
moveUpIconTemplate;
/**
* Custom move top icon template.
* @group Templates
*/
moveTopIconTemplate;
/**
* Custom move down icon template.
* @group Templates
*/
moveDownIconTemplate;
/**
* Custom move bottom icon template.
* @group Templates
*/
moveBottomIconTemplate;
/**
* Custom move to target icon template.
* @group Templates
*/
moveToTargetIconTemplate;
/**
* Custom move all to target icon template.
* @group Templates
*/
moveAllToTargetIconTemplate;
/**
* Custom move to source icon template.
* @group Templates
*/
moveToSourceIconTemplate;
/**
* Custom move all to source icon template.
* @group Templates
*/
moveAllToSourceIconTemplate;
/**
* Custom target filter icon template.
* @group Templates
*/
targetFilterIconTemplate;
/**
* Custom source filter icon template.
* @group Templates
*/
sourceFilterIconTemplate;
templates;
_itemTemplate;
_sourceHeaderTemplate;
_targetHeaderTemplate;
_sourceFilterTemplate;
_targetFilterTemplate;
_emptyMessageSourceTemplate;
_emptyFilterMessageSourceTemplate;
_emptyMessageTargetTemplate;
_emptyFilterMessageTargetTemplate;
_moveUpIconTemplate;
_moveTopIconTemplate;
_moveDownIconTemplate;
_moveBottomIconTemplate;
_moveToTargetIconTemplate;
_moveAllToTargetIconTemplate;
_moveToSourceIconTemplate;
_moveAllToSourceIconTemplate;
_targetFilterIconTemplate;
_sourceFilterIconTemplate;
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'item':
this._itemTemplate = item.template;
break;
case 'option':
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 = find(this.reorderedListElement, 'li.p-highlight');
let listItem;
if (this.movedUp)
listItem = listItems[0];
else
listItem = listItems[listItems.length - 1];
scrollInView(this.reorderedListElement, listItem);
this.movedUp = false;
this.movedDown = false;
this.reorderedListElement = null;
}
}
onItemClick(event, item, selectedItems, listType, callback, itemId) {
if (this.disabled) {
return;
}
let index = this.findIndexInList(item, selectedItems);
if (itemId)
this.focusedOptionIndex = itemId;
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 = selectedItems.filter((_, i) => i !== index);
}
else {
if (!metaKey) {
selectedItems = [];
}
selectedItems.push(item);
}
}
else {
if (selected) {
selectedItems = selectedItems.filter((_, i) => i !== index); // Creating a new array without the selected item
}
else {
selectedItems.push(item);
}
}
this.setSelectionList(listType, selectedItems);
callback.emit({ or