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

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("primeng/api"),require("primeng/dom"),require("primeng/utils"),require("@angular/forms"),require("primeng/ripple")):"function"==typeof define&&define.amd?define("primeng/listbox",["exports","@angular/core","@angular/common","primeng/api","primeng/dom","primeng/utils","@angular/forms","primeng/ripple"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.listbox={}),e.ng.core,e.ng.common,e.primeng.api,e.primeng.dom,e.primeng.utils,e.ng.forms,e.primeng.ripple)}(this,(function(e,t,i,n,o,l,r,a){"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 s(e){var t="function"==typeof Symbol&&Symbol.iterator,i=t&&e[t],n=0;if(i)return i.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function p(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,o,l=i.call(e),r=[];try{for(;(void 0===t||t-- >0)&&!(n=l.next()).done;)r.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(i=l.return)&&i.call(l)}finally{if(o)throw o.error}}return r}function c(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(p(arguments[t]));return e}Object.create;var u={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return h})),multi:!0},h=function(){function e(e,i,n){this.el=e,this.cd=i,this.filterService=n,this.checkbox=!1,this.filter=!1,this.filterMatchMode="contains",this.metaKeySelection=!0,this.showToggleAll=!0,this.onChange=new t.EventEmitter,this.onClick=new t.EventEmitter,this.onDblClick=new t.EventEmitter,this.onModelChange=function(){},this.onModelTouched=function(){}}return Object.defineProperty(e.prototype,"options",{get:function(){return this._options},set:function(e){this._options=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"filterValue",{get:function(){return this._filterValue},set:function(e){this._filterValue=e,this.activateFilter()},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"item":e.itemTemplate=t.template;break;case"group":e.groupTemplate=t.template;break;case"header":e.headerTemplate=t.template;break;case"footer":e.footerTemplate=t.template;break;default:e.itemTemplate=t.template}}))},e.prototype.getOptionLabel=function(e){return this.optionLabel?l.ObjectUtils.resolveFieldData(e,this.optionLabel):null!=e.label?e.label:e},e.prototype.getOptionGroupChildren=function(e){return this.optionGroupChildren?l.ObjectUtils.resolveFieldData(e,this.optionGroupChildren):e.items},e.prototype.getOptionGroupLabel=function(e){return this.optionGroupLabel?l.ObjectUtils.resolveFieldData(e,this.optionGroupLabel):null!=e.label?e.label:e},e.prototype.getOptionValue=function(e){return this.optionValue?l.ObjectUtils.resolveFieldData(e,this.optionValue):this.optionLabel?e:e.value},e.prototype.isOptionDisabled=function(e){return this.optionDisabled?l.ObjectUtils.resolveFieldData(e,this.optionDisabled):void 0!==e.disabled&&e.disabled},e.prototype.writeValue=function(e){this.value=e,this.cd.markForCheck()},e.prototype.registerOnChange=function(e){this.onModelChange=e},e.prototype.registerOnTouched=function(e){this.onModelTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e,this.cd.markForCheck()},e.prototype.onOptionClick=function(e,t){this.disabled||this.isOptionDisabled(t)||this.readonly||(this.multiple?this.checkbox?this.onOptionClickCheckbox(e,t):this.onOptionClickMultiple(e,t):this.onOptionClickSingle(e,t),this.onClick.emit({originalEvent:e,option:t,value:this.value}),this.optionTouched=!1)},e.prototype.onOptionTouchEnd=function(e){this.disabled||this.isOptionDisabled(e)||this.readonly||(this.optionTouched=!0)},e.prototype.onOptionDoubleClick=function(e,t){this.disabled||this.isOptionDisabled(t)||this.readonly||this.onDblClick.emit({originalEvent:e,option:t,value:this.value})},e.prototype.onOptionClickSingle=function(e,t){var i=this.isSelected(t),n=!1;if(!this.optionTouched&&this.metaKeySelection){var o=e.metaKey||e.ctrlKey;i?o&&(this.value=null,n=!0):(this.value=this.getOptionValue(t),n=!0)}else this.value=i?null:this.getOptionValue(t),n=!0;n&&(this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}))},e.prototype.onOptionClickMultiple=function(e,t){var i=this.isSelected(t),n=!1;if(!this.optionTouched&&this.metaKeySelection){var o=e.metaKey||e.ctrlKey;i?(o?this.removeOption(t):this.value=[this.getOptionValue(t)],n=!0):(this.value=o&&this.value||[],this.value=c(this.value,[this.getOptionValue(t)]),n=!0)}else i?this.removeOption(t):this.value=c(this.value||[],[this.getOptionValue(t)]),n=!0;n&&(this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}))},e.prototype.onOptionClickCheckbox=function(e,t){this.disabled||this.readonly||(this.isSelected(t)?this.removeOption(t):(this.value=this.value?this.value:[],this.value=c(this.value,[this.getOptionValue(t)])),this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}))},e.prototype.removeOption=function(e){var t=this;this.value=this.value.filter((function(i){return!l.ObjectUtils.equals(i,t.getOptionValue(e),t.dataKey)}))},e.prototype.isSelected=function(e){var t,i,n=!1,o=this.getOptionValue(e);if(this.multiple){if(this.value)try{for(var r=s(this.value),a=r.next();!a.done;a=r.next()){var p=a.value;if(l.ObjectUtils.equals(p,o,this.dataKey)){n=!0;break}}}catch(e){t={error:e}}finally{try{a&&!a.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}else n=l.ObjectUtils.equals(this.value,o,this.dataKey);return n},Object.defineProperty(e.prototype,"allChecked",{get:function(){var e,t,i,n,o=this.optionsToRender;if(o&&0!==o.length){var l=0,r=0,a=0,p=this.group?0:this.optionsToRender.length;try{for(var c=s(o),u=c.next();!u.done;u=c.next()){var h=u.value;if(this.group){if(h.items)try{for(var d=(i=void 0,s(h.items)),f=d.next();!f.done;f=d.next()){var g=f.value;b=this.isOptionDisabled(g),m=this.isSelected(g);if(b)m?l++:r++;else{if(!m)return!1;a++}p++}}catch(e){i={error:e}}finally{try{f&&!f.done&&(n=d.return)&&n.call(d)}finally{if(i)throw i.error}}}else{var b=this.isOptionDisabled(h),m=this.isSelected(h);if(b)m?l++:r++;else{if(!m)return!1;a++}}}}catch(t){e={error:t}}finally{try{u&&!u.done&&(t=c.return)&&t.call(c)}finally{if(e)throw e.error}}return p===l||p===a||a&&p===a+r+l}return!1},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"optionsToRender",{get:function(){return this._filteredOptions||this.options},enumerable:!1,configurable:!0}),e.prototype.hasFilter=function(){return this._filterValue&&this._filterValue.trim().length>0},e.prototype.onFilter=function(e){this._filterValue=e.target.value,this.activateFilter()},e.prototype.activateFilter=function(){var e,t,i=this;if(this.hasFilter()&&this._options)if(this.group){var n=(this.optionLabel||"label").split(","),o=[];try{for(var l=s(this.options),r=l.next();!r.done;r=l.next()){var a=r.value,p=this.filterService.filter(this.getOptionGroupChildren(a),n,this.filterValue,this.filterMatchMode,this.filterLocale);p&&p.length&&o.push({label:a.label,value:a.value,items:p})}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=l.return)&&t.call(l)}finally{if(e)throw e.error}}this._filteredOptions=o}else this._filteredOptions=this._options.filter((function(e){return i.filterService.filters[i.filterMatchMode](i.getOptionLabel(e),i._filterValue,i.filterLocale)}));else this._filteredOptions=null},Object.defineProperty(e.prototype,"toggleAllDisabled",{get:function(){var e,t,i=this.optionsToRender;if(i&&0!==i.length){try{for(var n=s(i),o=n.next();!o.done;o=n.next()){var l=o.value;if(!this.isOptionDisabled(l))return!1}}catch(t){e={error:t}}finally{try{o&&!o.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}return!0}return!0},enumerable:!1,configurable:!0}),e.prototype.toggleAll=function(e){this.disabled||this.toggleAllDisabled||this.readonly||(this.allChecked?this.uncheckAll():this.checkAll(),this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}),e.preventDefault())},e.prototype.checkAll=function(){var e=this,t=this.optionsToRender,i=[];t.forEach((function(t){if(e.group)t.items&&t.items.forEach((function(t){var n=e.isOptionDisabled(t);(!n||n&&e.isSelected(t))&&i.push(e.getOptionValue(t))}));else{var n=e.isOptionDisabled(t);(!n||n&&e.isSelected(t))&&i.push(e.getOptionValue(t))}})),this.value=i},e.prototype.uncheckAll=function(){var e=this,t=this.optionsToRender,i=[];t.forEach((function(t){e.group?t.items&&t.items.forEach((function(t){e.isOptionDisabled(t)&&e.isSelected(t)&&i.push(e.getOptionValue(t))})):e.isOptionDisabled(t)&&e.isSelected(t)&&i.push(e.getOptionValue(t))})),this.value=i},e.prototype.onOptionKeyDown=function(e,t){if(!this.readonly){var i=e.currentTarget;switch(e.which){case 40:var n=this.findNextItem(i);n&&n.focus(),e.preventDefault();break;case 38:var o=this.findPrevItem(i);o&&o.focus(),e.preventDefault();break;case 13:this.onOptionClick(e,t),e.preventDefault()}}},e.prototype.findNextItem=function(e){var t=e.nextElementSibling;return t?o.DomHandler.hasClass(t,"p-disabled")||o.DomHandler.isHidden(t)||o.DomHandler.hasClass(t,"p-listbox-item-group")?this.findNextItem(t):t:null},e.prototype.findPrevItem=function(e){var t=e.previousElementSibling;return t?o.DomHandler.hasClass(t,"p-disabled")||o.DomHandler.isHidden(t)||o.DomHandler.hasClass(t,"p-listbox-item-group")?this.findPrevItem(t):t:null},e.prototype.onHeaderCheckboxFocus=function(){this.headerCheckboxFocus=!0},e.prototype.onHeaderCheckboxBlur=function(){this.headerCheckboxFocus=!1},e}();h.decorators=[{type:t.Component,args:[{selector:"p-listbox",template:'\n    <div [ngClass]="{\'p-listbox p-component\': true, \'p-disabled\': disabled}" [ngStyle]="style" [class]="styleClass">\n      <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">\n        <ng-content select="p-header"></ng-content>\n        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>\n      </div>\n      <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">\n        <div class="p-checkbox p-component" *ngIf="checkbox && multiple && showToggleAll" [ngClass]="{\'p-checkbox-disabled\': disabled || toggleAllDisabled}">\n          <div class="p-hidden-accessible">\n            <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)" [attr.disabled]="disabled || toggleAllDisabled">\n          </div>\n          <div #headerchkbox class="p-checkbox-box" [ngClass]="{\'p-highlight\': allChecked, \'p-focus\': headerCheckboxFocus, \'p-disabled\': disabled || toggleAllDisabled}" (click)="toggleAll($event)">\n            <span class="p-checkbox-icon" [ngClass]="{\'pi pi-check\':allChecked}"></span>\n          </div>\n        </div>\n        <div class="p-listbox-filter-container" *ngIf="filter">\n          <input type="text" [value]="filterValue||\'\'" (input)="onFilter($event)" class="p-listbox-filter p-inputtext p-component" [disabled]="disabled" [attr.placeholder]="filterPlaceHolder" [attr.aria-label]="ariaFilterLabel">\n          <span class="p-listbox-filter-icon pi pi-search"></span>\n        </div>\n      </div>\n      <div [ngClass]="\'p-listbox-list-wrapper\'" [ngStyle]="listStyle" [class]="listStyleClass">\n        <ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">\n            <ng-container *ngIf="group">\n                <ng-template ngFor let-optgroup [ngForOf]="optionsToRender">\n                    <li class="p-listbox-item-group">\n                        <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||\'empty\'}}</span>\n                        <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>\n                    </li>\n                    <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup)}"></ng-container>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngIf="!group">\n                    <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToRender}"></ng-container>\n            </ng-container>\n            <ng-template #itemslist let-optionsToDisplay>\n                <li *ngFor="let option of optionsToDisplay; let i = index;" [attr.tabindex]="disabled || isOptionDisabled(option) ? null : \'0\'" pRipple\n                    [ngClass]="{\'p-listbox-item\':true,\'p-highlight\':isSelected(option), \'p-disabled\': this.isOptionDisabled(option)}" role="option" [attr.aria-label]="getOptionLabel(option)"\n                    [attr.aria-selected]="isSelected(option)" (click)="onOptionClick($event,option)" (dblclick)="onOptionDoubleClick($event,option)" (touchend)="onOptionTouchEnd(option)" (keydown)="onOptionKeyDown($event,option)">\n                    <div class="p-checkbox p-component" *ngIf="checkbox && multiple" [ngClass]="{\'p-checkbox-disabled\': disabled || isOptionDisabled(option)}">\n                        <div class="p-checkbox-box" [ngClass]="{\'p-highlight\':isSelected(option)}">\n                            <span class="p-checkbox-icon" [ngClass]="{\'pi pi-check\':isSelected(option)}"></span>\n                        </div>\n                    </div>\n                    <span *ngIf="!itemTemplate">{{getOptionLabel(option)}}</span>\n                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>\n                </li>\n            </ng-template>\n        </ul>\n      </div>\n      <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">\n        <ng-content select="p-footer"></ng-content>\n        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>\n      </div>\n    </div>\n  ',providers:[u],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;overflow:hidden;position:relative;user-select:none}.p-listbox-header,.p-listbox-item{align-items:center;display:flex}.p-listbox-filter-container{flex:1 1 auto;position:relative}.p-listbox-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-listbox-filter{width:100%}"]}]}],h.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ChangeDetectorRef},{type:n.FilterService}]},h.propDecorators={multiple:[{type:t.Input}],style:[{type:t.Input}],styleClass:[{type:t.Input}],listStyle:[{type:t.Input}],listStyleClass:[{type:t.Input}],readonly:[{type:t.Input}],disabled:[{type:t.Input}],checkbox:[{type:t.Input}],filter:[{type:t.Input}],filterMatchMode:[{type:t.Input}],filterLocale:[{type:t.Input}],metaKeySelection:[{type:t.Input}],dataKey:[{type:t.Input}],showToggleAll:[{type:t.Input}],optionLabel:[{type:t.Input}],optionValue:[{type:t.Input}],optionGroupChildren:[{type:t.Input}],optionGroupLabel:[{type:t.Input}],optionDisabled:[{type:t.Input}],ariaFilterLabel:[{type:t.Input}],filterPlaceHolder:[{type:t.Input}],group:[{type:t.Input}],onChange:[{type:t.Output}],onClick:[{type:t.Output}],onDblClick:[{type:t.Output}],headerCheckboxViewChild:[{type:t.ViewChild,args:["headerchkbox"]}],headerFacet:[{type:t.ContentChild,args:[n.Header]}],footerFacet:[{type:t.ContentChild,args:[n.Footer]}],templates:[{type:t.ContentChildren,args:[n.PrimeTemplate]}],options:[{type:t.Input}],filterValue:[{type:t.Input}]};var d=function(){};d.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,n.SharedModule,a.RippleModule],exports:[h,n.SharedModule],declarations:[h]}]}],e.LISTBOX_VALUE_ACCESSOR=u,e.Listbox=h,e.ListboxModule=d,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-listbox.umd.min.js.map