import { r as registerInstance, h, H as Host, g as getElement } from './index-b1696fed.js';

const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-white);border:1px solid var(--pine-color-gray-200);border-radius:var(--pine-border-radius-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:0;max-width:var(--sizing-max-width-default);padding:var(--pine-spacing-300);position:fixed}:host button{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-background-secondary-hover:var(--pine-color-grey-050);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-800);--color-text-secondary-disabled:var(--pine-color-grey-400);--color-outline-secondary:var(--pine-color-purple-300);--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-circle);color:var(--color-text-default);display:-ms-flexbox;display:flex;font-family:var(--pine-font-family-greet);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-body-medium);line-height:var(--pine-line-height-150);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host button:hover{background-color:var(--color-background-secondary-hover)}";
const PdsPopoverStyle0 = pdsPopoverCss;

const PdsPopover = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.active = false;
        this.popoverTargetAction = 'show';
        this.popoverType = 'auto';
        this.componentId = undefined;
        this.text = undefined;
        this.maxWidth = 352;
        this.placement = 'right';
    }
    componentWillRender() {
        this.handlePopoverPositioning();
    }
    handleClick() {
        this.active = !this.active;
    }
    handleScroll() {
        if (this.active) {
            this.handlePopoverPositioning();
        }
    }
    handlePopoverPositioning() {
        const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
        const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
        if (!triggerEl || !popoverEl)
            return;
        const triggerRect = triggerEl.getBoundingClientRect();
        const popoverRect = popoverEl.getBoundingClientRect();
        let top = 0;
        let left = 0;
        const offset = 8;
        switch (this.placement) {
            case 'top':
                top = triggerRect.top - popoverRect.height - offset;
                left = triggerRect.left;
                break;
            case 'right':
                top = triggerRect.top;
                left = triggerRect.right + offset;
                break;
            case 'bottom':
                top = triggerRect.bottom + offset;
                left = triggerRect.left;
                break;
            case 'left':
                top = triggerRect.top;
                left = triggerRect.left - popoverRect.width - offset;
                break;
        }
        popoverEl.style.top = `${top}px`;
        popoverEl.style.left = `${left}px`;
    }
    render() {
        return (h(Host, { key: '7a21719bb6f13f435cae77f6b2c7c2eefb36c977' }, h("button", { key: '707c94e2462fe230a777d61899b902c84feaa09c', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: '703d21dd5f3caadb8c0d097849f691d2d4407358', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '42ef680b5850d62f50f1e6cfb1587c3d5b6db0d4' }))));
    }
    get el() { return getElement(this); }
};
PdsPopover.style = PdsPopoverStyle0;

export { PdsPopover as pds_popover };

//# sourceMappingURL=pds-popover.entry.js.map