@jchinc/ng-multiselect/bundles/ng-multiselect.umd.min.js

Control de selección múltiple de elementos

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("rxjs/add/operator/debounceTime")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/common","rxjs/add/operator/debounceTime"],t):t(e.ngMultiselect={},e.ng.core,e.ng.forms,e.ng.common)}(this,function(e,t,n,i){"use strict";var s=function(){return function(e,t,n,i,s){void 0===e&&(e=""),void 0===t&&(t=""),void 0===n&&(n=""),void 0===i&&(i=!1),void 0===s&&(s=[]),this.key=e,this.value=t,this.valueSecondary=n,this.selected=i,this.filters=s}}(),o=function(){function e(e,n){this._renderer=e,this._formBuilder=n,this.dropdownVisible=!1,this.filteredItems=[],this.selectedItemsKeys="",this._hoveredItemIndex=-1,this._selectedItems=[],this._listItemHeight=44,this.source=[],this.top=0,this.onlyOneRow=!1,this.inputSearchPlaceHolder="Buscar",this.disabled=!1,this.toggleButtonText="",this.noRowsText="No existen registros",this.accentInsensitive=!1,this.toggleButtonClasses=[],this.selectedItemsChanged=new t.EventEmitter,this.selectedItemsKeysChanged=new t.EventEmitter,this._createForm()}return Object.defineProperty(e.prototype,"term",{get:function(){return this.selectForm.get("term").value},set:function(e){this.selectForm.get("term").setValue(e)},enumerable:!0,configurable:!0}),e.prototype.documentClick=function(e){e.target&&(this._containerRef.nativeElement.contains(e.target)||this._hideDropdown())},e.prototype.documentKeyup=function(e){27===e.keyCode&&this._hideDropdown()},e.prototype.ngOnChanges=function(e){e.source&&this._initialize()},e.prototype.ngOnInit=function(){this._initialize()},e.prototype.selectItem=function(e){this.onlyOneRow&&this.source.forEach(function(e){e.selected=!1}),e.selected=!e.selected,this._setSelectedItems(),this._hoveredItemIndex=-1,this.hoveredItem=null,this.onlyOneRow&&this._hideDropdown()},e.prototype.toggleButtonClick=function(){this.dropdownVisible?this._hideDropdown():this._showDropdown()},e.prototype.selectUnselectAll=function(){var e=this;this.itemAll.selected=!this.itemAll.selected,this.filteredItems.forEach(function(t){t.selected=e.itemAll.selected}),this._setSelectedItems()},e.prototype.clearTerm=function(){this.term="",this._inputRef.nativeElement.focus()},e.prototype.inputKeyup=function(e){var t=this.filteredItems.length;if(0!==t)switch(e.keyCode){case 13:e.preventDefault(),this.filteredItems.length>0&&-1!==this._hoveredItemIndex&&this.selectItem(this.hoveredItem);break;case 38:this._hoveredItemIndex>0?this._hoveredItemIndex-=1:this._hoveredItemIndex=t-1,this.hoveredItem=this.filteredItems[this._hoveredItemIndex],this._scrollToView(this._hoveredItemIndex);break;case 40:this._hoveredItemIndex<t-1?this._hoveredItemIndex+=1:this._hoveredItemIndex=0,this.hoveredItem=this.filteredItems[this._hoveredItemIndex],this._scrollToView(this._hoveredItemIndex)}},e.prototype._initialize=function(){this.itemAll=new s("0","Seleccionar todo"),this.term="",this.selectedItemsKeys=this.toggleButtonText,this._filterData(),this._setSelectedItems()},e.prototype._createForm=function(){var e=this,t=this._formBuilder.control("");t.valueChanges.debounceTime(50).subscribe(function(t){e._filterData(t)}),this.selectForm=this._formBuilder.group({term:t})},e.prototype._filterData=function(e){var t=this.top>0?this.top:this.source.length;if(e){this.filteredItems.length=0;for(var n=0,i=this.source;n<i.length;n++){var s=i[n];if(this._match(s,e)&&this.filteredItems.push(s),this.filteredItems.length===t)break}}else this.filteredItems=this.source.slice(0,t)},e.prototype._match=function(e,t){var n=!1,i=this.accentInsensitive?_.deburr(t.toLowerCase()):t.toLowerCase();if(-1!==(this.accentInsensitive?_.deburr(e.value.toLowerCase()):e.value.toLowerCase()).indexOf(i))n=!0;else if(e.filters)for(var s=0,o=e.filters;s<o.length;s++){var l=o[s];if(l)if(-1!==(this.accentInsensitive?_.deburr(l.toLowerCase()):l.toLowerCase()).indexOf(i)){n=!0;break}}return n},e.prototype._showDropdown=function(){this.dropdownVisible=!0,this._renderer.setStyle(this._dropdownRef.nativeElement,"display","flex"),this._inputRef.nativeElement.focus()},e.prototype._hideDropdown=function(){this.dropdownVisible=!1,this._renderer.setStyle(this._dropdownRef.nativeElement,"display","none")},e.prototype._setSelectedItems=function(){var e=this,t=this._selectedItems.length;this._selectedItems=[],this.selectedItemsKeys="",this.source.filter(function(e){return e.selected}).forEach(function(n){e._selectedItems.push(n),e.onlyOneRow?(e.selectedItemsKeys=n.value,t=0):e.selectedItemsKeys=e.selectedItemsKeys+(e.selectedItemsKeys.length?",":"")+n.key}),0===this._selectedItems.length&&(this.selectedItemsKeys=this.toggleButtonText),t!==this._selectedItems.length&&this.selectedItemsChanged.emit(this._selectedItems)},e.prototype._scrollToView=function(e){if(this._dropdownItemsRef){var t=this._dropdownItemsRef.nativeElement,n=t.scrollTop,i=n+t.offsetHeight,s=this._listItemHeight*e;(s<n||s+this._listItemHeight>i)&&(t.scrollTop=s)}},e.decorators=[{type:t.Component,args:[{selector:"ng-multiselect",template:'\n      <div #container\n           class="ng-multiselect"\n           [class.ng-multiselect--disabled]="disabled">\n\n          \x3c!-- Botón toggle --\x3e\n          <div class="ng-multiselect__toggle-button"\n               [ngClass]="toggleButtonClasses"\n               (click)="toggleButtonClick()">\n              <span class="ng-multiselect__toggle-button-value">{{selectedItemsKeys}}</span>\n              <span class="ng-multiselect__toggle-button-caret"></span>\n          </div>\n\n          \x3c!-- Elementos --\x3e\n          <ul #dropdown\n              class="ng-multiselect__dropdown ng-multiselect__dropdown--raised">\n\n              \x3c!-- Elemento: Seleccionar todo --\x3e\n              <li *ngIf="!onlyOneRow"\n                  class="ng-multiselect__item ng-multiselect__item--bordered ng-multiselect__item--accent"\n                  (click)="selectUnselectAll()">\n                  <i *ngIf="itemAll.selected"\n                     class="material-icons ng-multiselect__icon">check_box</i>\n                  <i *ngIf="!itemAll.selected"\n                     class="material-icons ng-multiselect__icon">check_box_outline_blank</i>\n                  <div class="ng-multiselect__item-values">\n                      {{itemAll.value}}\n                  </div>\n              </li>\n\n              \x3c!-- Campo búsqueda --\x3e\n              <form [formGroup]="selectForm">\n                  <li class="ng-multiselect__item ng-multiselect__item--bordered ng-multiselect__item--accent">\n                      <i class="material-icons ng-multiselect__icon">search</i>\n                      <input #input\n                             type="text"\n                             class="ng-multiselect__search"\n                             [placeholder]="inputSearchPlaceHolder"\n                             (keyup)="inputKeyup($event)"\n                             formControlName="term">\n                      <i [style.display]="term?\'inherit\':\'none\'"\n                         class="material-icons ng-multiselect__icon ng-multiselect__icon--close"\n                         (click)="clearTerm()">close</i>\n                  </li>\n              </form>\n\n              \x3c!-- Elementos --\x3e\n              <div #dropdownItems\n                   class="ng-multiselect__items">\n\n                  \x3c!-- No existen registros --\x3e\n                  <li *ngIf="!filteredItems.length"\n                      class="ng-multiselect__item ng-multiselect__item--no-rows">\n                      {{noRowsText}}\n                  </li>\n\n                  \x3c!-- Registros filtrados --\x3e\n                  <li *ngFor="let item of filteredItems"\n                      class="ng-multiselect__item"\n                      [class.ng-multiselect__item--selected]="!onlyOneRow && item===hoveredItem"\n                      [class.ng-multiselect__item--selected]="onlyOneRow && (item.selected || item===hoveredItem)"\n                      (click)="selectItem(item, $event)">\n                      \x3c!-- Elemento seleccionado --\x3e\n                      <i *ngIf="item.selected && !onlyOneRow"\n                         class="material-icons ng-multiselect__icon">check_box</i>\n                      \x3c!-- Elemento NO seleccionado --\x3e\n                      <i *ngIf="!item.selected && !onlyOneRow"\n                         class="material-icons ng-multiselect__icon">check_box_outline_blank</i>\n                      \x3c!-- Texto --\x3e\n                      <div class="ng-multiselect__item-values">\n                          <span class="ng-multiselect__item-value"\n                                [title]="item.value">\n                              {{item.value}}\n                          </span>\n                          <span *ngIf="item.valueSecondary"\n                                class="ng-multiselect__item-value ng-multiselect__item-value--secondary"\n                                [title]="item.valueSecondary">\n                              {{item.valueSecondary}}\n                          </span>\n                      </div>\n                  </li>\n\n              </div>\n\n          </ul>\n      </div>\n    ',styles:['\n      .ng-multiselect {\n          color: #59595A;\n          position: relative;\n          font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;\n          width: 100%;\n      }\n\n      .ng-multiselect--disabled {\n          pointer-events: none;\n          background-color: rgb(235, 235, 228);\n      }\n\n      .ng-multiselect__toggle-button {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          height: 30px;\n          padding: 5px;\n          border: 1px solid #CCC;\n          border-radius: 2px;\n          cursor: pointer;\n      }\n\n      .ng-multiselect__toggle-button-value {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n      }\n\n      .ng-multiselect__toggle-button-caret {\n          width: 0;\n          height: 0;\n          border-top: 4px solid;\n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          margin-left: 11px;\n          margin-right: 6px;\n      }\n\n      .ng-multiselect__dropdown {\n          position: absolute;\n          display: none;\n          flex-direction: column;\n          background-color: #FFFFFF;\n          width: 100%;\n          min-width: 240px;\n          max-height: 360px;\n          list-style-type: none;\n          margin-top: 2px;\n          padding: 0;\n          text-align: left;\n          font-weight: 500;\n          border: 1px solid #CCCCCC;\n          animation: slideDown .1s;\n          cursor: default;\n          z-index: 1000;\n      }\n\n      .ng-multiselect__dropdown-container {\n          display: flex;\n          flex-direction: column;\n      }\n\n      .ng-multiselect__dropdown--raised {\n          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);\n      }\n\n      .ng-multiselect__items {\n          overflow-y: auto;\n      }\n\n      .ng-multiselect__item {\n          display: flex;\n          align-items: center;\n          flex-shrink: 0;\n          padding: 0 10px;\n          height: 44px;\n          font-size: 15px;\n          font-weight: 500;\n          overflow: hidden;\n      }\n\n      .ng-multiselect__item--selected {\n          background-color: #338FFF;\n          font-weight: 700;\n          color: white;\n      }\n\n      .ng-multiselect__item--bordered {\n          border-bottom: 1px solid #CCCCCC;\n      }\n\n      .ng-multiselect__item--accent {\n          background-color: rgba(0, 0, 0, 0.04);\n      }\n\n      .ng-multiselect__item--no-rows {\n          justify-content: center;\n      }\n\n      .ng-multiselect__item-values {\n          display: flex;\n          flex-direction: column;\n          width: 100%;\n          padding-left: 10px;\n          padding-right: 23px;\n      }\n\n      .ng-multiselect__item-value {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n      }\n\n      .ng-multiselect__item-value--secondary {\n          font-size: 0.8em;\n          opacity: 0.6;\n      }\n\n      .ng-multiselect__item:hover:not(.ng-multiselect__item--no-rows):not(.ng-multiselect__item--selected) {\n          background-color: rgba(0, 0, 0, .12);\n      }\n\n      .ng-multiselect__icon {\n          font-size: 22px;\n          pointer-events: none;\n      }\n\n      .ng-multiselect__icon--close {\n          cursor: pointer;\n          pointer-events: initial;\n          opacity: 0.8;\n      }\n\n      .ng-multiselect__search {\n          width: 100%;\n          padding: 10px 3px 10px 10px;\n          border: none;\n          background-color: transparent;\n          outline-style: none;\n          color: inherit;\n          font-size: inherit;\n          font-weight: 400;\n      }\n\n\n      /*\n      Animación al visualizar el dropdown.\n      */\n\n      @keyframes slideDown {\n          0% {\n              transform: translateY(-10px);\n          }\n          100% {\n              transform: translateY(0px);\n          }\n      }\n    ']}]}],e.ctorParameters=function(){return[{type:t.Renderer2},{type:n.FormBuilder}]},e.propDecorators={source:[{type:t.Input}],top:[{type:t.Input}],onlyOneRow:[{type:t.Input}],inputSearchPlaceHolder:[{type:t.Input}],disabled:[{type:t.Input}],toggleButtonText:[{type:t.Input}],noRowsText:[{type:t.Input}],accentInsensitive:[{type:t.Input}],toggleButtonClasses:[{type:t.Input}],selectedItemsChanged:[{type:t.Output}],selectedItemsKeysChanged:[{type:t.Output}],_containerRef:[{type:t.ViewChild,args:["container"]}],_dropdownRef:[{type:t.ViewChild,args:["dropdown"]}],_dropdownItemsRef:[{type:t.ViewChild,args:["dropdownItems"]}],_inputRef:[{type:t.ViewChild,args:["input"]}],documentClick:[{type:t.HostListener,args:["document:click",["$event"]]}],documentKeyup:[{type:t.HostListener,args:["document:keyup",["$event"]]}]},e}(),l=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,n.ReactiveFormsModule],exports:[o],declarations:[o]}]}],e.ctorParameters=function(){return[]},e}();e.NgMultiselectComponent=o,e.NgMultiselectModule=l,e.NgMultiselectItem=s,Object.defineProperty(e,"__esModule",{value:!0})});