ng-devui/fesm2022/ng-devui-popover.mjs

DevUI components based on Angular

import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { TemplateRef, Component, Inject, Input, HostBinding, HostListener, Directive, NgModule } from '@angular/core';
import * as i1$1 from 'ng-devui/overlay-container';
import { OverlayContainerModule } from 'ng-devui/overlay-container';
import * as i1 from 'ng-devui/position';
import { PositioningModule } from 'ng-devui/position';
import * as i2$1 from 'ng-devui/utils';
import { directionFadeInOut, WithConfig } from 'ng-devui/utils';
import { Subscription, fromEvent, Subject } from 'rxjs';
import { debounceTime, map, filter, takeUntil } from 'rxjs/operators';
import { __decorate, __metadata } from 'tslib';

class PopoverComponent {
    get position() {
        return this._position;
    }
    set position(pos) {
        this._position = pos;
        this.currentPosition = Array.isArray(pos) ? pos[0] : pos;
    }
    /**
     * @deprecated Use mouseLeaveDelay to replace.
     */
    set hoverDelayTime(delayTime) {
        this.mouseLeaveDelay = delayTime;
    }
    get display() {
        return this.content ? 'block' : 'none';
    }
    get class() {
        return 'devui-popover ' + this.currentPosition + ' ' + this.connectionBias + ' devui-popover-' + this.popType;
    }
    get state() {
        return this.showAnimation && this.animateState;
    }
    get disabled() {
        return !this.showAnimation;
    }
    get template() {
        return this.content instanceof TemplateRef ? this.content : null;
    }
    constructor(renderer, positionService, elementRef, cdr, doc) {
        this.renderer = renderer;
        this.positionService = positionService;
        this.elementRef = elementRef;
        this.cdr = cdr;
        this.doc = doc;
        this.currentPosition = 'top';
        this._position = ['top', 'left', 'bottom', 'right'];
        this.showAnimation = true;
        this.autoHideCoefficient = 0;
        this.zIndex = 1060;
        // 防止每次鼠标不小心经过目标元素就会显示出PopOver的内容，所以增加适当的延迟。
        this.mouseEnterDelay = 150;
        // 因为鼠标移出之后如果立刻消失会很突然，所以增加略小一些的延迟，使得既不突然也反应灵敏
        this.mouseLeaveDelay = 100;
        this.hasSetScrollElement = false;
        this.subs = new Subscription();
        this.SCROLL_REFRESH_INTERVAL = 100;
        this.document = this.doc;
    }
    ngOnInit() {
        this.elementRef.nativeElement.style.zIndex = this.zIndex;
    }
    ngAfterViewInit() {
        this.updatePosition();
        if (this.appendToBody) {
            if (this.scrollElement) {
                this.hasSetScrollElement = this.autoHideCoefficient >= 0;
            }
            else {
                this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
            }
            this.subs.add(fromEvent(this.scrollElement || window, 'scroll')
                .pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
                .subscribe(() => {
                this.updatePosition();
            }));
            this.subs.add(fromEvent(window, 'resize')
                .pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
                .subscribe(() => {
                this.updatePosition();
            }));
        }
    }
    ngOnChanges(changes) {
        if (changes.content) {
            if (this.content !== undefined) {
                this.updatePosition();
            }
        }
    }
    show() { }
    hide() {
        this.animateState = 'void';
    }
    // will be overwrite by directive
    onHidden() { }
    onAnimationEnd(event) {
        if (event.toState === 'void') {
            this.onHidden();
        }
    }
    ngOnDestroy() {
        if (this.subs) {
            this.subs.unsubscribe();
        }
    }
    updatePosition() {
        this.renderer.setStyle(this.elementRef.nativeElement, 'visibility', 'hidden');
        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', 'translate(0, -99999px)');
        const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.elementRef.nativeElement, this.position, this.appendToBody);
        setTimeout(() => {
            this.currentPosition = rect.placementPrimary;
            if (this.checkBounds(rect)) {
                return;
            }
            this.animateState = this.currentPosition;
            this.connectionBias = `bias-${rect.placementSecondary}`;
            if (rect.placementSecondary === 'center') {
                if (rect.placementPrimary === 'left' || rect.placementPrimary === 'right') {
                    this.connectionBias = 'bias-vertical-center';
                }
                else {
                    this.connectionBias = 'bias-horizontal-center';
                }
            }
            this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${rect.left}px`);
            this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${rect.top}px`);
            // 移除样式
            this.renderer.removeStyle(this.elementRef.nativeElement, 'visibility');
            this.renderer.removeStyle(this.elementRef.nativeElement, 'transform');
        });
    }
    checkBounds(rect) {
        // 手动设置了scrollElement才执行自动隐藏逻辑，位置信息及判断排列顺序都遵循上右下左
        if (this.hasSetScrollElement) {
            const docElement = this.document.documentElement ? this.document.documentElement : this.document.body;
            const { scrollLeft, scrollTop } = docElement;
            const containerRect = this.scrollElement.getBoundingClientRect();
            const rectFix = {
                ...rect,
                top: rect.top + rect.height * this.autoHideCoefficient,
                right: rect.right - rect.width * this.autoHideCoefficient,
                bottom: rect.bottom - rect.height * this.autoHideCoefficient,
                left: rect.left + rect.width * this.autoHideCoefficient,
            };
            const positionFix = {
                top: [rectFix.height, 0, 0, 0],
                right: [0, -1 * rectFix.width, 0, 0],
                bottom: [0, 0, -1 * rectFix.height, 0],
                left: [0, 0, 0, rectFix.width],
            };
            const positionKeyword = this.currentPosition.split('-')[0];
            const positionFixArr = positionFix[positionKeyword] ?? [0, 0, 0, 0];
            const bounds = [
                Math.round(rectFix.top + positionFixArr[0]) >= Math.round(containerRect.top + scrollTop),
                Math.round(rectFix.right + positionFixArr[1]) <= Math.round(containerRect.left + containerRect.width + scrollLeft),
                Math.round(rectFix.bottom + positionFixArr[2]) <= Math.round(containerRect.top + containerRect.height + scrollTop),
                Math.round(rectFix.left + positionFixArr[3]) >= Math.round(containerRect.left + scrollLeft),
            ];
            if (bounds.includes(false)) {
                this.animateState = 'void';
                return true;
            }
        }
        return false;
    }
    updatePositionAndDetectChange() {
        this.updatePosition();
        this.cdr.detectChanges();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.Renderer2 }, { token: i1.PositionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PopoverComponent, selector: "d-popover", inputs: { triggerElementRef: "triggerElementRef", position: "position", content: "content", showAnimation: "showAnimation", scrollElement: "scrollElement", autoHideCoefficient: "autoHideCoefficient", appendToBody: "appendToBody", zIndex: "zIndex", popType: "popType", popMaxWidth: "popMaxWidth", popoverStyle: "popoverStyle", hoverDelayTime: "hoverDelayTime", mouseEnterDelay: "mouseEnterDelay", mouseLeaveDelay: "mouseLeaveDelay" }, host: { listeners: { "@directionFadeInOut.done": "onAnimationEnd($event)" }, properties: { "style.display": "this.display", "class": "this.class", "@directionFadeInOut": "this.state", "@.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"arrow\" [ngStyle]=\"{ backgroundColor: popoverStyle?.backgroundColor ? popoverStyle.backgroundColor : '' }\"></div>\r\n<div\r\n  class=\"devui-popover-content\"\r\n  [style.maxWidth.px]=\"popMaxWidth\"\r\n  [style.width]=\"popMaxWidth ? 'fit-content' : 'auto'\"\r\n  [ngStyle]=\"popoverStyle\"\r\n>\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 id=\"\u6E05\u7A7A\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <path\r\n          d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\r\n          fill-rule=\"nonzero\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n  </span>\r\n  <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\"> </ng-template>\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"devui-popover-main-content\" [ngClass]=\"{ 'with-icon': popType && popType !== 'default' }\" [innerHTML]=\"content\"></div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host.devui-popover{font-size:var(--devui-font-size, 12px);top:0;left:0;line-height:1.5;border:none;z-index:var(--devui-z-index-pop-up, 1060);color:var(--devui-feedback-overlay-text, #f0f0f0);overflow-wrap:break-word}:host.devui-popover,:host.devui-popover>.arrow{position:absolute;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 24px 0) var(--devui-shadow, rgba(0, 0, 0, .16))}:host.devui-popover,:host.devui-popover>.devui-popover-content{border-radius:var(--devui-border-radius-feedback, 4px)}:host.devui-popover>.arrow{width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1}:host.devui-popover.top>.arrow{margin-left:-4px;bottom:-4px}:host.devui-popover.right>.arrow{left:-4px;margin-top:-4px}:host.devui-popover.bottom>.arrow{margin-left:-4px;top:-4px}:host.devui-popover.left>.arrow{right:-4px;margin-top:-4px}:host.devui-popover.bias-left>.arrow{left:16px}:host.devui-popover.bias-right>.arrow{right:16px}:host.devui-popover.bias-top>.arrow{top:13px}:host.devui-popover.bias-bottom>.arrow{bottom:7px}:host.devui-popover.bias-horizontal-center>.arrow{left:50%}:host.devui-popover.bias-vertical-center>.arrow{top:50%}:host.devui-popover.top{margin-top:-7px}:host.devui-popover.bottom{margin-top:7px}:host.devui-popover.left{margin-left:-7px}:host.devui-popover.right{margin-left:7px}.devui-popover-content,.arrow{background-color:var(--devui-feedback-overlay-bg, #333333)}.devui-popover-content{padding:5px 14px}.devui-popover-icon{display:block;position:absolute;left:10px;top:7px}.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:var(--devui-success, #058358)}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>path{fill:var(--devui-warning, #fcc800)}.devui-icon.devui-icon-info>g>g{fill:var(--devui-info, #0a59f7)}.devui-icon.devui-icon-info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [directionFadeInOut] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-popover', animations: [directionFadeInOut], template: "<div class=\"arrow\" [ngStyle]=\"{ backgroundColor: popoverStyle?.backgroundColor ? popoverStyle.backgroundColor : '' }\"></div>\r\n<div\r\n  class=\"devui-popover-content\"\r\n  [style.maxWidth.px]=\"popMaxWidth\"\r\n  [style.width]=\"popMaxWidth ? 'fit-content' : 'auto'\"\r\n  [ngStyle]=\"popoverStyle\"\r\n>\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 id=\"\u6E05\u7A7A\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <path\r\n          d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\r\n          fill-rule=\"nonzero\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n  </span>\r\n  <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\"> </ng-template>\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"devui-popover-main-content\" [ngClass]=\"{ 'with-icon': popType && popType !== 'default' }\" [innerHTML]=\"content\"></div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host.devui-popover{font-size:var(--devui-font-size, 12px);top:0;left:0;line-height:1.5;border:none;z-index:var(--devui-z-index-pop-up, 1060);color:var(--devui-feedback-overlay-text, #f0f0f0);overflow-wrap:break-word}:host.devui-popover,:host.devui-popover>.arrow{position:absolute;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 24px 0) var(--devui-shadow, rgba(0, 0, 0, .16))}:host.devui-popover,:host.devui-popover>.devui-popover-content{border-radius:var(--devui-border-radius-feedback, 4px)}:host.devui-popover>.arrow{width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1}:host.devui-popover.top>.arrow{margin-left:-4px;bottom:-4px}:host.devui-popover.right>.arrow{left:-4px;margin-top:-4px}:host.devui-popover.bottom>.arrow{margin-left:-4px;top:-4px}:host.devui-popover.left>.arrow{right:-4px;margin-top:-4px}:host.devui-popover.bias-left>.arrow{left:16px}:host.devui-popover.bias-right>.arrow{right:16px}:host.devui-popover.bias-top>.arrow{top:13px}:host.devui-popover.bias-bottom>.arrow{bottom:7px}:host.devui-popover.bias-horizontal-center>.arrow{left:50%}:host.devui-popover.bias-vertical-center>.arrow{top:50%}:host.devui-popover.top{margin-top:-7px}:host.devui-popover.bottom{margin-top:7px}:host.devui-popover.left{margin-left:-7px}:host.devui-popover.right{margin-left:7px}.devui-popover-content,.arrow{background-color:var(--devui-feedback-overlay-bg, #333333)}.devui-popover-content{padding:5px 14px}.devui-popover-icon{display:block;position:absolute;left:10px;top:7px}.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:var(--devui-success, #058358)}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>path{fill:var(--devui-warning, #fcc800)}.devui-icon.devui-icon-info>g>g{fill:var(--devui-info, #0a59f7)}.devui-icon.devui-icon-info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.PositionService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { triggerElementRef: [{
                type: Input
            }], position: [{
                type: Input
            }], content: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], scrollElement: [{
                type: Input
            }], autoHideCoefficient: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], popType: [{
                type: Input
            }], popMaxWidth: [{
                type: Input
            }], popoverStyle: [{
                type: Input
            }], hoverDelayTime: [{
                type: Input
            }], mouseEnterDelay: [{
                type: Input
            }], mouseLeaveDelay: [{
                type: Input
            }], display: [{
                type: HostBinding,
                args: ['style.display']
            }], class: [{
                type: HostBinding,
                args: ['class']
            }], state: [{
                type: HostBinding,
                args: ['@directionFadeInOut']
            }], disabled: [{
                type: HostBinding,
                args: ['@.disabled']
            }], onAnimationEnd: [{
                type: HostListener,
                args: ['@directionFadeInOut.done', ['$event']]
            }] } });

class PopoverDirective {
    /**
     * popover内容
     */
    set content(_popoverContent) {
        this._content = _popoverContent;
        if (this.popoverComponentRef) {
            this.popoverComponentRef.instance.content = _popoverContent;
            setTimeout(() => {
                if (this.popoverComponentRef) {
                    this.popoverComponentRef.instance.updatePosition();
                }
            });
        }
    }
    /**
     * @deprecated Use showAnimation to replace.
     */
    set showAnimate(isShowAnimate) {
        this.showAnimation = isShowAnimate;
    }
    /**
     * @deprecated Use mouseLeaveDelay to replace.
     * 曾经是触发移入popover内部的延迟时间
     * 废弃,现在使用参数mouseLeaveDelay代替
     */
    set hoverDelayTime(delayTime) {
        this.mouseLeaveDelay = delayTime;
    }
    set visible(_isShow) {
        if (_isShow) {
            // when set value and create component at the same time，should wait after ng2 dirty check done
            setTimeout(() => this.show(), 0);
        }
        else {
            this.hide();
        }
    }
    get eleAppendToBody() {
        return this.appendToBody || this.triggerElementRef.nativeElement.style.position === 'fixed';
    }
    constructor(triggerElementRef, overlayContainerRef, viewContainerRef, injector, componentFactoryResolver, devConfigService, doc) {
        this.triggerElementRef = triggerElementRef;
        this.overlayContainerRef = overlayContainerRef;
        this.viewContainerRef = viewContainerRef;
        this.injector = injector;
        this.componentFactoryResolver = componentFactoryResolver;
        this.devConfigService = devConfigService;
        this.doc = doc;
        this.subscription = new Subscription();
        /**
         * popover显示位置
         */
        this.position = ['top', 'right', 'bottom', 'left'];
        /**
         * 是否显示动画
         */
        this.showAnimation = true;
        /**
         * 自动隐藏系数，弹出框超出已设置的 scrollELment 边界时会自动隐藏，该值与弹出框的宽或高乘积控制超出边界多少后自动隐藏，为负数时不隐藏
         */
        this.autoHideCoefficient = 0;
        /**
         * `appendToBody`默认可以不传，仅当popover绑定元素外层宽高不够时，overflow为hidden，不想popover的弹出框被一并隐藏掉。
         */
        this.appendToBody = true;
        this.zIndex = 1060;
        this.popType = 'default';
        // 触发 popover 的方式（点击/鼠标悬停等）
        this.trigger = 'click';
        /**
         * @deprecated
         * 是否可以移入popover内部
         */
        this.hoverToContent = false;
        // 防止每次鼠标不小心经过目标元素就会显示出PopOver的内容，所以增加适当的延迟。
        this.mouseEnterDelay = 150;
        // 因为鼠标移出之后如果立刻消失会很突然，所以增加略小一些的延迟，使得既不突然也反应灵敏
        this.mouseLeaveDelay = 100;
        this.unsubscribe$ = new Subject();
        this.unsubscribeP$ = new Subject();
        this.onDocumentClick = (event) => {
            event.stopPropagation();
            if (this.controlled && !this.triggerElementRef.nativeElement.contains(event.target) &&
                !(this.popoverComponentRef && this.popoverComponentRef.instance.elementRef.nativeElement.contains(event.target))) {
                this.hide();
            }
        };
        this.document = this.doc;
    }
    createPopover() {
        if (this.eleAppendToBody) {
            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,
            popMaxWidth: this.popMaxWidth,
            scrollElement: this.scrollElement,
            appendToBody: this.eleAppendToBody,
            zIndex: this.zIndex,
            showAnimation: this.showAnimation,
            popoverStyle: this.popoverStyle,
            autoHideCoefficient: this.autoHideCoefficient,
        });
        // 对创建的ToolTip组件添加鼠标移入和移出的监听事件
        if (this.popoverComponentRef.instance.elementRef.nativeElement && this.trigger === 'hover') {
            this.addMouseEvent();
        }
    }
    addMouseEvent() {
        const el = this.popoverComponentRef.instance.elementRef.nativeElement;
        fromEvent(el, 'mouseenter')
            .pipe(map((event) => {
            this.isEnter = true;
            return event;
        }), debounceTime(0), filter((event) => this.isEnter), takeUntil(this.unsubscribeP$))
            .subscribe(() => {
            if (!this.popoverComponentRef) {
                this.show();
            }
        });
        fromEvent(el, 'mouseleave')
            .pipe(map((event) => {
            this.isEnter = false;
            return event;
        }), debounceTime(this.mouseLeaveDelay), filter((event) => !this.isEnter), takeUntil(this.unsubscribeP$))
            .subscribe(() => {
            this.hide();
        });
    }
    show() {
        this.hide();
        if (!this.popoverComponentRef) {
            this.createPopover();
        }
        this.popoverComponentRef.instance.show();
        this.document.addEventListener('click', this.onDocumentClick);
    }
    destroy() {
        if (this.popoverComponentRef) {
            this.popoverComponentRef.destroy();
            this.popoverComponentRef = null;
        }
        this.document.removeEventListener('click', this.onDocumentClick);
        if (this.unsubscribeP$) {
            this.unsubscribeP$.next();
            this.unsubscribeP$.complete();
        }
    }
    ngOnInit() {
        const element = this.triggerElementRef.nativeElement;
        if (this.trigger === 'click') {
            this.subscription.add(fromEvent(element, 'click').subscribe((event) => {
                if (this.controlled) {
                    this.show();
                }
            }));
        }
        else if (this.trigger === 'hover') {
            fromEvent(element, 'mouseenter')
                .pipe(map((event) => {
                this.isEnter = true;
                return event;
            }), debounceTime(this.mouseEnterDelay), filter((event) => this.isEnter), takeUntil(this.unsubscribe$))
                .subscribe(() => {
                if (!this.popoverComponentRef && this.controlled) {
                    this.show();
                }
            });
            fromEvent(element, 'mouseleave')
                .pipe(map((event) => {
                this.isEnter = false;
                return event;
            }), debounceTime(this.mouseLeaveDelay), filter((event) => !this.isEnter), takeUntil(this.unsubscribe$))
                .subscribe(() => {
                if (this.controlled) {
                    this.hide();
                }
            });
        }
    }
    ngOnDestroy() {
        if (this.unsubscribeP$) {
            this.unsubscribeP$.next();
            this.unsubscribeP$.complete();
        }
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
        this.destroy();
        this.subscription.unsubscribe();
    }
    hide() {
        if (this.popoverComponentRef) {
            if (!this.showAnimation) {
                this.destroy();
                return;
            }
            this.popoverComponentRef.instance.hide();
            this.popoverComponentRef.instance.onHidden = () => {
                this.destroy();
            };
        }
        if (this.unsubscribeP$) {
            this.unsubscribeP$.next();
            this.unsubscribeP$.complete();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.OverlayContainerRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.DevConfigService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: PopoverDirective, selector: "[dPopover]", inputs: { content: "content", controlled: "controlled", position: "position", showAnimation: "showAnimation", showAnimate: "showAnimate", scrollElement: "scrollElement", autoHideCoefficient: "autoHideCoefficient", appendToBody: "appendToBody", zIndex: "zIndex", popType: "popType", popMaxWidth: "popMaxWidth", trigger: "trigger", hoverToContent: "hoverToContent", hoverDelayTime: "hoverDelayTime", popoverStyle: "popoverStyle", mouseEnterDelay: "mouseEnterDelay", mouseLeaveDelay: "mouseLeaveDelay", visible: "visible" }, exportAs: ["dPopover"], ngImport: i0 }); }
}
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], PopoverDirective.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[dPopover]',
                    exportAs: 'dPopover',
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.OverlayContainerRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.DevConfigService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { content: [{
                type: Input
            }], controlled: [{
                type: Input
            }], position: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], showAnimate: [{
                type: Input
            }], scrollElement: [{
                type: Input
            }], autoHideCoefficient: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], popType: [{
                type: Input
            }], popMaxWidth: [{
                type: Input
            }], trigger: [{
                type: Input
            }], hoverToContent: [{
                type: Input
            }], hoverDelayTime: [{
                type: Input
            }], popoverStyle: [{
                type: Input
            }], mouseEnterDelay: [{
                type: Input
            }], mouseLeaveDelay: [{
                type: Input
            }], visible: [{
                type: Input
            }] } });

class PopoverModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PopoverModule, declarations: [PopoverComponent, PopoverDirective], imports: [CommonModule,
            PositioningModule,
            OverlayContainerModule], exports: [PopoverComponent, PopoverDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverModule, imports: [CommonModule,
            PositioningModule,
            OverlayContainerModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        PositioningModule,
                        OverlayContainerModule
                    ],
                    exports: [PopoverComponent, PopoverDirective],
                    declarations: [PopoverComponent, PopoverDirective],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PopoverComponent, PopoverDirective, PopoverModule };
//# sourceMappingURL=ng-devui-popover.mjs.map