import { h } from '../edel-elements.core.js';

class EdelHeaderComponent {
    constructor() {
        this.light = false;
        this.dark = false;
        this.extended = false;
    }
    render() {
        return h("slot", null);
    }
    hostData() {
        return {
            class: 'header'
        };
    }
    componentDidLoad() {
        if (this.light)
            this.hostElement.classList.add('header--light');
        else
            this.hostElement.classList.remove('header--light');
        if (this.dark)
            this.hostElement.classList.add('header--dark');
        else
            this.hostElement.classList.remove('header--dark');
        if (this.extended)
            this.hostElement.classList.add('header--extended');
        else
            this.hostElement.classList.remove('header--extended');
        this.hostElement.style.backgroundColor = this.backgroundColor;
    }
    static get is() { return "edel-header"; }
    static get properties() { return {
        "backgroundColor": {
            "type": String,
            "attr": "background-color",
            "watchCallbacks": ["componentDidLoad"]
        },
        "dark": {
            "type": Boolean,
            "attr": "dark",
            "watchCallbacks": ["componentDidLoad"]
        },
        "extended": {
            "type": Boolean,
            "attr": "extended",
            "watchCallbacks": ["componentDidLoad"]
        },
        "hostElement": {
            "elementRef": true
        },
        "light": {
            "type": Boolean,
            "attr": "light",
            "watchCallbacks": ["componentDidLoad"]
        }
    }; }
}

export { EdelHeaderComponent as EdelHeader };
