import { Component, ElementRef, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@seniorsistemas/angular-components/button";
export 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", "menuAriaLabel"], 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 }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 