export class EdelLayoutComponent {
    constructor() {
        this.base = false;
        this.default = false;
        this.sidebar = '';
        this.toolbar = false;
        this.toolbarReversed = false;
        this.toolbarFixed = false;
        this.layoutSettingsPage = false;
        this.assistant = false;
        this.split = false;
        this.inner = false;
        this.landscape = false;
        this.center = false;
        this.allowScroll = false;
    }
    render() {
        return h("slot", null);
    }
    hostData() {
        return {
            class: 'layout'
        };
    }
    componentDidLoad() {
        this.updateBase();
        this.updateSidebar();
        this.updateToolbar();
        this.updateToolbarReversed();
        this.updateAssistant();
        this.updateSplit();
        this.updateInner();
        this.updateCenter();
        this.updateLandscape();
        this.updateScroll();
    }
    updateBase() {
        const name = 'layout--base';
        if (this.base)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateSidebar() {
        const left = 'layout--columns-sidebar';
        const right = 'layout--columns-sidebar-right';
        if (!this.sidebar) {
            this.hostElement.classList.remove(left);
            this.hostElement.classList.remove(right);
            return;
        }
        if (this.sidebar === 'left') {
            this.hostElement.classList.remove(right);
            this.hostElement.classList.add(left);
        }
        if (this.sidebar === 'right') {
            this.hostElement.classList.remove(left);
            this.hostElement.classList.add(right);
        }
    }
    updateToolbar() {
        const name = 'layout--toolbar';
        if (this.toolbar)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateToolbarReversed() {
        const name = 'layout--toolbar-reversed';
        if (this.toolbarReversed)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateToolbarFixed() {
        const name = 'layout--toolbar-fixed';
        if (this.toolbarFixed)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateToolbarSettingsPage() {
        if (this.layoutSettingsPage)
            this.hostElement.classList.add('main', 'layout-inner', 'layout--toolbar-fixed', 'layout-scroll');
        else
            this.hostElement.classList.remove('main', 'layout-inner', 'layout--toolbar-fixed', 'layout-scroll');
    }
    updateAssistant() {
        const name = 'layout--assistant';
        if (this.assistant)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateSplit() {
        const name = 'layout--split';
        if (this.split)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateInner() {
        const name = 'layout-inner';
        if (this.inner)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateCenter() {
        const name = 'layout--center';
        if (this.center)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateLandscape() {
        const name = 'layout--landscape';
        if (this.landscape)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateScroll() {
        const name = 'layout-scroll';
        if (this.allowScroll)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    updateDefault() {
        const name = 'layout--default';
        if (this.default)
            this.hostElement.classList.add(name);
        else
            this.hostElement.classList.remove(name);
    }
    static get is() { return "edel-layout"; }
    static get properties() { return {
        "allowScroll": {
            "type": Boolean,
            "attr": "allow-scroll",
            "watchCallbacks": ["updateScroll"]
        },
        "assistant": {
            "type": Boolean,
            "attr": "assistant",
            "watchCallbacks": ["updateAssistant"]
        },
        "base": {
            "type": Boolean,
            "attr": "base",
            "watchCallbacks": ["updateBase"]
        },
        "center": {
            "type": Boolean,
            "attr": "center",
            "watchCallbacks": ["updateCenter"]
        },
        "default": {
            "type": Boolean,
            "attr": "default",
            "watchCallbacks": ["updateDefault"]
        },
        "hostElement": {
            "elementRef": true
        },
        "inner": {
            "type": Boolean,
            "attr": "inner",
            "watchCallbacks": ["updateInner"]
        },
        "landscape": {
            "type": Boolean,
            "attr": "landscape",
            "watchCallbacks": ["updateLandscape"]
        },
        "layoutSettingsPage": {
            "type": Boolean,
            "attr": "layout-settings-page",
            "watchCallbacks": ["updateToolbarSettingsPage"]
        },
        "sidebar": {
            "type": String,
            "attr": "sidebar",
            "watchCallbacks": ["updateSidebar"]
        },
        "split": {
            "type": Boolean,
            "attr": "split",
            "watchCallbacks": ["updateSplit"]
        },
        "toolbar": {
            "type": Boolean,
            "attr": "toolbar",
            "watchCallbacks": ["updateToolbar"]
        },
        "toolbarFixed": {
            "type": Boolean,
            "attr": "toolbar-fixed",
            "watchCallbacks": ["updateToolbarFixed"]
        },
        "toolbarReversed": {
            "type": Boolean,
            "attr": "toolbar-reversed",
            "watchCallbacks": ["updateToolbarReversed"]
        }
    }; }
}
