ngx-selectbox-may/ngx-selectbox-may.metadata.json

Angular selectbox with autocomplete

{"__symbolic":"module","version":4,"metadata":{"NgxSelectboxMayService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"createDropdownRows":[{"__symbolic":"method"}],"reconfigureDropdownRowLabelsAndValues":[{"__symbolic":"method"}],"createDropdownLabel":[{"__symbolic":"method"}],"setSelectedItems":[{"__symbolic":"method"}],"unselectAllSelectedRows":[{"__symbolic":"method"}],"selectItemByValue":[{"__symbolic":"method"}],"selectItemsByValue":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"NgxSelectboxMayComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-selectbox-may","host":{"(document:click)":"onClickOutside($event)","(window:resize)":"onWindowResize($event)","$quoted$":["(document:click)","(window:resize)"]},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":15,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxSelectboxMayComponent"},"multi":true}],"template":"<div [ngClass]=\"configs.cssClass\" class=\"__ngx-selectbox-may\">\n  <span class=\"__selected-label\">\n    <span>{{getSelectboxLabel()}}</span>\n  </span>\n  <div *ngIf=\"_isLoading\" class=\"__loading-text\">{{getLoadingText()}}</div>\n  <div class=\"__clickable-area\" (click)=\"onClickSelectBox()\"></div>\n  <button *ngIf=\"selectedRows.length>0 && isEnable\" type=\"button\" class=\"__remove-selected-btn\" (click)=\"onRemoveClick()\">\n    <i></i>\n  </button>\n  <div *ngIf=\"show_items\" class=\"__item-list-browser\" #item_window>\n    <div class=\"__item-search\">\n      <input #search_field type=\"text\" max-length=\"15\" (keydown)=\"onSearchKeydown($event)\"\n        (keyup)=\"onSearchKeyup($event)\" placeholder=\"search\" [(ngModel)]=\"searchText\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n    <ul class=\"__ngx-selectbox-ul\">\n      <ng-container *ngFor=\"let item of dropdownRows | ngx_item_filter:searchText; let i = index; let l = count\">\n        <li #li_item *ngIf=\"l>0\" (click)=\"onClickItem(item, i)\" [ngClass]=\"item.isSelected ? getActiveClass() : ''\">\n          {{item.label}}\n        </li>\n      </ng-container>\n      <li class=\"__empty-items\"\n        *ngIf=\"(dropdownRows | ngx_item_filter:searchText).length === 0 && configs.showEmptyResultsLabel\">\n        {{getEmptyTextLabel()}}\n      </li>\n    </ul>\n  </div>\n  <div *ngIf=\"!isEnable\" class=\"__disabled-mask\"></div>\n</div>","styles":[".__ngx-selectbox-may{position:relative;min-width:200px;padding:3px 40px 3px 10px;display:flex;align-items:center;cursor:pointer;background-color:#fff}.__ngx-selectbox-may .__disabled-mask{position:absolute;background-color:rgba(0,0,0,.15);top:0;left:0;right:0;bottom:0}.__ngx-selectbox-may::before{content:\"\\f107\";position:absolute;font-family:FontAwesome;color:#3f495b;right:10px;top:0;bottom:0;display:flex;align-items:center;font-size:14px}.__ngx-selectbox-may .__selected-label{position:relative;display:block;width:100%;text-align:left;height:19px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.__ngx-selectbox-may .__remove-selected-btn{background-color:transparent;border:0;outline:0;cursor:pointer;position:absolute;right:20px;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__clickable-area{position:absolute;top:0;left:0;right:0;bottom:0}.__ngx-selectbox-may .__remove-selected-btn i::before{content:\"\\f00d\";font-family:FontAwesome;font-style:normal!important;-webkit-text-stroke:.5px #f1f4f8}.__ngx-selectbox-may .__selected-label .__remove-selected-btn::before{content:\"\\f00c\";position:absolute;font-family:FontAwesome;right:12px;font-size:12px;top:0;bottom:0;display:flex;align-items:center;-webkit-text-stroke:.5px #f1f4f8}.__ngx-selectbox-may .__item-list-browser{position:absolute;background-color:#fff;border-radius:4px;border:1px solid #dfe3e9;box-shadow:0 3px 18px -6px rgba(0,0,0,.5);z-index:1;top:-2px;left:-2px;right:-2px}.__ngx-selectbox-may .__item-list-browser ul{max-height:200px;overflow-y:auto;padding:0;margin:0;border-top:1px solid #dfe3e9}.__ngx-selectbox-may .__item-list-browser ul li{color:#777;font-size:13px;text-align:left;padding:9px 24px 9px 12px;border-bottom:1px solid #dfe3e9;cursor:pointer;line-height:17px}.__ngx-selectbox-may .__item-list-browser ul li.selected,.__ngx-selectbox-may .__item-list-browser ul li:hover{background-color:#f1f4f8;color:#2ea2f8}.__ngx-selectbox-may .__item-list-browser ul li.active{background-color:#f1f4f8;color:#2ea2f8;position:relative}.__ngx-selectbox-may .__item-list-browser ul li.active::before{content:\"\\f00c\";position:absolute;font-family:FontAwesome;right:12px;font-size:12px;-webkit-text-stroke:.5px #f1f4f8;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__item-list-browser ul li.__empty-items{color:#ff7f74;background-color:#fff4f4;cursor:auto}.__ngx-selectbox-may .__item-list-browser ul li:last-child{border-bottom:none}.__ngx-selectbox-may .__item-list-browser .__item-search{padding:5px;display:flex;position:relative}.__ngx-selectbox-may .__item-list-browser .__item-search::before{content:\"\\f002\";position:absolute;font-family:FontAwesome;right:16px;-webkit-text-stroke:.5px #fff;color:#ced0da;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__item-list-browser .__item-search input[type=text]{width:100%;border:1px solid #dfe3e9;border-radius:4px;padding:8px 30px 8px 10px;outline:0}.__ngx-selectbox-may .__item-list-browser .__item-search input[type=text]:focus{border:1px solid #2ea2f8;box-shadow:0 0 0 3px #2ea2f84d}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar{width:11px;height:18px}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-thumb{height:6px;border:3px solid transparent;background-clip:padding-box;-webkit-border-radius:7px;background-color:rgba(0,0,0,.15);-webkit-box-shadow:inset -1px -1px 0 rgba(0,0,0,.05) inset 1px 1px 0 rgba(0,0,0,.05)}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-button{width:0;height:0;display:none}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-corner{background-color:transparent}.__ngx-selectbox-may .__loading-text{position:absolute;background-color:#e5e5e5;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;padding-left:10px;border-radius:4px;z-index:2}"]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["items"]}]}],"cssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3},"arguments":["css-class"]}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3},"arguments":["value-field"]}]}],"labelField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3},"arguments":["label-field"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3},"arguments":["placeholder"]}]}],"emptyText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["empty-text"]}]}],"showEmptyResultText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3},"arguments":["show-empty-text"]}]}],"isMulti":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["is-multi"]}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3},"arguments":["is-loading"]}]}],"loadingText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["loading-text"]}]}],"onKeyUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":3},"arguments":["search-keyup"]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3},"arguments":["on-select-item"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":3},"arguments":["on-blur"]}]}],"searchField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":3},"arguments":["search_field"]}]}],"listItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":90,"character":3},"arguments":["li_item"]}]}],"actionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":93,"character":3},"arguments":["actionTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":94,"character":37},{"__symbolic":"reference","name":"NgxSelectboxMayService"}]}],"ngOnInit":[{"__symbolic":"method"}],"createDropdownRows":[{"__symbolic":"method"}],"reconfigureLabelsAndValues":[{"__symbolic":"method"}],"getSelectboxLabel":[{"__symbolic":"method"}],"getEmptyTextLabel":[{"__symbolic":"method"}],"getLoadingText":[{"__symbolic":"method"}],"onClickSelectBox":[{"__symbolic":"method"}],"getActiveClass":[{"__symbolic":"method"}],"showItemsWindow":[{"__symbolic":"method"}],"hideItemsWindow":[{"__symbolic":"method"}],"onRemoveClick":[{"__symbolic":"method"}],"onSearchKeydown":[{"__symbolic":"method"}],"onSearchKeyup":[{"__symbolic":"method"}],"resetFilters":[{"__symbolic":"method"}],"onClickItem":[{"__symbolic":"method"}],"publishValue":[{"__symbolic":"method"}],"setValuesPassedExternal":[{"__symbolic":"method"}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":205,"character":3},"arguments":["item_window"]}]}],"positionWindow":[{"__symbolic":"method"}],"focusToSearchField":[{"__symbolic":"method"}],"scrollToSelectedItem":[{"__symbolic":"method"}],"onClickOutside":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"setDisable":[{"__symbolic":"method"}],"setEnable":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"NGXSelectMayRow":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"any"}]}],"setKey":[{"__symbolic":"method"}],"setLabel":[{"__symbolic":"method"}]}},"NGXSelectMayConfigs":{"__symbolic":"class","members":{},"statics":{"ROW_ACTIVE_CLASS":"active","EMPTY_TEXT":"No results found","MULTI_SELECTED_LABEL":"#COUNT #ITEMS Selected","LOADING_TEXT":"Please wait..."}},"NGXSelectboxMayPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"ngx_item_filter","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"NgxSelectboxMayModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxSelectboxMayComponent"},{"__symbolic":"reference","name":"NGXSelectboxMayPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxSelectboxMayComponent"}]}]}],"members":{}}},"origins":{"NgxSelectboxMayService":"./lib/ngx-selectbox-may.service","NgxSelectboxMayComponent":"./lib/ngx-selectbox-may.component","NGXSelectMayRow":"./lib/ngx-selectbox-may-configs","NGXSelectMayConfigs":"./lib/ngx-selectbox-may-configs","NGXSelectboxMayPipe":"./lib/NGXSelectboxMayPipe","NgxSelectboxMayModule":"./lib/ngx-selectbox-may.module"},"importAs":"ngx-selectbox-may"}