@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
566 lines (559 loc) • 23.9 kB
JavaScript
import { Component, Renderer2, ElementRef, Input, HostBinding, HostListener, Directive, ViewContainerRef, Injector, ComponentFactoryResolver, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { PositionService, PositioningModule } from '@duoduo-oba/ng-devui/position';
import { Subscription, fromEvent, merge } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { OverlayContainerRef } from '@duoduo-oba/ng-devui/overlay-container';
/**
* @fileoverview added by tsickle
* Generated from: popover.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PopoverComponent {
/**
* @param {?} renderer
* @param {?} positionService
* @param {?} elementRef
*/
constructor(renderer, positionService, elementRef) {
this.renderer = renderer;
this.positionService = positionService;
this.elementRef = elementRef;
this.showAnimate = false;
this.zIndex = 1060;
this.animateState = this.showAnimate ? 'void' : '';
this.display = 'block';
this.subs = new Subscription();
this.SCROLL_REFRESH_INTERVAL = 100;
}
/**
* @return {?}
*/
get class() {
return 'devui-popover ' + this.position + ' devui-popover-' + this.popType;
}
/**
* @return {?}
*/
get state() {
return this.animateState;
}
/**
* @return {?}
*/
ngOnInit() {
this.elementRef.nativeElement.style.zIndex = this.zIndex;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.updatePosition();
if (this.appendToBody) {
if (!this.scrollElement) {
this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
}
this.subs.add(fromEvent(this.scrollElement || window, 'scroll')
.pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
.subscribe((/**
* @return {?}
*/
() => {
this.updatePosition();
})));
this.subs.add(fromEvent(window, 'resize')
.pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
.subscribe((/**
* @return {?}
*/
() => {
this.updatePosition();
})));
}
}
/**
* @return {?}
*/
ngAfterContentChecked() {
this.updatePosition();
}
/**
* @return {?}
*/
show() {
this.animateState = 'visible';
}
/**
* @return {?}
*/
hide() {
this.animateState = 'void';
}
// will be overwrite by directive
/**
* @return {?}
*/
onHidden() { }
/**
* @param {?} event
* @return {?}
*/
onAnimationEnd(event) {
if (event.toState === 'void') {
this.onHidden();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.subs) {
this.subs.unsubscribe();
}
}
/**
* @return {?}
*/
updatePosition() {
/** @type {?} */
const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.elementRef.nativeElement, this.position, this.appendToBody);
this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${rect.left}px`);
this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${rect.top}px`);
}
}
PopoverComponent.decorators = [
{ type: Component, args: [{
selector: 'd-popover',
template: "<div class=\"arrow\"></div>\r\n<div class=\"devui-popover-content\">\r\n <span class=\"devui-popover-icon\" *ngIf=\"popType && popType !== 'default'\">\r\n <svg\r\n *ngIf=\"popType === 'success'\"\r\n class=\"devui-icon devui-icon-success\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <path d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\" fill-rule=\"nonzero\"></path>\r\n <polygon\r\n stroke-width=\"0.4\"\r\n fill-rule=\"nonzero\"\r\n points=\"8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'warning'\"\r\n class=\"devui-icon devui-icon-warning\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n points=\"7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313\"\r\n ></polygon>\r\n <path\r\n d=\"M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'info'\"\r\n class=\"devui-icon devui-icon-info\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <g stroke-width=\"1\">\r\n <path\r\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'error'\"\r\n class=\"devui-icon devui-icon-error\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <path\r\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <div class=\"devui-popover-main-content\" [ngClass]=\"{ 'with-icon': popType && popType !== 'default' }\" [innerHTML]=\"content\"></div>\r\n</div>\r\n",
animations: [
trigger('state', [
state('void', style({ opacity: 0 })),
state('visible', style({ opacity: 1 })),
transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
transition('visible => *', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)'))
])
],
styles: [":host.devui-popover{font-size:12px;position:absolute;top:0;left:0;line-height:20px;border:none;border-radius:2px;z-index:1060;background-color:#464d6e;color:#dfe1e6;overflow-wrap:break-word}:host.devui-popover>.arrow{border-width:8px}:host.devui-popover>.arrow,:host.devui-popover>.arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}:host.devui-popover>.arrow::after{content:''}:host.devui-popover.top>.arrow{left:50%;margin-left:-7px;border-bottom-width:0;border-top-color:#464d6e;bottom:-8px}:host.devui-popover.right>.arrow{top:50%;left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#464d6e}:host.devui-popover.bottom>.arrow{left:50%;margin-left:-7px;border-top-width:0;border-bottom-color:#464d6e;top:-8px}:host.devui-popover.left>.arrow{top:50%;right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#464d6e}:host.devui-popover.top{margin-top:-10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.bottom{margin-top:10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.left{margin-left:-10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.right{margin-left:10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}.devui-popover-icon{display:block;position:absolute;left:12px;top:8px}.devui-popover-icon svg.devui-icon{width:16px;height:16px}.devui-popover-main-content.with-icon{text-indent:20px}.devui-icon.devui-icon-success>g>path{fill:#50d4ab}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon,.devui-icon.devui-icon-warning>g>polygon{fill:#fff}.devui-icon.devui-icon-warning>g>path{fill:#fac20a}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0}.devui-icon.devui-icon-info>g>circle{fill:#fff}.devui-icon.devui-icon-error>g>path{fill:#f66f6a}.devui-icon.devui-icon-error>g>circle{fill:#fff}.devui-popover-content{padding:5px 14px}"]
}] }
];
/** @nocollapse */
PopoverComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: PositionService },
{ type: ElementRef }
];
PopoverComponent.propDecorators = {
triggerElementRef: [{ type: Input }],
position: [{ type: Input }],
content: [{ type: Input }],
showAnimate: [{ type: Input }],
scrollElement: [{ type: Input }],
appendToBody: [{ type: Input }],
zIndex: [{ type: Input }],
popType: [{ type: Input }],
display: [{ type: HostBinding, args: ['style.display',] }],
class: [{ type: HostBinding, args: ['class',] }],
state: [{ type: HostBinding, args: ['@state',] }],
onAnimationEnd: [{ type: HostListener, args: ['@state.done', ['$event'],] }]
};
if (false) {
/** @type {?} */
PopoverComponent.prototype.triggerElementRef;
/** @type {?} */
PopoverComponent.prototype.position;
/** @type {?} */
PopoverComponent.prototype.content;
/** @type {?} */
PopoverComponent.prototype.showAnimate;
/** @type {?} */
PopoverComponent.prototype.scrollElement;
/** @type {?} */
PopoverComponent.prototype.appendToBody;
/** @type {?} */
PopoverComponent.prototype.zIndex;
/** @type {?} */
PopoverComponent.prototype.popType;
/** @type {?} */
PopoverComponent.prototype.animateState;
/** @type {?} */
PopoverComponent.prototype.display;
/** @type {?} */
PopoverComponent.prototype.subs;
/** @type {?} */
PopoverComponent.prototype.SCROLL_REFRESH_INTERVAL;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
PopoverComponent.prototype.positionService;
/** @type {?} */
PopoverComponent.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: popover.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PopoverDirective {
/**
* @param {?} triggerElementRef
* @param {?} overlayContainerRef
* @param {?} viewContainerRef
* @param {?} injector
* @param {?} componentFactoryResolver
*/
constructor(triggerElementRef, overlayContainerRef, viewContainerRef, injector, componentFactoryResolver) {
this.triggerElementRef = triggerElementRef;
this.overlayContainerRef = overlayContainerRef;
this.viewContainerRef = viewContainerRef;
this.injector = injector;
this.componentFactoryResolver = componentFactoryResolver;
this.subscription = new Subscription();
this.blurSub = new Subscription();
this.blurSubscription = new Subscription();
/**
* popover显示位置
*/
this.position = 'top';
/**
* `appendToBody`默认可以不传，仅当popover绑定元素外层宽高不够时，overflow为hidden，不想popover的弹出框被一并隐藏掉。
*/
this.appendToBody = true;
this.zIndex = 1060;
this.popType = 'default';
// 触发 popover 的方式（点击/鼠标悬停等）
this.trigger = 'click';
// 触发 popover 的方式（点击/鼠标悬停等）
this.hoverToContent = false;
this.onDocumentClick = (/**
* @param {?} event
* @return {?}
*/
(event) => {
event.stopPropagation();
if (this.controlled && !this.triggerElementRef.nativeElement.contains(event.target) &&
!(this.popoverComponentRef && this.popoverComponentRef.instance.elementRef.nativeElement.contains(event.target))) {
this.hide();
}
});
}
/**
* popover内容
* @param {?} _popoverContent
* @return {?}
*/
set content(_popoverContent) {
this._content = _popoverContent;
if (this.popoverComponentRef) {
this.popoverComponentRef.instance.content = _popoverContent;
setTimeout((/**
* @return {?}
*/
() => {
if (this.popoverComponentRef) {
this.popoverComponentRef.instance.updatePosition();
}
}));
}
}
/**
* @param {?} _isShow
* @return {?}
*/
set visible(_isShow) {
if (_isShow) {
// when set value and create component at the same time，should wait after ng2 dirty check done
setTimeout((/**
* @return {?}
*/
() => this.show()), 0);
}
else {
this.hide();
}
}
/**
* @return {?}
*/
createPopover() {
if (this.appendToBody) {
this.popoverComponentRef = this.overlayContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(PopoverComponent));
}
else {
this.popoverComponentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(PopoverComponent), this.viewContainerRef.length, this.injector);
}
Object.assign(this.popoverComponentRef.instance, {
content: this._content,
triggerElementRef: this.triggerElementRef,
position: this.position,
popType: this.popType,
scrollElement: this.scrollElement,
appendToBody: this.appendToBody,
zIndex: this.zIndex
});
}
/**
* @return {?}
*/
show() {
this.hide();
if (!this._content) {
return;
}
if (!this.popoverComponentRef) {
this.createPopover();
}
if (this.showAnimate) {
this.popoverComponentRef.instance.show();
}
document.addEventListener('click', this.onDocumentClick);
if (this.trigger === 'hover' && this.hoverToContent) {
this.blurSubscription = fromEvent(this.popoverComponentRef.instance.elementRef.nativeElement, 'mouseleave')
.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
if (event.type === 'mouseleave' && this.controlled) {
this.hide();
}
}));
this.blurSub.add(this.blurSubscription);
}
}
/**
* @return {?}
*/
destroy() {
if (this.popoverComponentRef) {
this.popoverComponentRef.destroy();
this.popoverComponentRef = null;
}
document.removeEventListener('click', this.onDocumentClick);
}
/**
* @return {?}
*/
ngOnInit() {
/** @type {?} */
const element = this.triggerElementRef.nativeElement;
if (this.trigger === 'click') {
this.subscription.add(fromEvent(element, 'click').subscribe((/**
* @param {?} event
* @return {?}
*/
event => {
if (this.controlled) {
this.show();
}
})));
}
else if (this.trigger === 'hover') {
this.subscription.add(merge(fromEvent(element, 'mouseenter'), fromEvent(element, 'mouseleave')).subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
if (event.type === 'mouseenter' && this.controlled) {
this.show();
}
if (event.type === 'mouseleave' && this.controlled) {
if (this.hoverToContent) {
/** @type {?} */
const hideTimer = setTimeout((/**
* @return {?}
*/
() => {
/** @type {?} */
const relatedTarget = event.relatedTarget;
if (!this.triggerElementRef.nativeElement.contains(relatedTarget) &&
!(this.popoverComponentRef && this.popoverComponentRef.instance.elementRef.nativeElement.contains(relatedTarget))) {
this.hide();
}
clearTimeout(hideTimer);
}), 100);
}
else {
this.hide();
}
}
})));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
this.subscription.unsubscribe();
if (this.blurSub) {
this.blurSub.unsubscribe();
}
}
/**
* @return {?}
*/
hide() {
if (this.blurSubscription) {
this.blurSubscription.unsubscribe();
this.blurSub.remove(this.blurSubscription);
}
if (this.popoverComponentRef) {
if (!this.showAnimate) {
this.destroy();
return;
}
this.popoverComponentRef.instance.hide();
this.popoverComponentRef.instance.onHidden = (/**
* @return {?}
*/
() => {
this.destroy();
});
}
}
}
PopoverDirective.decorators = [
{ type: Directive, args: [{
selector: '[dPopover]',
exportAs: 'dPopover',
},] }
];
/** @nocollapse */
PopoverDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: OverlayContainerRef },
{ type: ViewContainerRef },
{ type: Injector },
{ type: ComponentFactoryResolver }
];
PopoverDirective.propDecorators = {
content: [{ type: Input }],
controlled: [{ type: Input }],
position: [{ type: Input }],
showAnimate: [{ type: Input }],
scrollElement: [{ type: Input }],
appendToBody: [{ type: Input }],
zIndex: [{ type: Input }],
popType: [{ type: Input }],
trigger: [{ type: Input }],
hoverToContent: [{ type: Input }],
visible: [{ type: Input }]
};
if (false) {
/** @type {?} */
PopoverDirective.prototype.popoverComponentRef;
/** @type {?} */
PopoverDirective.prototype._content;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.subscription;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.blurSub;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.blurSubscription;
/**
* 是否通过visible来控制popover状态
* @type {?}
*/
PopoverDirective.prototype.controlled;
/**
* popover显示位置
* @type {?}
*/
PopoverDirective.prototype.position;
/**
* 是否显示动画
* @type {?}
*/
PopoverDirective.prototype.showAnimate;
/**
* `scrollElement` 默认值是 `window `, 可以不传，只有当页面的滚动不在 window 且`appendToBody`属性为`true`上的时候才需要传递
* @type {?}
*/
PopoverDirective.prototype.scrollElement;
/**
* `appendToBody`默认可以不传，仅当popover绑定元素外层宽高不够时，overflow为hidden，不想popover的弹出框被一并隐藏掉。
* @type {?}
*/
PopoverDirective.prototype.appendToBody;
/** @type {?} */
PopoverDirective.prototype.zIndex;
/** @type {?} */
PopoverDirective.prototype.popType;
/** @type {?} */
PopoverDirective.prototype.trigger;
/** @type {?} */
PopoverDirective.prototype.hoverToContent;
/** @type {?} */
PopoverDirective.prototype.onDocumentClick;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.triggerElementRef;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.overlayContainerRef;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.injector;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* Generated from: popover.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PopoverModule {
}
PopoverModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
PositioningModule
],
exports: [PopoverComponent, PopoverDirective],
declarations: [PopoverComponent, PopoverDirective],
entryComponents: [PopoverComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-popover.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { PopoverComponent, PopoverDirective, PopoverModule };
//# sourceMappingURL=ng-devui-popover.js.map