import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, Renderer2, TemplateRef } from '@angular/core';
import { PositionService } from 'ng-devui/position';
import { fromEvent, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/position";
import * as i2 from "@angular/common";
export class ReadTipComponent {
    constructor(renderer, positionService, elementRef, cdr) {
        this.renderer = renderer;
        this.positionService = positionService;
        this.elementRef = elementRef;
        this.cdr = cdr;
        this.position = 'top';
        this.showAnimate = false;
        this.zIndex = 1060;
        this.subs = new Subscription();
        this.SCROLL_REFRESH_INTERVAL = 100;
        this.animateState = this.showAnimate ? 'void' : '';
    }
    get display() {
        return this.content ? 'block' : 'none';
    }
    get class() {
        return 'devui-popover ' + this.currentPosition + ' ' + this.connectionBias;
    }
    get state() {
        return this.animateState;
    }
    get template() {
        return this.content instanceof TemplateRef ? this.content : null;
    }
    ngOnInit() {
        this.elementRef.nativeElement.style.zIndex = this.zIndex;
    }
    ngAfterViewInit() {
        setTimeout(() => {
            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(() => {
                this.updatePosition();
            }));
            this.subs.add(fromEvent(window, 'resize')
                .pipe(debounceTime(this.SCROLL_REFRESH_INTERVAL))
                .subscribe(() => {
                this.updatePosition();
            }));
        }
    }
    ngAfterContentChecked() {
        this.updatePosition();
    }
    show() {
        this.animateState = 'visible';
    }
    hide() {
        this.animateState = 'void';
    }
    onHidden() { }
    onAnimationEnd(event) {
        if (event.toState === 'void') {
            this.onHidden();
        }
    }
    ngOnDestroy() {
        if (this.subs) {
            this.subs.unsubscribe();
        }
    }
    updatePosition() {
        const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.elementRef.nativeElement, this.position, this.appendToBody);
        this.currentPosition = rect.placementPrimary;
        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`);
    }
}
ReadTipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ReadTipComponent, deps: [{ token: i0.Renderer2 }, { token: i1.PositionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ReadTipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ReadTipComponent, selector: "d-read-tip", inputs: { triggerElementRef: "triggerElementRef", position: "position", content: "content", customData: "customData", title: "title", showAnimate: "showAnimate", scrollElement: "scrollElement", appendToBody: "appendToBody", zIndex: "zIndex", popMaxWidth: "popMaxWidth", overlayClassName: "overlayClassName" }, host: { listeners: { "@state.done": "onAnimationEnd($event)" }, properties: { "style.display": "this.display", "class": "this.class", "@state": "this.state" } }, ngImport: i0, template: "<div class=\"arrow\"></div>\n<div class=\"devui-popover-content {{ overlayClassName }}\" [style.maxWidth.px]=\"popMaxWidth\">\n  <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\" [ngTemplateOutletContext]=\"{ $implicit: customData }\"> </ng-template>\n  <ng-template #defaultTemplate>\n    <div class=\"read-tip-container\">\n      <div class=\"title\">\n        {{ title }}\n      </div>\n      <div class=\"content\">\n        {{ content }}\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host.devui-popover{font-size:12px;font-size:var(--devui-font-size, 12px);position:absolute;top:0;left:0;line-height:1.5;border:none;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);z-index:1060;z-index:var(--devui-z-index-pop-up, 1060);background-color:#464d6e;background-color:var(--devui-feedback-overlay-bg, #464d6e);color:#dfe1e6;color:var(--devui-feedback-overlay-text, #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{transform:translate(-50%);border-bottom-width:0;border-top-color:#464d6e;border-top-color:var(--devui-feedback-overlay-bg, #464d6e);bottom:-8px}:host.devui-popover.right>.arrow{left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#464d6e;border-right-color:var(--devui-feedback-overlay-bg, #464d6e)}:host.devui-popover.bottom>.arrow{transform:translate(-50%);border-top-width:0;border-bottom-color:#464d6e;border-bottom-color:var(--devui-feedback-overlay-bg, #464d6e);top:-8px}:host.devui-popover.left>.arrow{right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#464d6e;border-left-color:var(--devui-feedback-overlay-bg, #464d6e)}:host.devui-popover.bias-left>.arrow{left:14px}:host.devui-popover.bias-right>.arrow{right:14px}:host.devui-popover.bias-top>.arrow{top:13px}:host.devui-popover.bias-bottom>.arrow{bottom:5px}:host.devui-popover.bias-horizontal-center>.arrow{left:50%}:host.devui-popover.bias-vertical-center>.arrow{top:50%}:host.devui-popover.top{margin-top:-8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.bottom{margin-top:8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.left{margin-left:-8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.right{margin-left:8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-popover-content .read-tip-container .title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-popover-content .read-tip-container .content{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-popover-icon{display:block;position:absolute;left:10px;top:6px}.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;fill:var(--devui-success, #50d4ab)}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>path{fill:#fac20a;fill:var(--devui-warning, #fac20a)}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0;fill:var(--devui-info, #5e7ce0)}.devui-icon.devui-icon-info>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-error>g>path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-icon.devui-icon-error>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-popover-content{padding:4px 12px}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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)')),
        ]),
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ReadTipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-read-tip', 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)')),
                        ]),
                    ], template: "<div class=\"arrow\"></div>\n<div class=\"devui-popover-content {{ overlayClassName }}\" [style.maxWidth.px]=\"popMaxWidth\">\n  <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\" [ngTemplateOutletContext]=\"{ $implicit: customData }\"> </ng-template>\n  <ng-template #defaultTemplate>\n    <div class=\"read-tip-container\">\n      <div class=\"title\">\n        {{ title }}\n      </div>\n      <div class=\"content\">\n        {{ content }}\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host.devui-popover{font-size:12px;font-size:var(--devui-font-size, 12px);position:absolute;top:0;left:0;line-height:1.5;border:none;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);z-index:1060;z-index:var(--devui-z-index-pop-up, 1060);background-color:#464d6e;background-color:var(--devui-feedback-overlay-bg, #464d6e);color:#dfe1e6;color:var(--devui-feedback-overlay-text, #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{transform:translate(-50%);border-bottom-width:0;border-top-color:#464d6e;border-top-color:var(--devui-feedback-overlay-bg, #464d6e);bottom:-8px}:host.devui-popover.right>.arrow{left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#464d6e;border-right-color:var(--devui-feedback-overlay-bg, #464d6e)}:host.devui-popover.bottom>.arrow{transform:translate(-50%);border-top-width:0;border-bottom-color:#464d6e;border-bottom-color:var(--devui-feedback-overlay-bg, #464d6e);top:-8px}:host.devui-popover.left>.arrow{right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#464d6e;border-left-color:var(--devui-feedback-overlay-bg, #464d6e)}:host.devui-popover.bias-left>.arrow{left:14px}:host.devui-popover.bias-right>.arrow{right:14px}:host.devui-popover.bias-top>.arrow{top:13px}:host.devui-popover.bias-bottom>.arrow{bottom:5px}:host.devui-popover.bias-horizontal-center>.arrow{left:50%}:host.devui-popover.bias-vertical-center>.arrow{top:50%}:host.devui-popover.top{margin-top:-8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.bottom{margin-top:8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.left{margin-left:-8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host.devui-popover.right{margin-left:8px;box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-popover-content .read-tip-container .title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-popover-content .read-tip-container .content{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-popover-icon{display:block;position:absolute;left:10px;top:6px}.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;fill:var(--devui-success, #50d4ab)}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-warning>g>path{fill:#fac20a;fill:var(--devui-warning, #fac20a)}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0;fill:var(--devui-info, #5e7ce0)}.devui-icon.devui-icon-info>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-icon.devui-icon-error>g>path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-icon.devui-icon-error>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-popover-content{padding:4px 12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PositionService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { triggerElementRef: [{
                type: Input
            }], position: [{
                type: Input
            }], content: [{
                type: Input
            }], customData: [{
                type: Input
            }], title: [{
                type: Input
            }], showAnimate: [{
                type: Input
            }], scrollElement: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], popMaxWidth: [{
                type: Input
            }], overlayClassName: [{
                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']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 