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 {
        "el": {
            "elementRef": true
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "tableId": {
            "type": String,
            "attr": "table-id"
        }
    }; }
}
