UNPKG

ng5-simple-select

Version:
1 lines 4.8 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms"],e):e((t.ng=t.ng||{},t.ng.simpleSelect={}),t.ng.core,t.ng.common,t.ng.forms)}(this,function(t,e,n,o){"use strict";var i=function(){function t(t){this.element=t,this.highlighted=!1}return t.prototype.ngOnInit=function(){this.value||(this.value=this.element.nativeElement.innerText.trim())},t.prototype.setParentValue=function(){this.parentChangeFn(this.value)},t.prototype.setParentChangeFn=function(t){this.parentChangeFn=t},t.prototype.setHighlightedState=function(t){this.highlighted=t},t.prototype.getValue=function(){return this.value},t.decorators=[{type:e.Component,args:[{selector:"ng-simple-select-option",template:'<div class="ng-simple-select-option" [ngClass]="{\'ng-simple-select-option--highlighted\': highlighted}" (click)="setParentValue()"> <ng-content></ng-content> </div> ',styles:[".ng-simple-select-option { padding: 1px 5px; cursor: default; } .ng-simple-select-option--highlighted { background-color: gainsboro; } .ng-simple-select-option:hover { background-color: #c3c3c3; } "]}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={value:[{type:e.Input}]},t}(),s=function(){function t(t){this.element=t,this.subscriptions=[],this.placeholder="",this.change=new e.EventEmitter,this.onChange=function(t){},this.onTouched=function(){}}return t.prototype.ngOnChanges=function(){},t.prototype.ngOnInit=function(){},t.prototype.ngAfterContentInit=function(){var t=this;this.addParentFnToChildren(this.options),this.setChildHighlightedState(this.options);var e=this.options.changes.subscribe(function(e){t.addParentFnToChildren(e),t.setChildHighlightedState(e)});this.subscriptions.push(e)},t.prototype.ngOnDestroy=function(){this.subscriptions.forEach(function(t){return t.unsubscribe()})},t.prototype.addParentFnToChildren=function(t){var e=this;t.forEach(function(t){t.setParentChangeFn(e.childChanges.bind(e))})},t.prototype.setChildHighlightedState=function(t){var e=this.value;t.forEach(function(t){t.setHighlightedState(t.getValue()===e)})},t.prototype.toggleDropdown=function(){this.disabled||(this.showDropdown=!this.showDropdown,this.onTouched())},t.prototype.childChanges=function(t){this.showDropdown=!1,this.value=t,this.setChildHighlightedState(this.options),this.change.emit(this.value),this.onChange(this.value)},t.prototype.onDocClick=function(t){this.isClickOutsideComponent(t)&&(this.showDropdown=!1)},t.prototype.writeValue=function(t){this.disabled||(this.value&&this.value!==t&&this.onChange(this.value),this.value=t)},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},t.prototype.setDisabledState=function(t){this.disabled=t},t.prototype.isClickOutsideComponent=function(t){for(var e=t.target,n=0;e.parentNode&&n<10;){if(e===this.element.nativeElement)return!1;e=e.parentNode,n++}return!0},t.decorators=[{type:e.Component,args:[{selector:"ng-simple-select",template:'<div class="ng-simple-select"> <div class="ng-simple-select_input" (click)="toggleDropdown()"> {{displayValue ? displayValue : value}} {{!displayValue && !value ? placeholder : \'\'}} </div> <div class="ng-simple-select_dropdown" [hidden]="!showDropdown"> <ng-content></ng-content> </div> </div> ',styles:[".ng-simple-select { position: relative; box-sizing: border-box; height: 30px; } .ng-simple-select_input { height: 30px; width: 100%; border: 1px solid darkgray; display: inline-block; position: relative; padding: 1px 20px 1px 5px; cursor: default; } .ng-simple-select_input::after { content: ''; display: inline-block; width: 0; height: 0; position: absolute; top: 12px; right: 5px; border: 5px solid transparent; border-top-color: black; } .ng-simple-select_input:hover { border-color: #909090; } .ng-simple-select_dropdown { background-color: white; z-index: 1; border: 1px solid darkgray; display: block; position: absolute; top: 30px; width: 100%; } "],host:{"(document:click)":"onDocClick($event)"},providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return t}),multi:!0}]}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={displayValue:[{type:e.Input}],placeholder:[{type:e.Input}],change:[{type:e.Output}],options:[{type:e.ContentChildren,args:[i]}]},t}(),r=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[s,i],exports:[s,i]}]}],t.ctorParameters=function(){return[]},t}();t.NgSimpleSelectModule=r,t.NgSimpleSelectComponent=s,t.NgSimpleSelectOptionComponent=i,Object.defineProperty(t,"__esModule",{value:!0})});