{"__symbolic":"module","version":4,"metadata":{"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"ui-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":28,"character":15},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":33,"character":15},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":39,"character":17},"member":"None"},"template":"<div class=\"ui-select input\" [class.readonly]=\"readonly\" [class.show-dropdown]=\"!readonly && showDropdown\"\n  (click)=\"onClick()\">\n  <div class=\"flex middle pl10 full\" *ngIf=\"multi\">\n    <div class=\"flex wrap full\">\n      <ng-template ngFor let-item let-i=\"index\" [ngForOf]=\"selectedItems\">\n        <div [class.selected]=\"multi\">\n          {{ options.name ? item[options.name] : item }}\n          <i *ngIf=\"!readonly\" class=\"iconfont icon-delete ml5\" (click)=\"onDel(item, i)\"></i>\n        </div>\n      </ng-template>\n\n      <span *ngIf=\"!readonly\" style=\"flex: 1\">\n        <input *ngIf=\"!value || !value.length\" [(ngModel)]=\"inputValue\" [placeholder]=\"placeholder\"\n          (keyup)=\"search$.next($event.target.value)\" (change)=\"$event.stopPropagation()\"\n          style=\"width: 100%;padding-left:0\" />\n\n        <input #input *ngIf=\"value && value.length\" [(ngModel)]=\"inputValue\" style=\"padding:0;flex-grow:1;width:100%\"\n          (focus)=\"lastInputValue = inputValue\" (keyup.backspace)=\"onMultiDel()\" (keyup)=\"\n            lastInputValue = inputValue; search$.next($event.target.value)\n          \" (change)=\"$event.stopPropagation()\" />\n      </span>\n    </div>\n    <i class=\"iconfont icon-triangle-down right\" (click)=\"onClickMulti()\"></i>\n  </div>\n  <div class=\"flex middle full\" *ngIf=\"!multi\" (click)=\"clickShowDropdown = -1; showDropdown = true\">\n    <input *ngIf=\"!loading\" class=\"full\" data-id=\"ui-select-input\" [placeholder]=\"placeholder\" [(ngModel)]=\"inputValue\"\n      (keyup)=\"search$.next($event.target.value)\" [readOnly]=\"readonly || inputReadonly\" (click)=\"onClickInput($event)\"\n      (change)=\"$event.stopPropagation()\" />\n    <input *ngIf=\"loading\" class=\"full\" data-id=\"ui-select-input\" [placeholder]=\"placeholder\" />\n    <i class=\"iconfont icon-triangle-down right\"></i>\n  </div>\n  <div class=\"dropdown-list\" [class.block]=\"showDropdown\" *ngIf=\"!readonly\">\n    <div class=\"item\" [class.active]=\"!_value\" *ngIf=\"!multi && !options.autocomplete && !options.noDefaultOption\"\n      (click)=\"onSelect($event, null)\">\n      {{ placeholder || \"请选择\" }}\n    </div>\n    <div class=\"item\" *ngIf=\"loading\">\n      <span class=\"iconfont icon-loading icon-spin\"></span>\n      Loading...\n    </div>\n    <ng-template ngFor let-item let-i=\"index\" [ngForOf]=\"options.list\">\n      <div class=\"item \" [class.active]=\"item.active\" *ngIf=\"!multi || !isChecked(item)\"\n        (click)=\"onSelect($event, item)\" [title]=\"item.tooltip || ''\">\n        <div class=\"flex middle\">\n          <span class=\"full\">{{\n            options.name ? item[options.name] : item\n          }}</span>\n          <span class=\"iconfont icon-delete pointer\" *ngIf=\"item.del\" (click)=\"onDelOption($event, item, i)\"></span>\n        </div>\n        <div class=\"desc line one\" *ngIf=\"options.desc\">\n          {{ item[options.desc] || \"无描述\" }}\n        </div>\n      </div>\n    </ng-template>\n    <div class=\"item\" (click)=\"onMore()\" *ngIf=\"options.more\">\n      更多...\n    </div>\n    <div class=\"item gray\" *ngIf=\"\n        (options.noDefaultOption || options.autocomplete) &&\n        !loading &&\n        (!options.list ||\n          !options.list.length ||\n          (multi &&\n            value &&\n            options.list &&\n            value.length === options.list.length))\n      \">\n      暂无下拉选项\n    </div>\n  </div>\n</div>\n","styles":["ui-select{display:inline-flex;align-items:center}.ui-select{position:relative;padding:0!important;cursor:text;width:100%}ui-select.small .ui-select{max-width:100%}ui-select.ng-touched.ng-invalid .input{border-color:#cc6164}ui-select .show-dropdown.input{border-color:#26bbf0;border-bottom:1px solid #dbdfe1;border-bottom-left-radius:0;border-bottom-right-radius:0}ui-select.full .ui-select{width:100%!important}.ui-select .dropdown-list{position:absolute;background:#fff;display:none;top:calc(100% + 1px);left:-1px;right:-1px;box-shadow:none;border:1px solid #26bbf0;border-top:none;border-bottom-left-radius:.04rem;border-bottom-right-radius:.04rem;max-height:2.8rem;overflow:auto;z-index:9999}.ui-select .dropdown-list .item{padding:.02rem .1rem;margin:0!important;white-space:nowrap;cursor:pointer}.ui-select .dropdown-list .item.active{color:#26bbf0}.ui-select .selected{background-color:#f3f4f5;padding:0 .05rem;margin:.02rem .05rem .02rem 0;line-height:.22rem;flex-shrink:0}.ui-select .selected:last-of-type{margin-right:.01rem}.ui-select .selected i{font-size:.14rem;cursor:pointer}.ui-select .right{padding:0 .05rem;cursor:pointer}.ui-select .flex input{outline:0;border:none;padding:0 0 0 .08rem;min-height:.26rem}.ui-select input[disabled],.ui-select input[readonly]{background-color:#fff;width:1.62rem!important;max-width:calc(100% - .24rem)}.ui-select.readonly,.ui-select.readonly input[disabled],.ui-select.readonly input[readonly]{background-color:#f3f4f5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.ui-select .dropdown-list .item .desc{font-size:.12rem;color:#ccc;line-height:1;margin-bottom:.1rem}.ui-select .dropdown-list .item:hover{background-color:#fff!important;color:#26bbf0!important}.ui-select .dropdown-list .item.gray:hover{background-color:#fff!important;color:#c4c9cd!important}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":3}}]}],"autoChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":3}}]}],"more":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":68,"character":3},"arguments":["input",{"static":false}]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"checkInputReadonly":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onSelect":[{"__symbolic":"method"}],"onDel":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onClickInput":[{"__symbolic":"method"}],"setDropdown":[{"__symbolic":"method"}],"onClickDocument":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":333,"character":3},"arguments":["document:click",["$event","$event.target"]]}]}],"onClickMulti":[{"__symbolic":"method"}],"onMultiDel":[{"__symbolic":"method"}],"isChecked":[{"__symbolic":"method"}],"onDelOption":[{"__symbolic":"method"}],"onMore":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":26}],"declarations":[{"__symbolic":"reference","name":"SelectComponent"}],"exports":[{"__symbolic":"reference","name":"SelectComponent"}]}]}],"members":{}}},"origins":{"SelectComponent":"./select.component","SelectModule":"./select.module"},"importAs":"le5le-components/select"}