import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { Component, ElementRef, Input, ViewContainerRef } from '@angular/core';
import { ZuiB } from '@material-zui/core';
export class ZuiPopOverComponent {
    constructor(scrollStrategies, overlay, _element, viewContainerRef) {
        this.scrollStrategies = scrollStrategies;
        this.overlay = overlay;
        this._element = _element;
        this.viewContainerRef = viewContainerRef;
        this.position = 'end';
        this.padding = '15px';
        this.width = '100%';
        this.maxHeight = 'auto';
        this.showPointer = false;
        this.isOpen = false;
        this.isInside = false;
        this.scrollStrategy = this.scrollStrategies.reposition();
        this.mouseenter = () => {
            clearTimeout(this.closeTimeout);
            this.isOpen = true;
        };
        this.mouseleave = () => {
            this.closeTimeout = setTimeout(() => {
                if (!this.isInside) {
                    this.isOpen = false;
                }
            }, 100);
        };
        this.hoverContent = () => {
            clearTimeout(this.closeTimeout);
            this.isInside = true;
        };
        this.blurContent = () => {
            this.isInside = false;
            this.mouseleave();
        };
    }
    set pointer(val) {
        this.showPointer = ZuiB.toBool(val);
    }
}
ZuiPopOverComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-popover',
                template: "<div #component class=\"zui-popover__component\" [class.zui-pointer]=\"showPointer\" (mouseenter)=\"mouseenter()\" (mouseleave)=\"mouseleave()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <ng-content select=\"[component]\"></ng-content>\n</div>\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen\" [cdkConnectedOverlayOffsetY]=\"10\">\n  <div class=\"zui-popover__format\" [ngStyle]=\"{padding: padding, width: width, 'max-height': maxHeight}\" (mouseenter)=\"hoverContent()\" (mouseleave)=\"blurContent()\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n\n<!-- <ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOffsetY]=\"10\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayPositionStrategy]=\"positionStrategy\"\n> -->\n",
                styles: [".zui-popover__component{display:inline-block}.zui-popover__format{overflow-y:auto;background-color:#fff;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.zui-popover__format:before{content:\"\";position:absolute;top:-15px;left:15px;border:15px solid transparent;border-top:none;border-bottom:15px solid #fff}"]
            },] }
];
ZuiPopOverComponent.ctorParameters = () => [
    { type: ScrollStrategyOptions },
    { type: Overlay },
    { type: ElementRef },
    { type: ViewContainerRef }
];
ZuiPopOverComponent.propDecorators = {
    position: [{ type: Input }],
    padding: [{ type: Input }],
    width: [{ type: Input }],
    maxHeight: [{ type: Input }],
    pointer: [{ type: Input }]
};
//# sourceMappingURL=index.component.js.map