primeng/bundles/primeng-orderlist.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("primeng/button"),require("primeng/api"),require("primeng/dom"),require("primeng/utils"),require("primeng/ripple"),require("@angular/cdk/drag-drop")):"function"==typeof define&&define.amd?define("primeng/orderlist",["exports","@angular/core","@angular/common","primeng/button","primeng/api","primeng/dom","primeng/utils","primeng/ripple","@angular/cdk/drag-drop"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).primeng=t.primeng||{},t.primeng.orderlist={}),t.ng.core,t.ng.common,t.primeng.button,t.primeng.api,t.primeng.dom,t.primeng.utils,t.primeng.ripple,t.ng.cdk.dragDrop)}(this,(function(t,e,i,n,r,o,l,s,p){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function a(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,r,o=i.call(t),l=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)l.push(n.value)}catch(t){r={error:t}}finally{try{n&&!n.done&&(i=o.return)&&i.call(o)}finally{if(r)throw r.error}}return l}function d(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(a(arguments[e]));return t}Object.create;var c=function(){function t(t,i,n){this.el=t,this.cd=i,this.filterService=n,this.metaKeySelection=!0,this.dragdrop=!1,this.controlsPosition="left",this.filterMatchMode="contains",this.breakpoint="960px",this.selectionChange=new e.EventEmitter,this.trackBy=function(t,e){return e},this.onReorder=new e.EventEmitter,this.onSelectionChange=new e.EventEmitter,this.onFilterEvent=new e.EventEmitter,this.id=l.UniqueComponentId()}return Object.defineProperty(t.prototype,"selection",{get:function(){return this._selection},set:function(t){this._selection=t},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){this.responsive&&this.createStyle()},t.prototype.ngAfterContentInit=function(){var t=this;this.templates.forEach((function(e){switch(e.getType()){case"item":default:t.itemTemplate=e.template}}))},t.prototype.ngAfterViewChecked=function(){if(this.movedUp||this.movedDown){var t=o.DomHandler.find(this.listViewChild.nativeElement,"li.p-highlight"),e=void 0;t.length>0&&(e=this.movedUp?t[0]:t[t.length-1],o.DomHandler.scrollInView(this.listViewChild.nativeElement,e)),this.movedUp=!1,this.movedDown=!1}},Object.defineProperty(t.prototype,"value",{get:function(){return this._value},set:function(t){this._value=t,this.filterValue&&this.filter()},enumerable:!1,configurable:!0}),t.prototype.onItemClick=function(t,e,i){this.itemTouched=!1;var n=l.ObjectUtils.findIndexInList(e,this.selection),r=-1!=n;if(!this.itemTouched&&this.metaKeySelection){var o=t.metaKey||t.ctrlKey||t.shiftKey;r&&o?this._selection=this._selection.filter((function(t,e){return e!==n})):(this._selection=o&&this._selection?d(this._selection):[],l.ObjectUtils.insertIntoOrderedArray(e,i,this._selection,this.value))}else r?this._selection=this._selection.filter((function(t,e){return e!==n})):(this._selection=this._selection?d(this._selection):[],l.ObjectUtils.insertIntoOrderedArray(e,i,this._selection,this.value));this.selectionChange.emit(this._selection),this.onSelectionChange.emit({originalEvent:t,value:this._selection})},t.prototype.onFilterKeyup=function(t){this.filterValue=t.target.value.trim().toLocaleLowerCase(this.filterLocale),this.filter(),this.onFilterEvent.emit({originalEvent:t,value:this.visibleOptions})},t.prototype.filter=function(){var t=this.filterBy.split(",");this.visibleOptions=this.filterService.filter(this.value,t,this.filterValue,this.filterMatchMode,this.filterLocale)},t.prototype.isItemVisible=function(t){if(!this.filterValue||!this.filterValue.trim().length)return!0;for(var e=0;e<this.visibleOptions.length;e++)if(t==this.visibleOptions[e])return!0},t.prototype.onItemTouchEnd=function(){this.itemTouched=!0},t.prototype.isSelected=function(t){return-1!=l.ObjectUtils.findIndexInList(t,this.selection)},t.prototype.moveUp=function(){if(this.selection){for(var t=0;t<this.selection.length;t++){var e=this.selection[t],i=l.ObjectUtils.findIndexInList(e,this.value);if(0==i)break;var n=this.value[i],r=this.value[i-1];this.value[i-1]=n,this.value[i]=r}this.dragdrop&&this.filterValue&&this.filter(),this.movedUp=!0,this.onReorder.emit(this.selection)}},t.prototype.moveTop=function(){if(this.selection){for(var t=this.selection.length-1;t>=0;t--){var e=this.selection[t],i=l.ObjectUtils.findIndexInList(e,this.value);if(0==i)break;var n=this.value.splice(i,1)[0];this.value.unshift(n)}this.dragdrop&&this.filterValue&&this.filter(),this.onReorder.emit(this.selection),this.listViewChild.nativeElement.scrollTop=0}},t.prototype.moveDown=function(){if(this.selection){for(var t=this.selection.length-1;t>=0;t--){var e=this.selection[t],i=l.ObjectUtils.findIndexInList(e,this.value);if(i==this.value.length-1)break;var n=this.value[i],r=this.value[i+1];this.value[i+1]=n,this.value[i]=r}this.dragdrop&&this.filterValue&&this.filter(),this.movedDown=!0,this.onReorder.emit(this.selection)}},t.prototype.moveBottom=function(){if(this.selection){for(var t=0;t<this.selection.length;t++){var e=this.selection[t],i=l.ObjectUtils.findIndexInList(e,this.value);if(i==this.value.length-1)break;var n=this.value.splice(i,1)[0];this.value.push(n)}this.dragdrop&&this.filterValue&&this.filter(),this.onReorder.emit(this.selection),this.listViewChild.nativeElement.scrollTop=this.listViewChild.nativeElement.scrollHeight}},t.prototype.onDrop=function(t){var e=t.previousIndex,i=t.currentIndex;e!==i&&(this.visibleOptions&&(this.filterValue&&(e=l.ObjectUtils.findIndexInList(t.item.data,this.value),i=l.ObjectUtils.findIndexInList(this.visibleOptions[i],this.value)),p.moveItemInArray(this.visibleOptions,t.previousIndex,t.currentIndex)),p.moveItemInArray(this.value,e,i),this.onReorder.emit([t.item.data]))},t.prototype.onItemKeydown=function(t,e,i){var n=t.currentTarget;switch(t.which){case 40:var r=this.findNextItem(n);r&&r.focus(),t.preventDefault();break;case 38:var o=this.findPrevItem(n);o&&o.focus(),t.preventDefault();break;case 13:this.onItemClick(t,e,i),t.preventDefault()}},t.prototype.findNextItem=function(t){var e=t.nextElementSibling;return e?!o.DomHandler.hasClass(e,"p-orderlist-item")||o.DomHandler.isHidden(e)?this.findNextItem(e):e:null},t.prototype.findPrevItem=function(t){var e=t.previousElementSibling;return e?!o.DomHandler.hasClass(e,"p-orderlist-item")||o.DomHandler.isHidden(e)?this.findPrevItem(e):e:null},t.prototype.createStyle=function(){if(!this.styleElement){this.el.nativeElement.children[0].setAttribute(this.id,""),this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);var t="\n                @media screen and (max-width: "+this.breakpoint+") {\n                    .p-orderlist["+this.id+"] {\n                        flex-direction: column;\n                    }\n\n                    .p-orderlist["+this.id+"] .p-orderlist-controls {\n                        padding: var(--content-padding);\n                        flex-direction: row;\n                    }\n\n                    .p-orderlist["+this.id+"] .p-orderlist-controls .p-button {\n                        margin-right: var(--inline-spacing);\n                        margin-bottom: 0;\n                    }\n\n                    .p-orderlist["+this.id+"] .p-orderlist-controls .p-button:last-child {\n                        margin-right: 0;\n                    }\n                }\n            ";this.styleElement.innerHTML=t}},t.prototype.destroyStyle=function(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},t.prototype.ngOnDestroy=function(){this.destroyStyle()},t}();c.decorators=[{type:e.Component,args:[{selector:"p-orderList",template:'\n        <div [ngClass]="{\'p-orderlist p-component\': true, \'p-orderlist-controls-left\': controlsPosition === \'left\',\n                    \'p-orderlist-controls-right\': controlsPosition === \'right\'}" [ngStyle]="style" [class]="styleClass">\n            <div class="p-orderlist-controls">\n                <button type="button" pButton pRipple icon="pi pi-angle-up" (click)="moveUp()"></button>\n                <button type="button" pButton pRipple icon="pi pi-angle-double-up" (click)="moveTop()"></button>\n                <button type="button" pButton pRipple icon="pi pi-angle-down" (click)="moveDown()"></button>\n                <button type="button" pButton pRipple icon="pi pi-angle-double-down" (click)="moveBottom()"></button>\n            </div>\n            <div class="p-orderlist-list-container">\n                <div class="p-orderlist-header" *ngIf="header">\n                    <div class="p-orderlist-title">{{header}}</div>\n                </div>\n                <div class="p-orderlist-filter-container" *ngIf="filterBy">\n                    <div class="p-orderlist-filter">\n                        <input type="text" role="textbox" (keyup)="onFilterKeyup($event)" class="p-orderlist-filter-input p-inputtext p-component" [attr.placeholder]="filterPlaceholder" [attr.aria-label]="ariaFilterLabel">\n                        <span class="p-orderlist-filter-icon pi pi-search"></span>\n                    </div>\n                </div>\n                <ul #listelement cdkDropList (cdkDropListDropped)="onDrop($event)" class="p-orderlist-list" [ngStyle]="listStyle">\n                    <ng-template ngFor [ngForTrackBy]="trackBy" let-item [ngForOf]="value" let-i="index" let-l="last">\n                        <li class="p-orderlist-item" tabindex="0" [ngClass]="{\'p-highlight\':isSelected(item)}" cdkDrag pRipple [cdkDragData]="item" [cdkDragDisabled]="!dragdrop"\n                            (click)="onItemClick($event,item,i)" (touchend)="onItemTouchEnd()" (keydown)="onItemKeydown($event,item,i)"\n                             *ngIf="isItemVisible(item)" role="option" [attr.aria-selected]="isSelected(item)">\n                            <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\n    ',changeDetection:e.ChangeDetectionStrategy.OnPush,encapsulation:e.ViewEncapsulation.None,styles:[".p-orderlist{display:flex}.p-orderlist-controls{display:flex;flex-direction:column;justify-content:center}.p-orderlist-list-container{flex:1 1 auto}.p-orderlist-list{list-style-type:none;margin:0;min-height:12rem;overflow:auto;padding:0}.p-orderlist-item{cursor:pointer;display:block;overflow:hidden;position:relative}.p-orderlist-item:not(.cdk-drag-disabled){cursor:move}.p-orderlist-item.cdk-drag-placeholder{opacity:0}.p-orderlist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-orderlist.p-state-disabled .p-button,.p-orderlist.p-state-disabled .p-orderlist-item{cursor:default}.p-orderlist.p-state-disabled .p-orderlist-list{overflow:hidden}.p-orderlist-filter{position:relative}.p-orderlist-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-orderlist-filter-input{width:100%}.p-orderlist-controls-right .p-orderlist-controls{order:2}.p-orderlist-controls-right .p-orderlist-list-container{order:1}.p-orderlist-list.cdk-drop-list-dragging .p-orderlist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],c.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef},{type:r.FilterService}]},c.propDecorators={header:[{type:e.Input}],style:[{type:e.Input}],styleClass:[{type:e.Input}],listStyle:[{type:e.Input}],responsive:[{type:e.Input}],filterBy:[{type:e.Input}],filterPlaceholder:[{type:e.Input}],filterLocale:[{type:e.Input}],metaKeySelection:[{type:e.Input}],dragdrop:[{type:e.Input}],controlsPosition:[{type:e.Input}],ariaFilterLabel:[{type:e.Input}],filterMatchMode:[{type:e.Input}],breakpoint:[{type:e.Input}],selectionChange:[{type:e.Output}],trackBy:[{type:e.Input}],onReorder:[{type:e.Output}],onSelectionChange:[{type:e.Output}],onFilterEvent:[{type:e.Output}],listViewChild:[{type:e.ViewChild,args:["listelement"]}],templates:[{type:e.ContentChildren,args:[r.PrimeTemplate]}],selection:[{type:e.Input}],value:[{type:e.Input}]};var h=function(){};h.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule,n.ButtonModule,r.SharedModule,s.RippleModule,p.DragDropModule],exports:[c,r.SharedModule,p.DragDropModule],declarations:[c]}]}],t.OrderList=c,t.OrderListModule=h,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-orderlist.umd.min.js.map