'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-859ae5a6.js');

const ColumnSelector = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.columnsUpdatedListener = ({ detail }) => this.onColumnsChanged(detail);
        this.columnToggleListener = ({ detail }) => this.onColumnToggle(detail);
        this.columnReorderListener = ({ detail }) => this.onColumnReorder(detail);
        this.columns = [];
        this.anjColumnToggle = core.createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = core.createEvent(this, "anjReorder", 7);
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        this.menu = this.element.querySelector('anj-column-menu ');
        this.table.addEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.addEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        this.menu.addEventListener('anjColumnToggle', this.columnToggleListener);
        this.menu.addEventListener('anjReorder', this.columnReorderListener);
    }
    componentDidUnload() {
        this.table.removeEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.removeEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        if (this.menu) {
            this.menu.removeEventListener('anjColumnToggle', this.columnToggleListener);
            this.menu.removeEventListener('anjReorder', this.columnReorderListener);
            this.menu = undefined;
        }
    }
    onColumnsChanged(columns) {
        this.columns = columns.filter(c => !c.internal && c.orderable && isNaN(c.groupIndex));
    }
    onColumnToggle(detail) {
        this.anjColumnToggle.emit(detail);
    }
    onColumnReorder(detail) {
        this.anjReorder.emit(detail);
    }
    render() {
        const [visible, hidden] = groupByVisible(this.columns);
        return (core.h("anj-dropdown", { placement: "bottom-end" }, core.h("anj-button", { context: "icon", slot: "dropdown-toggle" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { "fill-rule": "evenodd", d: "M16,7 L16,11 L20,11 L20,7 L16,7 Z M14,7 L10,7 L10,11 L14,11 L14,7 Z M8,7 L4,7 L4,11 L8,11 L8,7 Z M4,13 L4,17 L8,17 L8,13 L4,13 Z M10,17 L14,17 L14,13 L10,13 L10,17 Z M16,17 L20,17 L20,13 L16,13 L16,17 Z M22,7 L22,17 L22,19 L2,19 L2,17 L2,7 L2,5 L22,5 L22,7 Z" }))), core.h("anj-column-menu", { visibleColumns: visible, hiddenColumns: hidden })));
    }
    get element() { return core.getElement(this); }
};
const groupByVisible = (columns) => {
    const firstHiddenIndex = columns.findIndex(c => !c.visible);
    return firstHiddenIndex > 0 ? [columns.slice(0, firstHiddenIndex), columns.slice(firstHiddenIndex)] : [columns, []];
};

exports.anj_column_selector = ColumnSelector;
