ngx-multi-selector/ngx-multi-selector.metadata.json

A small plugin which generates multi-selector control, it supports web api loading. Only supported angular 5.

{"__symbolic":"module","version":4,"metadata":{"NgxMultiSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"ngx-multi-selector","exportAs":"ngx-multi-selector","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":19,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxMultiSelectorComponent"},"multi":true}],"template":"<div class=\"dropdown\">\r\n\r\n  <!--Text input-->\r\n  <div #multiSelectorDropdownMenu\r\n       class=\"input-group ngx-multi-selector\">\r\n    <div class=\"dropdown-toggle\"\r\n         [attr.data-toggle]=\"disabled ? '': 'dropdown'\"\r\n         aria-haspopup=\"true\"\r\n         aria-expanded=\"false\"\r\n         [attr.disabled]=\"disabled\">\r\n      <input class=\"form-control ngx-multi-selector-title-box\"\r\n             [class.disabled]=\"disabled\"\r\n             [placeholder]=\"!placeholderTitleDropDown ? '' : placeholderTitleDropDown\"\r\n             readonly=\"readonly\"\r\n             [value]=\"loadSelectedItemsTitle()\">\r\n    </div>\r\n    <span class=\"input-group-addon\"\r\n          *ngIf=\"shouldClearButtonAvailable\"\r\n          [class.disabled]=\"disabled\"\r\n          (click)=\"deleteSelectedItems()\">\r\n      <span class=\"glyphicon glyphicon-remove\"></span>\r\n    </span>\r\n\r\n    <!--Dropdown-->\r\n    <span class=\"input-group-addon dropdown-toggle\"\r\n          [attr.data-toggle]=\"disabled ? '': 'dropdown'\"\r\n          [class.disabled]=\"disabled\"\r\n          aria-haspopup=\"true\"\r\n          aria-expanded=\"false\">\r\n        <span class=\"caret\"></span>\r\n    </span>\r\n\r\n    <!--Dropdown menu-->\r\n    <ul class=\"dropdown-menu\"\r\n        (click)=\"$event.stopPropagation();\">\r\n      <li *ngIf=\"shouldSearchBoxAvailable\">\r\n        <div class=\"col-lg-12\">\r\n          <div class=\"form-group\">\r\n            <div class=\"input-group\">\r\n              <input class=\"form-control\"\r\n                     [(ngModel)]=\"keyword\"\r\n                     [placeholder]=\"!placeholderSearchDropDown ? '' : placeholderSearchDropDown\">\r\n              <span class=\"input-group-addon\">\r\n                <span class=\"glyphicon glyphicon-search\"></span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-template ngFor\r\n                   let-item\r\n                   let-i=\"index\"\r\n                   [ngForOf]=\"items\">\r\n\r\n        <ng-container *ngIf=\"maximumContextItem < 1 || (maximumContextItem > 0 && i < maximumContextItem)\">\r\n          <!--Item template-->\r\n          <ng-template [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n                       [ngTemplateOutletContext]=\"{item:item, index:i, selected: hasItemSelected(item), instance: this}\">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n      </ng-template>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<!--Default item template-->\r\n<ng-template #defaultItemTemplate\r\n             let-item=\"item\"\r\n             let-i=\"index\"\r\n             let-selected=\"selected\"\r\n             let-instance=\"instance\">\r\n\r\n  <li [class.active]=\"hasItemSelected(item)\"\r\n      (click)=\"instance.clickSelectItem(item)\">\r\n    <a href=\"javascript:void(0);\">\r\n      <span class=\"glyphicon glyphicon-check\"\r\n            *ngIf=\"selected\"></span>\r\n      {{loadItemDisplay(item)}}\r\n    </a>\r\n  </li>\r\n</ng-template>\r\n","styles":[".ngx-multi-selector .dropdown-menu{width:100%}.ngx-multi-selector input.ngx-multi-selector-title-box{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#fff!important;cursor:default}.ngx-multi-selector .input-group-addon.disabled,.ngx-multi-selector .input-group-addon:disabled,.ngx-multi-selector input.ngx-multi-selector-title-box.disabled,.ngx-multi-selector input.ngx-multi-selector-title-box:disabled{background-color:#eee!important;cursor:not-allowed;pointer-events:none}"]}]}],"members":{"loadAvailableItemsAsyncHandler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3},"arguments":["load-available-items-handler"]}]}],"multiSelectorDropDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":106,"character":3},"arguments":["multiSelectorDropdownMenu",{"static":false}]}]}],"shouldClearButtonAvailable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":3},"arguments":["is-clear-button-available"]}]}],"shouldSearchBoxAvailable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3},"arguments":["is-search-box-available"]}]}],"placeholderSearchDropDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3},"arguments":["placeholder-search-drop-down"]}]}],"placeholderTitleDropDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3},"arguments":["placeholder-title-drop-down"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3},"arguments":["disabled"]}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3},"arguments":["item-template"]}]}],"separationCharacter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":3},"arguments":["separation-character"]}]}],"interval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":221,"character":3},"arguments":["interval"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":235,"character":3},"arguments":["items"]}]}],"maximumContextItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":269,"character":3},"arguments":["limit-item-amount"]}]}],"maximumSelectableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":288,"character":3},"arguments":["limit-item-selection"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":303,"character":3},"arguments":["key"]}]}],"keyProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":312,"character":3},"arguments":["key-property"]}]}],"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":321,"character":3},"arguments":["display-property"]}]}],"valueProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":330,"character":3},"arguments":["value-property"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnDestroy":[{"__symbolic":"method"}],"hasItemSelected":[{"__symbolic":"method"}],"loadSelectedItemIndex":[{"__symbolic":"method"}],"loadSelectedItemsTitle":[{"__symbolic":"method"}],"deleteSelectedItems":[{"__symbolic":"method"}],"deleteSelectedValue":[{"__symbolic":"method"}],"clickSelectItem":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"loadAvailableItemsAsync":[{"__symbolic":"method"}],"loadItemDisplay":[{"__symbolic":"method"}],"loadItemValue":[{"__symbolic":"method"}],"loadItemUniqueValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxMultiSelectorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":6,"character":26}],"declarations":[{"__symbolic":"reference","name":"NgxMultiSelectorComponent"}],"exports":[{"__symbolic":"reference","name":"NgxMultiSelectorComponent"}]}]}],"members":{}},"IUpdateMultiSelectorCommand":{"__symbolic":"interface"}},"origins":{"NgxMultiSelectorComponent":"./lib/ngx-multi-selector.component","NgxMultiSelectorModule":"./lib/ngx-multi-selector.module","IUpdateMultiSelectorCommand":"./lib/update-multi-selector-command.interface"},"importAs":"ngx-multi-selector"}