@jchinc/ng-multiselect/ng-multiselect.metadata.json

Control de selección múltiple de elementos

{"__symbolic":"module","version":3,"metadata":{"NgMultiselectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-multiselect","template":"\n      <div #container\n           class=\"ng-multiselect\"\n           [class.ng-multiselect--disabled]=\"disabled\">\n\n          <!-- Botón toggle -->\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          <!-- Elementos -->\n          <ul #dropdown\n              class=\"ng-multiselect__dropdown ng-multiselect__dropdown--raised\">\n\n              <!-- Elemento: Seleccionar todo -->\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              <!-- Campo búsqueda -->\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              <!-- Elementos -->\n              <div #dropdownItems\n                   class=\"ng-multiselect__items\">\n\n                  <!-- No existen registros -->\n                  <li *ngIf=\"!filteredItems.length\"\n                      class=\"ng-multiselect__item ng-multiselect__item--no-rows\">\n                      {{noRowsText}}\n                  </li>\n\n                  <!-- Registros filtrados -->\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                      <!-- Elemento seleccionado -->\n                      <i *ngIf=\"item.selected && !onlyOneRow\"\n                         class=\"material-icons ng-multiselect__icon\">check_box</i>\n                      <!-- Elemento NO seleccionado -->\n                      <i *ngIf=\"!item.selected && !onlyOneRow\"\n                         class=\"material-icons ng-multiselect__icon\">check_box_outline_blank</i>\n                      <!-- Texto -->\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    "]}]}],"members":{"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onlyOneRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputSearchPlaceHolder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggleButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noRowsText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"accentInsensitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggleButtonClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedItemsChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectedItemsKeysChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_containerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"_dropdownRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"_dropdownItemsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdownItems"]}]}],"_inputRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"documentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"documentKeyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keyup",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"toggleButtonClick":[{"__symbolic":"method"}],"selectUnselectAll":[{"__symbolic":"method"}],"clearTerm":[{"__symbolic":"method"}],"inputKeyup":[{"__symbolic":"method"}],"_initialize":[{"__symbolic":"method"}],"_createForm":[{"__symbolic":"method"}],"_filterData":[{"__symbolic":"method"}],"_match":[{"__symbolic":"method"}],"_showDropdown":[{"__symbolic":"method"}],"_hideDropdown":[{"__symbolic":"method"}],"_setSelectedItems":[{"__symbolic":"method"}],"_scrollToView":[{"__symbolic":"method"}]}},"NgMultiselectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"exports":[{"__symbolic":"reference","name":"NgMultiselectComponent"}],"declarations":[{"__symbolic":"reference","name":"NgMultiselectComponent"}]}]}],"members":{}},"INgMultiselectItem":{"__symbolic":"interface"},"NgMultiselectItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null,null,null,{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"string"}]}]}]}}},"origins":{"NgMultiselectComponent":"./src/ng-multiselect.component","NgMultiselectModule":"./src/ng-multiselect.module","INgMultiselectItem":"./src/ng-multiselect.models","NgMultiselectItem":"./src/ng-multiselect.models"},"importAs":"ng-multiselect"}