import { h } from '../webmapgl.core.js';

import { a as _t } from './chunk-4fdec815.js';
import { a as getMap } from './chunk-0359b4ed.js';

class Drawer {
    constructor() {
        this.open = false;
    }
    componentDidUpdate() {
        let map = getMap(this.mapId);
        map.resizeMap();
    }
    toggle() {
        this.open = !this.open;
    }
    hostData() {
        return {
            class: {
                'gl-drawer-closed': !this.open,
                'gl-drawer-open': this.open
            }
        };
    }
    render() {
        return ([
            h("ion-header", null,
                h("ion-toolbar", null,
                    h("ion-buttons", { slot: "start" },
                        h("slot", { name: "toolbar-start-buttons" })),
                    h("ion-title", null, this.drawerTitle),
                    h("ion-buttons", { slot: "end" },
                        h("slot", { name: "toolbar-end-buttons" }),
                        h("ion-button", { title: "Close", onClick: () => { this.open = false; } },
                            h("ion-icon", { slot: "icon-only", name: "close" }))))),
            h("ion-content", null,
                h("slot", null))
        ]);
    }
    static get is() { return "gl-drawer"; }
    static get properties() { return {
        "content": {
            "state": true
        },
        "drawerTitle": {
            "type": String,
            "attr": "drawer-title",
            "mutable": true
        },
        "mapId": {
            "type": String,
            "attr": "map-id"
        },
        "open": {
            "type": Boolean,
            "attr": "open",
            "mutable": true
        },
        "toggle": {
            "method": true
        }
    }; }
    static get style() { return "gl-drawer{-ms-flex-direction:column;flex-direction:column;height:50%}gl-drawer.gl-drawer-closed{display:none}gl-drawer.gl-drawer-open{display:-ms-flexbox;display:flex}gl-drawer ion-content{height:100%}"; }
}

class DrawerToggle {
    constructor() {
        this.icon = 'settings';
        this.buttonTitle = _t('webmapgl.drawer-toggle.label');
    }
    async componentWillLoad() {
        this.drawer = await this.lazyDrawer.componentOnReady();
    }
    toggleDrawer() {
        this.drawer.open = !this.drawer.open;
    }
    render() {
        return (h("ion-button", { onClick: () => this.toggleDrawer(), title: this.buttonTitle },
            h("ion-icon", { slot: "icon-only", name: this.icon })));
    }
    static get is() { return "gl-drawer-toggle"; }
    static get properties() { return {
        "buttonTitle": {
            "type": String,
            "attr": "button-title"
        },
        "el": {
            "elementRef": true
        },
        "icon": {
            "type": String,
            "attr": "icon"
        },
        "lazyDrawer": {
            "connect": "gl-drawer"
        }
    }; }
}

export { Drawer as GlDrawer, DrawerToggle as GlDrawerToggle };
