import { h } from '@stencil/core';
import { _t } from '../i18n/i18n';
export class TableColumnVisibility {
    constructor() {
        this.label = _t('webmapgl.table-column-visibility.label');
    }
    closePopover() {
        this.el.closest('ion-modal').dismiss();
    }
    createToggles() {
        let id = (this.tableId) ? `#${this.tableId}` : '';
        let selector = `gl-table${id} gl-table-column`;
        return Array.from(document.querySelectorAll(selector))
            .map((column) => h("gl-table-column-visibility-toggle", { column: column, enabled: column.visible }));
    }
    render() {
        return ([
            h("ion-header", null,
                h("ion-toolbar", null,
                    h("ion-title", null, this.label),
                    h("ion-buttons", { slot: "end" },
                        h("ion-button", { title: _t('webmapgl.table-column-visibility.close'), onClick: () => this.closePopover() },
                            h("ion-icon", { slot: "icon-only", name: "close" }))))),
            h("ion-content", null,
                h("ion-list", null, this.createToggles()))
        ]);
    }
    static get is() { return "gl-table-column-visibility"; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false,
            "defaultValue": "_t('webmapgl.table-column-visibility.label')"
        },
        "tableId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "table-id",
            "reflect": false
        }
    }; }
    static get elementRef() { return "el"; }
}
