import Popper from 'popper.js';
export class EdelDropdownComponent {
    constructor() {
        this.fixed = false;
        this.flying = false;
        this.inline = false;
        this.connected = false;
        this.options = {
            placement: 'bottom-start',
            modifiers: {
                hide: {
                    enabled: true
                }
            }
        };
    }
    render() {
        return h("slot", null);
    }
    hostData() {
        return {
            class: 'dropdown'
        };
    }
    componentDidLoad() {
        this.updateStatusClassFor(this.fixed, 'fixed');
        this.updateStatusClassFor(this.flying, 'flying');
        this.updateStatusClassFor(this.connected, 'connected');
        this.applyReferenceElement(this.reference, undefined);
    }
    applyReferenceElement(reference, previousReference) {
        if (reference === previousReference) {
            return;
        }
        if (this.popperObject) {
            this.popperObject.destroy();
            this.popperObject = undefined;
        }
        if (reference && !this.inline) {
            this.popperObject = new Popper(reference, this.hostElement, this.options);
        }
    }
    didSelectBackground(event) {
        if (event.target == null) {
            return;
        }
        if (!this.hostElement.contains(event.target) &&
            !(this.reference != null && this.reference.contains(event.target))) {
            this.backgroundClick.emit('dismiss');
        }
    }
    updateStatusClassFor(status, statusName) {
        if (status) {
            this.hostElement.classList.add(`dropdown--${statusName}`);
        }
        else {
            this.hostElement.classList.remove(`dropdown--${statusName}`);
        }
    }
    static get is() { return "edel-dropdown"; }
    static get properties() { return {
        "connected": {
            "type": Boolean,
            "attr": "connected",
            "watchCallbacks": ["componentDidLoad"]
        },
        "fixed": {
            "type": Boolean,
            "attr": "fixed",
            "watchCallbacks": ["componentDidLoad"]
        },
        "flying": {
            "type": Boolean,
            "attr": "flying",
            "watchCallbacks": ["componentDidLoad"]
        },
        "hostElement": {
            "elementRef": true
        },
        "inline": {
            "type": Boolean,
            "attr": "inline"
        },
        "options": {
            "type": "Any",
            "attr": "options"
        },
        "popperObject": {
            "state": true
        },
        "reference": {
            "type": "Any",
            "attr": "reference",
            "watchCallbacks": ["applyReferenceElement"]
        }
    }; }
    static get events() { return [{
            "name": "backgroundClick",
            "method": "backgroundClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "document:click",
            "method": "didSelectBackground"
        }]; }
}
