@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 13.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/cdk/overlay"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("ng-devui/window-ref"),require("ng-devui/utils")):"function"==typeof define&&define.amd?define("ng-devui/dropdown",["exports","@angular/core","@angular/common","@angular/cdk/overlay","rxjs","rxjs/operators","@angular/animations","ng-devui/window-ref","ng-devui/utils"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].dropdown={}),e.ng.core,e.ng.common,e.ng.cdk.overlay,e.rxjs,e.rxjs.operators,e.ng.animations,e["ng-devui"]["window-ref"],e["ng-devui"].utils)}(this,(function(e,t,n,o,i,r,s,p,a){"use strict";var d=function(){function e(){this.closeDropdownBind=this.closeDropdown.bind(this)}return e.prototype.open=function(e){var t=this;this.openScope||setTimeout((function(){window.document.addEventListener("click",t.closeDropdownBind)})),this.openScope=e},e.prototype.close=function(e){this.openScope===e&&(this.openScope=null,window.document.removeEventListener("click",this.closeDropdownBind))},e.prototype.closeDropdown=function(e){if(this.openScope){var t=this.openScope.menuEl.nativeElement;e&&this.openScope.menuEl&&(/input|textarea/i.test(e.target.tagName)&&t.contains(e.target)||"none"===this.openScope.closeScope||t.contains(e.target)&&"blank"===this.openScope.closeScope||this.openScope.dropdownChildren.some((function(t){return t.toggleEl.nativeElement.contains(e.target)})))||(this.openScope.isOpen=!1)}},e.decorators=[{type:t.Injectable}],e}();var c=function(){function e(e,n,o){this.dropdownService=e,this.el=n,this.parentDropdown=o,this.addClass=!0,this.disabled=!1,this.trigger="click",this.closeScope="all",this.closeOnMouseLeaveMenu=!1,this.toggleEvent=new t.EventEmitter,this.visibleSubject=new i.Subject,this._isOpen=!1}return Object.defineProperty(e.prototype,"isOpen",{get:function(){return this._isOpen},set:function(e){this._isOpen=!!e,this.disabled||(this.isOpen?(this.visibleSubject.next(!0),this.focusToggleElement(),this.dropdownService.open(this)):(this.visibleSubject.next(!1),this.dropdownService.close(this)),this.toggleEvent.emit(this.isOpen))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"appendToBody",{get:function(){return this._appendToBody},set:function(e){this._appendToBody=!0===e,this.updateCdkConnectedOverlayOrigin()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"dropDownMenu",{set:function(e){this.menuEl=e.el},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"dropDownToggle",{set:function(e){this.toggleEl=e.el,this.updateCdkConnectedOverlayOrigin()},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){e.hasOwnProperty("trigger")&&this.handleHoverSubscriptionIfTriggerIsHover()},e.prototype.ngOnDestroy=function(){this.dropdownService.close(this),this.unsubscribeHoverAction()},e.prototype.ngAfterContentInit=function(){this.handleHoverSubscriptionIfTriggerIsHover()},e.prototype.toggle=function(){return this.isOpen=!this.isOpen},e.prototype.focusToggleElement=function(){this.toggleEl&&this.toggleEl.nativeElement.focus()},e.prototype.updateCdkConnectedOverlayOrigin=function(){this.toggleEl&&!0===this.appendToBody?this.cdkConnectedOverlayOrigin=new o.CdkOverlayOrigin(this.toggleEl):this.cdkConnectedOverlayOrigin=void 0},e.prototype.subscribeHoverAction=function(e){var t=this;this.hoverSubscription||(this.hoverSubscription=e.pipe(r.debounceTime(50)).subscribe((function(e){t.disabled||t.isOpen===e||(t.isOpen=e)})))},e.prototype.unsubscribeHoverAction=function(){this.hoverSubscription&&(this.hoverSubscription.unsubscribe(),this.hoverSubscription=null)},e.prototype.handleHoverSubscriptionIfTriggerIsHover=function(){var e=this;if("hover"===this.trigger){var t=i.merge(i.fromEvent(this.el.nativeElement,"mouseenter").pipe(r.mapTo(!0)),i.fromEvent(this.el.nativeElement,"mouseleave").pipe(r.filter((function(t){if(e.isOpen&&!0===e.appendToBody){var n=t.relatedTarget||t.originEvent&&t.originEvent.relatedTarget;return!(e.menuEl.nativeElement&&n&&(e.menuEl.nativeElement.parentElement.contains(t.relatedTarget)||e.menuEl.nativeElement.parentElement.parentElement.contains(t.relatedTarget)||e.menuEl.nativeElement.contains(n)||e.dropdownChildren.some((function(o){return o!==e&&(o.menuEl.nativeElement.parentElement&&o.menuEl.nativeElement.parentElement.contains(t.relatedTarget)||o.menuEl.nativeElement.contains(n))}))))}return!0})),r.tap((function(t){e.parentDropdown&&e.simulateEventDispatch(t,e.parentDropdown.el.nativeElement)})),r.mapTo(!1)));this.subscribeHoverAction(t)}else this.unsubscribeHoverAction()},e.prototype.simulateEventDispatch=function(e,t){var n=document.createEvent("MouseEvents");n.initEvent(e.type,!0,!0),n.originEvent=e.originEvent||e,t||(t=this.el.nativeElement),t.dispatchEvent(n)},e.decorators=[{type:t.Directive,args:[{selector:"[dDropDown]",exportAs:"d-dropdown",providers:[d]}]}],e.ctorParameters=function(){return[{type:d},{type:t.ElementRef},{type:e,decorators:[{type:t.Optional},{type:t.SkipSelf}]}]},e.propDecorators={dropdownChildren:[{type:t.ContentChildren,args:[e,{descendants:!0}]}],isOpen:[{type:t.HostBinding,args:["class.devui-dropdown-open"]},{type:t.Input}],addClass:[{type:t.HostBinding,args:["class.devui-dropdown"]}],disabled:[{type:t.Input}],trigger:[{type:t.Input}],closeScope:[{type:t.Input}],closeOnMouseLeaveMenu:[{type:t.Input}],toggleEvent:[{type:t.Output}]},e}();var l=function(){function e(e,t){this.dropdown=e,this.el=t,this.addClass=!0,this.toggleOnFocus=!1,this.autoFocus=!1,this.isMouseEvent=!1}return Object.defineProperty(e.prototype,"tabIndex",{get:function(){return this.disabled?null:0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"attrDisabled",{get:function(){return this.disabled?"disabled":null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this.dropdown&&this.dropdown.disabled},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.dropdown.dropDownToggle=this},e.prototype.ngAfterViewInit=function(){var e=this;this.autoFocus&&setTimeout((function(){e.el.nativeElement.focus()}),0)},e.prototype.toggleDropdown=function(e){return this.disabled||this.dropdown.toggle(),!1},e.prototype.setMouseEventTrue=function(e){this.isMouseEvent=!0},e.prototype.setMouseEventFalse=function(e){this.isMouseEvent=!1},e.prototype.toggleOnFocusFn=function(e){!this.toggleOnFocus||this.disabled||this.dropdown.isOpen||this.isMouseEvent||this.dropdown.toggle()},e.prototype.toggle=function(){this.dropdown.toggle()},e.decorators=[{type:t.Directive,args:[{selector:"[dDropDownToggle]",exportAs:"d-dropdown-toggle"}]}],e.ctorParameters=function(){return[{type:c,decorators:[{type:t.Host}]},{type:t.ElementRef}]},e.propDecorators={tabIndex:[{type:t.HostBinding,args:["attr.tabIndex"]}],attrDisabled:[{type:t.HostBinding,args:["attr.disabled"]}],addClass:[{type:t.HostBinding,args:["class.devui-dropdown-toggle"]}],toggleOnFocus:[{type:t.Input}],autoFocus:[{type:t.Input}],toggleDropdown:[{type:t.HostListener,args:["click",["$event"]]}],setMouseEventTrue:[{type:t.HostListener,args:["mousedown",["$event"]]}],setMouseEventFalse:[{type:t.HostListener,args:["mouseup",["$event"]]}],toggleOnFocusFn:[{type:t.HostListener,args:["focus",["$event"]]}],toggle:[{type:t.HostListener,args:["keydown.enter"]}]},e}();var u=function(){function e(e,t,n,o,s){var p=this;this.dropdown=e,this.el=t,this.render=n,this.windowRef=o,this.builder=s,this.diplay="none",this.tabIndex=-1,this.addClass=!0,this.keydownEscapeEvent$=i.fromEvent(document.body,"keydown").pipe(r.filter((function(e){return 27===e.keyCode}))),this.hide=function(e){p.dropdown.toggle()},this.dropdown.visibleSubject.subscribe((function(e){if(e!==p.currentValue){if(p.currentValue=e,p.keydownEscapeSub&&p.keydownEscapeSub.unsubscribe(),e&&(p.keydownEscapeSub=p.keydownEscapeEvent$.subscribe((function(e){p.hide(e)}))),p.dropdown.appendToBody)return void p.render.setStyle(p.el.nativeElement,"display","block");p.player&&(p.player.destroy(),p.player=void 0),e&&p.render.setStyle(p.el.nativeElement,"display","block");var t=p.calcPopDirection(e),n=e?p.fadeIn(t):p.fadeOut(t),o=p.builder.build(n);p.player=o.create(p.el.nativeElement),p.player.play(),p.player.onDone((function(){e||p.render.setStyle(p.el.nativeElement,"display","none"),p.player.destroy(),p.player=void 0}))}}))}return e.prototype.ngOnInit=function(){this.dropdown.dropDownMenu=this},e.prototype.calcPopDirection=function(e){var t=this.el.nativeElement,n=t.offsetHeight,o=this.windowRef.innerHeight-this.dropdown.el.nativeElement.getBoundingClientRect().bottom;return e?o>=n?(this.render.removeStyle(t,"bottom"),this.render.removeStyle(t,"top"),this.popDirectionCache="bottom","bottom"):(this.render.setStyle(t,"bottom","100%"),this.render.setStyle(t,"top","auto"),this.popDirectionCache="top","top"):this.popDirectionCache},e.prototype.mouseLeave=function(e){var t=this;if(e.stopPropagation(),this.dropdown.appendToBody&&"hover"===this.dropdown.trigger||"click"===this.dropdown.trigger&&this.dropdown.closeOnMouseLeaveMenu){if(this.dropdown.toggleEl.nativeElement.contains(e.relatedTarget)||this.dropdown.dropdownChildren.some((function(n){return n.menuEl!==t.el&&n.menuEl.nativeElement.parentElement&&n.menuEl.nativeElement.parentElement.contains(e.relatedTarget)})))return;if("hover"===this.dropdown.trigger)this.dropdown.simulateEventDispatch(e);else{var n=e.originEvent&&e.originEvent.relatedTarget;if(n&&(this.dropdown.toggleEl.nativeElement.contains(n)||this.dropdown.dropdownChildren.some((function(e){return e.menuEl.nativeElement.contains(n)}))))return;this.dropdown.isOpen=!1}}return!1},e.prototype.fadeIn=function(e){switch(e){case"top":return[s.style({transform:"translateZ(0) scaleY(0)",opacity:0,transformOrigin:"0% 100%"}),s.animate("200ms cubic-bezier(0.23, 1, 0.32, 1)",s.style({transform:"translateZ(0) scaleY(1)",opacity:1,transformOrigin:"0% 100%"}))];case"bottom":default:return[s.style({transform:"translateZ(0) scaleY(0)",opacity:0,transformOrigin:"0% 0%"}),s.animate("200ms cubic-bezier(0.23, 1, 0.32, 1)",s.style({transform:"translateZ(0) scaleY(1)",opacity:1,transformOrigin:"0% 0%"}))]}},e.prototype.fadeOut=function(e){switch(e){case"top":return[s.style({transform:"translateZ(0) scaleY(1)",opacity:1,transformOrigin:"0% 100%"}),s.animate("200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)",s.style({transform:"translateZ(0) scaleY(0)",opacity:0,transformOrigin:"0% 100%"}))];case"bottom":default:return[s.style({transform:"translateZ(0) scaleY(1)",opacity:1,transformOrigin:"0% 0%"}),s.animate("200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)",s.style({transform:"translateZ(0) scaleY(0)",opacity:0,transformOrigin:"0% 0%"}))]}},e.decorators=[{type:t.Directive,args:[{selector:"[dDropDownMenu]",exportAs:"d-dropdown-menu"}]}],e.ctorParameters=function(){return[{type:c,decorators:[{type:t.Host}]},{type:t.ElementRef},{type:t.Renderer2},{type:p.WindowRef},{type:s.AnimationBuilder}]},e.propDecorators={diplay:[{type:t.HostBinding,args:["style.display"]}],tabIndex:[{type:t.HostBinding,args:["attr.tabIndex"]}],addClass:[{type:t.HostBinding,args:["class.devui-dropdown-menu"]}],mouseLeave:[{type:t.HostListener,args:["mouseleave",["$event"]]}]},e}();var g=function(){function e(e){this.dropDown=e,this.menuPosition="bottom",this.appendToBodyDirections=["rightDown","leftDown","rightUp","leftUp"],this.dropDown.appendToBody=!0}return e.prototype.ngOnInit=function(){this.setPositions(),this.setOrigin()},e.prototype.ngOnChanges=function(e){e.appendToBodyDirections&&this.setPositions(),e.alignOrigin&&this.setOrigin()},e.prototype.setOrigin=function(){this.alignOrigin?this.origin=new o.CdkOverlayOrigin(this.alignOrigin):this.origin=void 0},e.prototype.setPositions=function(){this.appendToBodyDirections&&this.appendToBodyDirections.length>0?this.positions=this.appendToBodyDirections.map((function(e){return"string"==typeof e?a.AppendToBodyDirectionsConfig[e]:e})).filter((function(e){return void 0!==e})):this.positions=void 0},e.prototype.onPositionChange=function(e){switch(e.connectionPair.overlayY){case"top":case"center":this.menuPosition="bottom";break;case"bottom":this.menuPosition="top"}},e.decorators=[{type:t.Component,args:[{selector:"[dDropDown][appendToBody]",template:'\n <ng-content></ng-content>\n <ng-template cdk-connected-overlay\n [cdkConnectedOverlayOrigin]="origin || dropDown.cdkConnectedOverlayOrigin"\n [cdkConnectedOverlayOpen]="dropDown.isOpen"\n [cdkConnectedOverlayPositions]="positions"\n (backdropClick)="dropDown.isOpen=false"\n (positionChange)="onPositionChange($event)">\n <div [@fadeInOut]="(dropDown.isOpen ? menuPosition : \'void\')">\n <ng-content select="[dDropDownMenu]"></ng-content>\n </div>\n </ng-template>\n ',encapsulation:t.ViewEncapsulation.None,animations:[a.fadeInOut],styles:[".cdk-overlay-pane .devui-dropdown-menu{position:relative;top:0;left:0;border:none}.devui-dropdown span.icon-chevron-down{display:inline-block;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-dropdown.open span.icon-chevron-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}"]}]}],e.ctorParameters=function(){return[{type:c,decorators:[{type:t.Host}]}]},e.propDecorators={alignOrigin:[{type:t.Input}],appendToBodyDirections:[{type:t.Input}]},e}();var h=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.OverlayModule],exports:[c,u,l,g],declarations:[c,u,l,g],entryComponents:[]}]}],e}();e.DropDownAppendToBodyComponent=g,e.DropDownDirective=c,e.DropDownMenuDirective=u,e.DropDownModule=h,e.DropDownService=d,e.DropDownToggleDirective=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-dropdown.umd.min.js.map