import * as i0 from '@angular/core';
import { ElementRef, Component, ViewChild, EventEmitter, inject, ViewContainerRef, Directive, Input, Output, HostListener, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@seniorsistemas/angular-components/button';
import { ButtonModule } from '@seniorsistemas/angular-components/button';
import { takeUntil, debounceTime } from 'rxjs/operators';
import { isMousePositionOutsideOfElement, getElementPositionInfo, getElementLeftoverContentAvailable } from '@seniorsistemas/angular-components/utils';

class HelpPopoverComponent {
    VALID_POSITIONS = ['top', 'bottom', 'left', 'right'];
    VALID_ARROW_POSITIONS = ['beginning', 'end', 'middle'];
    _position = 'bottom';
    popoverContent = null;
    closeButton = true;
    icon = '';
    header = '';
    footer = '';
    button = '';
    visible = false;
    arrowElement = null;
    get position() {
        return this._position;
    }
    set position(value) {
        if (!this.VALID_POSITIONS.includes(value)) {
            throw new Error(`Invalid position: ${value}. Valid positions: ${this.VALID_POSITIONS}`);
        }
        this._position = value;
    }
    _arrowPosition = 'beginning';
    get arrowPosition() {
        return this._arrowPosition;
    }
    set arrowPosition(value) {
        if (!this.VALID_ARROW_POSITIONS.includes(value)) {
            throw new Error(`Invalid arrow position: ${value}. Valid arrow positions: ${this.VALID_ARROW_POSITIONS}`);
        }
        this._arrowPosition = value;
    }
    buttonClicked;
    closed = new Subject();
    get contentIsString() {
        return typeof this.popoverContent === 'string';
    }
    get popoverContentTemplateRef() {
        return this.popoverContent;
    }
    get hasHeaderContainer() {
        const _hasHeader = this.hasHeaderText;
        const hasIcon = this.hasIcon;
        const hasCloseButton = this.closeButton;
        return _hasHeader || hasIcon || hasCloseButton;
    }
    get hasFooter() {
        const _hasFooterText = this.hasFooterText;
        const hasButtonText = this.button && this.button.length > 0;
        return _hasFooterText || hasButtonText;
    }
    get hasHeaderText() {
        return this.header && this.header.length > 0;
    }
    get hasFooterText() {
        return this.footer && this.footer.length > 0;
    }
    get hasIcon() {
        return this.icon && this.icon.length > 0;
    }
    close() {
        this.closed.next();
    }
    clickButton() {
        this.buttonClicked.emit();
    }
    ngOnDestroy() {
        this.closed.complete();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HelpPopoverComponent, selector: "s-help-popover", viewQueries: [{ propertyName: "arrowElement", first: true, predicate: ["arrowElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n    class=\"popover-container\"\n    [style.visibility]=\"visible ? 'visible' : 'hidden'\"\n    [class.popover-container-top]=\"position === 'top'\"\n    [class.popover-container-right]=\"position === 'right'\"\n    [class.popover-container-bottom]=\"position === 'bottom'\"\n    [class.popover-container-left]=\"position === 'left'\"\n>\n    <div\n        class=\"arrow-container\"\n        [class.arrow-container-beginning]=\"arrowPosition === 'beginning'\"\n        [class.arrow-container-middle]=\"arrowPosition === 'middle'\"\n        [class.arrow-container-end]=\"arrowPosition === 'end'\"\n    >\n        <div\n            class=\"arrow\"\n            #arrowElement\n        ></div>\n    </div>\n    <div class=\"popover\">\n        @if (hasHeaderContainer) {\n            <div\n                class=\"popover-header-container\"\n                [class.space-between]=\"hasIcon || hasHeaderText\"\n                [class.flex-end]=\"!(hasIcon || hasHeaderText) && closeButton\"\n            >\n                @if (hasIcon || hasHeaderText) {\n                    <div class=\"popover-header-container-text\">\n                        @if (hasIcon) {\n                            <div class=\"popover-icon\">\n                                <i [class]=\"icon\"></i>\n                            </div>\n                        }\n                        @if (hasHeaderText) {\n                            <div class=\"popover-header-text\">\n                                {{ header }}\n                            </div>\n                        }\n                    </div>\n                }\n                @if (closeButton) {\n                    <div class=\"popover-close-button\">\n                        <i\n                            class=\"fas fa-times\"\n                            (click)=\"close()\"\n                        ></i>\n                    </div>\n                }\n            </div>\n        }\n\n        <div class=\"popover-content\">\n            @if (contentIsString) {\n                {{ popoverContent }}\n            } @else {\n                <ng-container *ngTemplateOutlet=\"popoverContentTemplateRef\"></ng-container>\n            }\n        </div>\n\n        @if (hasFooter) {\n            <div class=\"separator\"></div>\n            <div\n                class=\"popover-footer-container\"\n                [class.space-between]=\"hasFooterText\"\n                [class.flex-end]=\"!hasFooterText\"\n            >\n                @if (hasFooterText) {\n                    <p class=\"popover-footer-text\">\n                        {{ footer }}\n                    </p>\n                }\n                @if (button && button.length > 0) {\n                    <div class=\"popover-footer-button\">\n                        <s-button\n                            [label]=\"button\"\n                            priority=\"primary\"\n                            size=\"small\"\n                            (clicked)=\"clickButton()\"\n                            [disabled]=\"false\"\n                            [auxiliary]=\"false\"\n                        >\n                        </s-button>\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</div>\n\n", styles: [":host{display:block;width:fit-content}.popover-container{z-index:1050;position:relative}.popover-container .space-between{justify-content:space-between}.popover-container .flex-end{justify-content:flex-end}.popover-container-top{display:flex;flex-direction:column-reverse}.popover-container-top .arrow{width:100%}.popover-container-top .arrow{width:0;height:0;position:relative;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;border-bottom:0 solid transparent}.popover-container-bottom .arrow{width:100%}.popover-container-bottom .arrow{width:0;height:0;position:relative;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-top:0 solid transparent}.popover-container-left{display:flex;flex-direction:row-reverse;align-items:center}.popover-container-left .arrow{height:100%}.popover-container-left .arrow{width:0;height:0;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;border-right:0 solid transparent}.popover-container-right{display:flex;align-items:center}.popover-container-right .arrow{height:100%}.popover-container-right .arrow{width:0;height:0;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;border-left:0 solid transparent}.popover-container-top .arrow-container,.popover-container-bottom .arrow-container{display:flex}.popover-container-top .arrow-container-beginning,.popover-container-bottom .arrow-container-beginning{justify-content:flex-start}.popover-container-top .arrow-container-beginning .arrow,.popover-container-bottom .arrow-container-beginning .arrow{margin-left:12px}.popover-container-top .arrow-container-middle,.popover-container-bottom .arrow-container-middle{justify-content:center}.popover-container-top .arrow-container-end,.popover-container-bottom .arrow-container-end{justify-content:flex-end}.popover-container-top .arrow-container-end .arrow,.popover-container-bottom .arrow-container-end .arrow{margin-right:12px}.popover-container-left .arrow-container,.popover-container-right .arrow-container{display:flex;align-self:stretch}.popover-container-left .arrow-container-beginning,.popover-container-right .arrow-container-beginning{align-items:flex-start}.popover-container-left .arrow-container-beginning .arrow,.popover-container-right .arrow-container-beginning .arrow{margin-top:12px}.popover-container-left .arrow-container-middle,.popover-container-right .arrow-container-middle{align-items:center}.popover-container-left .arrow-container-end,.popover-container-right .arrow-container-end{align-items:flex-end}.popover-container-left .arrow-container-end .arrow,.popover-container-right .arrow-container-end .arrow{margin-bottom:12px}.popover-container .popover{min-width:200px;max-width:305px;width:fit-content;border-radius:3px;background:#fff;box-shadow:0 1px 5px #00000040}.popover-container .popover-header-container,.popover-container .popover-content,.popover-container .popover-footer-container{padding:8px}.popover-container .popover-close-button i{cursor:pointer}.popover-container .popover-footer-text{color:#212533;font-family:Open Sans;font-size:12px;font-style:normal;font-weight:400}.popover-container .popover-header-container{display:flex}.popover-container .popover-header-container-text{display:flex;justify-content:space-between;gap:8px}.popover-container .popover .separator{width:100%;border:1px solid #dedce5}.popover-container .popover-footer-container{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-help-popover', template: "<div\n    class=\"popover-container\"\n    [style.visibility]=\"visible ? 'visible' : 'hidden'\"\n    [class.popover-container-top]=\"position === 'top'\"\n    [class.popover-container-right]=\"position === 'right'\"\n    [class.popover-container-bottom]=\"position === 'bottom'\"\n    [class.popover-container-left]=\"position === 'left'\"\n>\n    <div\n        class=\"arrow-container\"\n        [class.arrow-container-beginning]=\"arrowPosition === 'beginning'\"\n        [class.arrow-container-middle]=\"arrowPosition === 'middle'\"\n        [class.arrow-container-end]=\"arrowPosition === 'end'\"\n    >\n        <div\n            class=\"arrow\"\n            #arrowElement\n        ></div>\n    </div>\n    <div class=\"popover\">\n        @if (hasHeaderContainer) {\n            <div\n                class=\"popover-header-container\"\n                [class.space-between]=\"hasIcon || hasHeaderText\"\n                [class.flex-end]=\"!(hasIcon || hasHeaderText) && closeButton\"\n            >\n                @if (hasIcon || hasHeaderText) {\n                    <div class=\"popover-header-container-text\">\n                        @if (hasIcon) {\n                            <div class=\"popover-icon\">\n                                <i [class]=\"icon\"></i>\n                            </div>\n                        }\n                        @if (hasHeaderText) {\n                            <div class=\"popover-header-text\">\n                                {{ header }}\n                            </div>\n                        }\n                    </div>\n                }\n                @if (closeButton) {\n                    <div class=\"popover-close-button\">\n                        <i\n                            class=\"fas fa-times\"\n                            (click)=\"close()\"\n                        ></i>\n                    </div>\n                }\n            </div>\n        }\n\n        <div class=\"popover-content\">\n            @if (contentIsString) {\n                {{ popoverContent }}\n            } @else {\n                <ng-container *ngTemplateOutlet=\"popoverContentTemplateRef\"></ng-container>\n            }\n        </div>\n\n        @if (hasFooter) {\n            <div class=\"separator\"></div>\n            <div\n                class=\"popover-footer-container\"\n                [class.space-between]=\"hasFooterText\"\n                [class.flex-end]=\"!hasFooterText\"\n            >\n                @if (hasFooterText) {\n                    <p class=\"popover-footer-text\">\n                        {{ footer }}\n                    </p>\n                }\n                @if (button && button.length > 0) {\n                    <div class=\"popover-footer-button\">\n                        <s-button\n                            [label]=\"button\"\n                            priority=\"primary\"\n                            size=\"small\"\n                            (clicked)=\"clickButton()\"\n                            [disabled]=\"false\"\n                            [auxiliary]=\"false\"\n                        >\n                        </s-button>\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</div>\n\n", styles: [":host{display:block;width:fit-content}.popover-container{z-index:1050;position:relative}.popover-container .space-between{justify-content:space-between}.popover-container .flex-end{justify-content:flex-end}.popover-container-top{display:flex;flex-direction:column-reverse}.popover-container-top .arrow{width:100%}.popover-container-top .arrow{width:0;height:0;position:relative;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;border-bottom:0 solid transparent}.popover-container-bottom .arrow{width:100%}.popover-container-bottom .arrow{width:0;height:0;position:relative;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-top:0 solid transparent}.popover-container-left{display:flex;flex-direction:row-reverse;align-items:center}.popover-container-left .arrow{height:100%}.popover-container-left .arrow{width:0;height:0;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;border-right:0 solid transparent}.popover-container-right{display:flex;align-items:center}.popover-container-right .arrow{height:100%}.popover-container-right .arrow{width:0;height:0;position:relative;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;border-left:0 solid transparent}.popover-container-top .arrow-container,.popover-container-bottom .arrow-container{display:flex}.popover-container-top .arrow-container-beginning,.popover-container-bottom .arrow-container-beginning{justify-content:flex-start}.popover-container-top .arrow-container-beginning .arrow,.popover-container-bottom .arrow-container-beginning .arrow{margin-left:12px}.popover-container-top .arrow-container-middle,.popover-container-bottom .arrow-container-middle{justify-content:center}.popover-container-top .arrow-container-end,.popover-container-bottom .arrow-container-end{justify-content:flex-end}.popover-container-top .arrow-container-end .arrow,.popover-container-bottom .arrow-container-end .arrow{margin-right:12px}.popover-container-left .arrow-container,.popover-container-right .arrow-container{display:flex;align-self:stretch}.popover-container-left .arrow-container-beginning,.popover-container-right .arrow-container-beginning{align-items:flex-start}.popover-container-left .arrow-container-beginning .arrow,.popover-container-right .arrow-container-beginning .arrow{margin-top:12px}.popover-container-left .arrow-container-middle,.popover-container-right .arrow-container-middle{align-items:center}.popover-container-left .arrow-container-end,.popover-container-right .arrow-container-end{align-items:flex-end}.popover-container-left .arrow-container-end .arrow,.popover-container-right .arrow-container-end .arrow{margin-bottom:12px}.popover-container .popover{min-width:200px;max-width:305px;width:fit-content;border-radius:3px;background:#fff;box-shadow:0 1px 5px #00000040}.popover-container .popover-header-container,.popover-container .popover-content,.popover-container .popover-footer-container{padding:8px}.popover-container .popover-close-button i{cursor:pointer}.popover-container .popover-footer-text{color:#212533;font-family:Open Sans;font-size:12px;font-style:normal;font-weight:400}.popover-container .popover-header-container{display:flex}.popover-container .popover-header-container-text{display:flex;justify-content:space-between;gap:8px}.popover-container .popover .separator{width:100%;border:1px solid #dedce5}.popover-container .popover-footer-container{display:flex;gap:8px;align-items:center}\n"] }]
        }], propDecorators: { arrowElement: [{
                type: ViewChild,
                args: ['arrowElement', { read: ElementRef, static: true }]
            }] } });

class HelpPopoverDirective {
    MUTATION_OBSERVER_CONFIG = { attributes: true, childList: true, subtree: true };
    OBSERVER_CALLBACK = () => {
        if (!this.componentRef) {
            return;
        }
        this.applyPositionIntoElement();
    };
    RESIZE_OBSERVER = () => {
        this.onResize$.next();
    };
    sHelpPopover = null;
    closeButton = true;
    popoverIcon = '';
    popoverHeader = '';
    popoverFooter = '';
    popoverButtonText = '';
    popoverArrowPosition = 'beginning';
    _popoverPosition = 'bottom';
    get popoverPosition() {
        return this._popoverPosition;
    }
    set popoverPosition(value) {
        this._popoverPosition = value;
        this.internalPosition = value;
    }
    buttonClicked = new EventEmitter();
    onDestroy$ = new Subject();
    componentRef = null;
    mutationObserverPopoverElement = null;
    mutationObserverPopoverContent = null;
    internalPosition = 'bottom';
    onResize$ = new Subject();
    manualTrigger = false;
    listener = (event) => {
        if (!this.componentRef) {
            return;
        }
        const totalElementArea = this.getPopoverElement.getBoundingClientRect();
        if (isMousePositionOutsideOfElement(event, totalElementArea)) {
            this.destroy();
        }
    };
    viewContainerRef = inject(ViewContainerRef);
    element = inject(ElementRef);
    ngOnInit() {
        const popoverElementObserver = new MutationObserver(this.OBSERVER_CALLBACK);
        this.mutationObserverPopoverElement = popoverElementObserver;
        popoverElementObserver.observe(this.element.nativeElement, this.MUTATION_OBSERVER_CONFIG);
        window.addEventListener('resize', this.RESIZE_OBSERVER);
        window.addEventListener('scrollend', this.OBSERVER_CALLBACK);
        this.onResize$.pipe(takeUntil(this.onDestroy$), debounceTime(100)).subscribe(this.OBSERVER_CALLBACK);
    }
    show() {
        this.manualTrigger = true;
        this._createComponent();
    }
    doClick() {
        if (this.manualTrigger) {
            return;
        }
        this._createComponent();
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
        this.destroy();
        if (this.mutationObserverPopoverElement) {
            this.mutationObserverPopoverElement.disconnect();
        }
        window.removeEventListener('resize', this.RESIZE_OBSERVER);
        window.removeEventListener('scrollend', this.OBSERVER_CALLBACK);
    }
    _createComponent() {
        if (!this.sHelpPopover) {
            return;
        }
        if (this.componentRef) {
            this.destroy();
        }
        const componentRef = this.viewContainerRef.createComponent(HelpPopoverComponent);
        this.componentRef = componentRef;
        if (this.mutationObserverPopoverContent) {
            this.mutationObserverPopoverContent.disconnect();
        }
        this.mutationObserverPopoverContent = new MutationObserver(this.OBSERVER_CALLBACK);
        const element = this.getPopoverElement;
        this.mutationObserverPopoverContent.observe(element.querySelector('.popover-content'), this.MUTATION_OBSERVER_CONFIG);
        document.body.appendChild(componentRef.location.nativeElement);
        setTimeout(() => {
            document.addEventListener('click', this.listener);
        });
        const component = componentRef.instance;
        component.popoverContent = this.sHelpPopover;
        component.closeButton = this.closeButton;
        component.icon = this.popoverIcon;
        component.header = this.popoverHeader;
        component.footer = this.popoverFooter;
        component.button = this.popoverButtonText;
        component.position = this.internalPosition;
        component.arrowPosition = this.popoverArrowPosition;
        component.buttonClicked = this.buttonClicked;
        component.closed.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
            this.destroy();
        });
        this.applyPositionIntoElement();
    }
    destroy() {
        document.removeEventListener('click', this.listener);
        if (this.componentRef) {
            this.componentRef.destroy();
            this.componentRef = null;
        }
        this.internalPosition = this.popoverPosition;
        if (this.mutationObserverPopoverContent) {
            this.mutationObserverPopoverContent.disconnect();
        }
    }
    applyPositionIntoElement() {
        const popoverElementPosition = getElementPositionInfo(this.element.nativeElement);
        const position = this.validPosition;
        this.internalPosition = position;
        this.popoverComponentInstance.position = this.internalPosition;
        setTimeout(() => {
            switch (this.internalPosition) {
                case 'bottom': {
                    this.applyPopoverPositionBottom(popoverElementPosition);
                    break;
                }
                case 'top': {
                    this.applyPopoverPositionTop(popoverElementPosition);
                    break;
                }
                case 'left': {
                    this.applyPopoverPositionLeft(popoverElementPosition);
                    break;
                }
                case 'right': {
                    this.applyPopoverPositionRight(popoverElementPosition);
                    break;
                }
            }
            this.popoverComponentInstance.visible = true;
        });
    }
    applyPopoverPositionBottom(popoverElementPosition) {
        const popoverElement = this.getPopoverElement;
        const leftPopover = this.getHorizontalLeft(popoverElementPosition);
        popoverElement.style.position = 'absolute';
        popoverElement.style.left = `${leftPopover}px`;
        popoverElement.style.top = `calc(${popoverElementPosition.top}px + ${popoverElementPosition.elementHeight}px)`;
    }
    applyPopoverPositionTop(popoverElementPosition) {
        const popoverElement = this.getPopoverElement;
        const leftPopover = this.getHorizontalLeft(popoverElementPosition);
        const popoverHeight = popoverElement.getBoundingClientRect().height;
        popoverElement.style.position = 'absolute';
        popoverElement.style.left = `${leftPopover}px`;
        popoverElement.style.top = `calc(${popoverElementPosition.top}px - ${popoverHeight}px)`;
    }
    applyPopoverPositionLeft(popoverElementPosition) {
        const popoverElement = this.getPopoverElement;
        const popoverWidth = popoverElement.getBoundingClientRect().width;
        popoverElement.style.position = 'absolute';
        popoverElement.style.left = `calc(${popoverElementPosition.right}px - ${popoverWidth + popoverElementPosition.elementWidth}px)`;
        popoverElement.style.top = this.getVerticalTop(popoverElementPosition);
    }
    applyPopoverPositionRight(popoverElementPosition) {
        const popoverElement = this.getPopoverElement;
        popoverElement.style.position = 'absolute';
        popoverElement.style.left = `calc(${popoverElementPosition.right}px)`;
        popoverElement.style.top = this.getVerticalTop(popoverElementPosition);
    }
    getHorizontalLeft(popoverElementPosition) {
        const popoverElement = this.getPopoverElement;
        const popoverWidth = popoverElement.getBoundingClientRect().width;
        let _horizontalLeft = popoverElementPosition.left;
        if (this.popoverArrowPosition === 'end') {
            _horizontalLeft = popoverElementPosition.right - popoverWidth;
        }
        else if (this.popoverArrowPosition === 'middle') {
            _horizontalLeft = (popoverElementPosition.left + popoverElementPosition.elementWidth / 2) - (popoverWidth / 2);
        }
        return _horizontalLeft;
    }
    getVerticalTop(popoverElementPosition) {
        const arrowElement = this.popoverComponentInstance.arrowElement?.nativeElement;
        const arrowElementPosition = getElementPositionInfo(arrowElement);
        const popoverContentPosition = getElementPositionInfo(this.getPopoverElement);
        const popoverElement = this.getPopoverElement;
        const popoverHeight = popoverElement.getBoundingClientRect().height;
        let top = `calc(${popoverElementPosition.top}px - ${popoverHeight / 2}px + ${popoverElementPosition.elementHeight / 2}px)`;
        const arrowMiddle = arrowElementPosition.elementHeight / 2;
        if (this.popoverArrowPosition === 'beginning') {
            const distanceArrowFromStart = arrowElementPosition.top - popoverContentPosition.top;
            top = `calc(${popoverElementPosition.top}px + ${popoverElementPosition.elementHeight / 2}px - ${distanceArrowFromStart + arrowMiddle}px)`;
        }
        else if (this.popoverArrowPosition === 'end') {
            const distanceArrowFromEnd = (popoverContentPosition.top + popoverContentPosition.elementHeight) - (arrowElementPosition.top + arrowElementPosition.elementHeight);
            top = `calc(${popoverElementPosition.top}px - ${popoverContentPosition.elementHeight}px + ${popoverElementPosition.elementHeight / 2}px + ${distanceArrowFromEnd + arrowMiddle}px)`;
        }
        return top;
    }
    getLeftoverContentAvailableForPopover() {
        return getElementLeftoverContentAvailable(this.element.nativeElement);
    }
    get getPopoverElement() {
        return this.componentRef?.location.nativeElement;
    }
    get popoverComponentInstance() {
        return this.componentRef?.instance;
    }
    /**
   * Given the current position of the popover and the available space around
   * the trigger element, this function will return the position that the popover
   * will be set at.
   *
   * If the popover will fit at the given position, it will return the same
   * position.
   *
   * If the popover will not fit at the given position, it will return the position
   * that has the most available space (top or bottom).
   *
   * If there is no position with available space, it will return the given
   * position.
   *
   * @returns The position that the popover will be set at.
   */
    get validPosition() {
        const { freeDistanceToBottom, freeDistanceToTop, freeDistanceToLeft, freeDistanceToRight } = this.getLeftoverContentAvailableForPopover();
        const popoverElementPosition = getElementPositionInfo(this.getPopoverElement);
        const popoverElementWidth = popoverElementPosition.elementWidth;
        const popoverElementHeight = popoverElementPosition.elementHeight;
        const remainingSpaceBottom = freeDistanceToBottom - popoverElementHeight;
        const remainingSpaceTop = freeDistanceToTop - popoverElementHeight;
        const remainingSpaceLeft = freeDistanceToLeft - popoverElementWidth;
        const remainingSpaceRight = freeDistanceToRight - popoverElementWidth;
        const canSetAtBottom = remainingSpaceBottom > 0;
        const canSetAtTop = remainingSpaceTop > 0;
        const canSetAtLeft = remainingSpaceLeft > 0;
        const canSetAtRight = remainingSpaceRight > 0;
        let validPosition = undefined;
        if (canSetAtBottom && this.popoverPosition === 'bottom') {
            validPosition = 'bottom';
        }
        else if (canSetAtTop && this.popoverPosition === 'top') {
            validPosition = 'top';
        }
        else if (canSetAtLeft && this.popoverPosition === 'left') {
            validPosition = 'left';
        }
        else if (canSetAtRight && this.popoverPosition === 'right') {
            validPosition = 'right';
        }
        const needUseOtherPosition = !validPosition;
        if (needUseOtherPosition) {
            const freePositions = [
                {
                    position: 'bottom',
                    freeDistance: remainingSpaceBottom,
                },
                {
                    position: 'top',
                    freeDistance: remainingSpaceTop,
                }
            ].filter((x) => x.freeDistance > 0);
            if (freePositions.length === 0) {
                return this.popoverPosition;
            }
            const itemWithMaxFreeDistance = freePositions.sort((a, b) => b.freeDistance - a.freeDistance)[0];
            return itemWithMaxFreeDistance.position;
        }
        else {
            return this.popoverPosition;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: HelpPopoverDirective, selector: "[sHelpPopover]", inputs: { sHelpPopover: "sHelpPopover", closeButton: "closeButton", popoverIcon: "popoverIcon", popoverHeader: "popoverHeader", popoverFooter: "popoverFooter", popoverButtonText: "popoverButtonText", popoverArrowPosition: "popoverArrowPosition", popoverPosition: "popoverPosition" }, outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "click": "doClick()" } }, exportAs: ["sHelpPopover"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sHelpPopover]',
                    exportAs: 'sHelpPopover'
                }]
        }], propDecorators: { sHelpPopover: [{
                type: Input
            }], closeButton: [{
                type: Input
            }], popoverIcon: [{
                type: Input
            }], popoverHeader: [{
                type: Input
            }], popoverFooter: [{
                type: Input
            }], popoverButtonText: [{
                type: Input
            }], popoverArrowPosition: [{
                type: Input
            }], popoverPosition: [{
                type: Input
            }], buttonClicked: [{
                type: Output
            }], doClick: [{
                type: HostListener,
                args: ['click']
            }] } });

class HelpPopoverModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverModule, declarations: [HelpPopoverComponent, HelpPopoverDirective], imports: [CommonModule,
            ButtonModule], exports: [HelpPopoverDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverModule, imports: [CommonModule,
            ButtonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpPopoverModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [HelpPopoverComponent, HelpPopoverDirective],
                    imports: [
                        CommonModule,
                        ButtonModule,
                    ],
                    exports: [HelpPopoverDirective]
                }]
        }] });

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

export { HelpPopoverComponent, HelpPopoverDirective, HelpPopoverModule };
//# sourceMappingURL=seniorsistemas-angular-components-help-popover.mjs.map
