UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Build Status](https://travis-ci.org/primefaces/primeng.

2 lines 13.6 kB
!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")):"function"==typeof define&&define.amd?define("primeng/listbox",["exports","@angular/core","@angular/common","primeng/api","primeng/dom","primeng/utils","@angular/forms"],t):t(((e=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)}(this,(function(e,t,i,o,n,l,r){"use strict";var s=this&&this.__decorate||function(e,t,i,o){var n,l=arguments.length,r=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(r=(l<3?n(r):l>3?n(t,i,r):n(t,i))||r);return l>3&&r&&Object.defineProperty(t,i,r),r},a=this&&this.__read||function(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var o,n,l=i.call(e),r=[];try{for(;(void 0===t||t-- >0)&&!(o=l.next()).done;)r.push(o.value)}catch(e){n={error:e}}finally{try{o&&!o.done&&(i=l.return)&&i.call(l)}finally{if(n)throw n.error}}return r},u=this&&this.__spread||function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(a(arguments[t]));return e},p=this&&this.__values||function(e){var t="function"==typeof Symbol&&Symbol.iterator,i=t&&e[t],o=0;if(i)return i.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")},c={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return d})),multi:!0},d=function(){function e(e,i){this.el=e,this.cd=i,this.checkbox=!1,this.filter=!1,this.filterMode="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(){},this.disabledSelectedOptions=[]}return Object.defineProperty(e.prototype,"options",{get:function(){return this._options},set:function(e){var t=this.optionLabel?l.ObjectUtils.generateSelectItems(e,this.optionLabel):e;this._options=t},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"filterValue",{get:function(){return this._filterValue},set:function(e){this._filterValue=e},enumerable:!0,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"item":default:e.itemTemplate=t.template}}))},e.prototype.writeValue=function(e){this.value=e,this.setDisabledSelectedOptions(),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},e.prototype.onOptionClick=function(e,t){this.disabled||t.disabled||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,t){this.disabled||t.disabled||this.readonly||(this.optionTouched=!0)},e.prototype.onOptionDoubleClick=function(e,t){this.disabled||t.disabled||this.readonly||this.onDblClick.emit({originalEvent:e,option:t,value:this.value})},e.prototype.onOptionClickSingle=function(e,t){var i=this.isSelected(t),o=!1;if(!this.optionTouched&&this.metaKeySelection){var n=e.metaKey||e.ctrlKey;i?n&&(this.value=null,o=!0):(this.value=t.value,o=!0)}else this.value=i?null:t.value,o=!0;o&&(this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}))},e.prototype.onOptionClickMultiple=function(e,t){var i=this.isSelected(t),o=!1;if(!this.optionTouched&&this.metaKeySelection){var n=e.metaKey||e.ctrlKey;i?(n?this.removeOption(t):this.value=[t.value],o=!0):(this.value=n&&this.value||[],this.value=u(this.value,[t.value]),o=!0)}else i?this.removeOption(t):this.value=u(this.value||[],[t.value]),o=!0;o&&(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=u(this.value,[t.value])),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,e.value,t.dataKey)}))},e.prototype.isSelected=function(e){var t,i,o=!1;if(this.multiple){if(this.value)try{for(var n=p(this.value),r=n.next();!r.done;r=n.next()){var s=r.value;if(l.ObjectUtils.equals(s,e.value,this.dataKey)){o=!0;break}}}catch(e){t={error:e}}finally{try{r&&!r.done&&(i=n.return)&&i.call(n)}finally{if(t)throw t.error}}}else o=l.ObjectUtils.equals(this.value,e.value,this.dataKey);return o},Object.defineProperty(e.prototype,"allChecked",{get:function(){if(this.filterValue)return this.allFilteredSelected();var e=this.getEnabledOptionCount(),t=this.disabledSelectedOptions.length;return this.value&&this.options&&this.value.length>0&&this.value.length==e+t},enumerable:!0,configurable:!0}),e.prototype.getEnabledOptionCount=function(){var e,t;if(this.options){var i=0;try{for(var o=p(this.options),n=o.next();!n.done;n=o.next()){n.value.disabled||i++}}catch(t){e={error:t}}finally{try{n&&!n.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}return i}return 0},e.prototype.allFilteredSelected=function(){var e,t,i,o=this.filterValue?this.getFilteredOptions():this.options;if(this.value&&o&&o.length){i=!0;try{for(var n=p(this.options),l=n.next();!l.done;l=n.next()){var r=l.value;if(this.isItemVisible(r)&&!this.isSelected(r)){i=!1;break}}}catch(t){e={error:t}}finally{try{l&&!l.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}}return i},e.prototype.onFilter=function(e){this._filterValue=e.target.value},e.prototype.toggleAll=function(e){if(!this.disabled&&!this.readonly&&this.options&&0!==this.options.length){if(this.allChecked)if(this.disabledSelectedOptions&&this.disabledSelectedOptions.length>0){var t;t=u(this.disabledSelectedOptions),this.value=t}else this.value=[];else if(this.options){this.value=[],this.disabledSelectedOptions&&this.disabledSelectedOptions.length>0&&(this.value=u(this.disabledSelectedOptions));for(var i=0;i<this.options.length;i++){var o=this.options[i];this.isItemVisible(o)&&!o.disabled&&this.value.push(o.value)}}this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}),e.preventDefault()}},e.prototype.isItemVisible=function(e){if(this.filterValue){l.ObjectUtils.removeAccents(this.filterValue).toLowerCase();return!this.filterMode||l.FilterUtils[this.filterMode](e.label,this.filterValue)}return!0},e.prototype.onInputFocus=function(e){this.focus=!0},e.prototype.onInputBlur=function(e){this.focus=!1},e.prototype.onOptionKeyDown=function(e,t){if(!this.readonly){var i=e.currentTarget;switch(e.which){case 40:var o=this.findNextItem(i);o&&o.focus(),e.preventDefault();break;case 38:var n=this.findPrevItem(i);n&&n.focus(),e.preventDefault();break;case 13:this.onOptionClick(e,t),e.preventDefault()}}},e.prototype.findNextItem=function(e){var t=e.nextElementSibling;return t?n.DomHandler.hasClass(t,"ui-state-disabled")||n.DomHandler.isHidden(t)?this.findNextItem(t):t:null},e.prototype.findPrevItem=function(e){var t=e.previousElementSibling;return t?n.DomHandler.hasClass(t,"ui-state-disabled")||n.DomHandler.isHidden(t)?this.findPrevItem(t):t:null},e.prototype.getFilteredOptions=function(){var e=[];if(this.filterValue){for(var t=0;t<this.options.length;t++){var i=this.options[t];this.isItemVisible(i)&&!i.disabled&&e.push(i)}return e}return this.options},e.prototype.onHeaderCheckboxFocus=function(){this.headerCheckboxFocus=!0},e.prototype.onHeaderCheckboxBlur=function(){this.headerCheckboxFocus=!1},e.prototype.setDisabledSelectedOptions=function(){var e,t;if(this.options&&(this.disabledSelectedOptions=[],this.value))try{for(var i=p(this.options),o=i.next();!o.done;o=i.next()){var n=o.value;n.disabled&&this.isSelected(n)&&this.disabledSelectedOptions.push(n.value)}}catch(t){e={error:t}}finally{try{o&&!o.done&&(t=i.return)&&t.call(i)}finally{if(e)throw e.error}}},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ChangeDetectorRef}]},s([t.Input()],e.prototype,"multiple",void 0),s([t.Input()],e.prototype,"style",void 0),s([t.Input()],e.prototype,"styleClass",void 0),s([t.Input()],e.prototype,"listStyle",void 0),s([t.Input()],e.prototype,"readonly",void 0),s([t.Input()],e.prototype,"disabled",void 0),s([t.Input()],e.prototype,"checkbox",void 0),s([t.Input()],e.prototype,"filter",void 0),s([t.Input()],e.prototype,"filterMode",void 0),s([t.Input()],e.prototype,"metaKeySelection",void 0),s([t.Input()],e.prototype,"dataKey",void 0),s([t.Input()],e.prototype,"showToggleAll",void 0),s([t.Input()],e.prototype,"optionLabel",void 0),s([t.Input()],e.prototype,"ariaFilterLabel",void 0),s([t.Input()],e.prototype,"filterPlaceHolder",void 0),s([t.Output()],e.prototype,"onChange",void 0),s([t.Output()],e.prototype,"onClick",void 0),s([t.Output()],e.prototype,"onDblClick",void 0),s([t.ViewChild("headerchkbox")],e.prototype,"headerCheckboxViewChild",void 0),s([t.ContentChild(o.Header)],e.prototype,"headerFacet",void 0),s([t.ContentChild(o.Footer)],e.prototype,"footerFacet",void 0),s([t.ContentChildren(o.PrimeTemplate)],e.prototype,"templates",void 0),s([t.Input()],e.prototype,"options",null),s([t.Input()],e.prototype,"filterValue",null),e=s([t.Component({selector:"p-listbox",template:'\n <div [ngClass]="{\'ui-listbox ui-inputtext ui-widget ui-widget-content ui-corner-all\':true,\'ui-state-disabled\':disabled,\'ui-state-focus\':focus}" [ngStyle]="style" [class]="styleClass">\n <div class="ui-helper-hidden-accessible">\n <input type="text" readonly="readonly" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)">\n </div>\n <div class="ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix" *ngIf="headerFacet">\n <ng-content select="p-header"></ng-content>\n </div>\n <div class="ui-widget-header ui-corner-all ui-listbox-header ui-helper-clearfix" *ngIf="(checkbox && multiple && showToggleAll) || filter" [ngClass]="{\'ui-listbox-header-w-checkbox\': checkbox}">\n <div class="ui-chkbox ui-widget" *ngIf="checkbox && multiple && showToggleAll">\n <div class="ui-helper-hidden-accessible">\n <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)">\n </div>\n <div #headerchkbox class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" [ngClass]="{\'ui-state-active\': allChecked, \'ui-state-focus\': headerCheckboxFocus}" (click)="toggleAll($event)">\n <span class="ui-chkbox-icon ui-clickable" [ngClass]="{\'pi pi-check\':allChecked}"></span>\n </div>\n </div>\n <div class="ui-listbox-filter-container" *ngIf="filter">\n <input type="text" [value]="filterValue||\'\'" (input)="onFilter($event)" class="ui-inputtext ui-widget ui-state-default ui-corner-all" [disabled]="disabled" [attr.placeholder]="filterPlaceHolder" [attr.aria-label]="ariaFilterLabel">\n <span class="ui-listbox-filter-icon pi pi-search"></span>\n </div>\n </div>\n <div class="ui-listbox-list-wrapper" [ngStyle]="listStyle">\n <ul class="ui-listbox-list" role="listbox" aria-multiselectable="multiple">\n <li *ngFor="let option of options; let i = index;" [style.display]="isItemVisible(option) ? \'block\' : \'none\'" [attr.tabindex]="option.disabled ? null : \'0\'"\n [ngClass]="{\'ui-listbox-item ui-corner-all\':true,\'ui-state-highlight\':isSelected(option), \'ui-state-disabled\': option.disabled}" role="option" [attr.aria-label]="option.label"\n [attr.aria-selected]="isSelected(option)" (click)="onOptionClick($event,option)" (dblclick)="onOptionDoubleClick($event,option)" (touchend)="onOptionTouchEnd($event,option)" (keydown)="onOptionKeyDown($event,option)">\n <div class="ui-chkbox ui-widget" *ngIf="checkbox && multiple">\n <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" [ngClass]="{\'ui-state-active\':isSelected(option)}">\n <span class="ui-chkbox-icon ui-clickable" [ngClass]="{\'pi pi-check\':isSelected(option)}"></span>\n </div>\n </div>\n <span *ngIf="!itemTemplate">{{option.label}}</span>\n <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>\n </li>\n </ul>\n </div>\n <div class="ui-listbox-footer ui-widget-header ui-corner-all" *ngIf="footerFacet">\n <ng-content select="p-footer"></ng-content>\n </div>\n </div>\n ',providers:[c],changeDetection:t.ChangeDetectionStrategy.Default})],e)}(),h=function(){function e(){}return e=s([t.NgModule({imports:[i.CommonModule,o.SharedModule],exports:[d,o.SharedModule],declarations:[d]})],e)}();e.LISTBOX_VALUE_ACCESSOR=c,e.Listbox=d,e.ListboxModule=h,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=primeng-listbox.umd.min.js.map