import { r as registerInstance, d as createEvent, h } from './core-34fac203.js';

const ColumnMenu = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Defined columns not displayed in the table
         */
        this.hiddenColumns = [];
        /**
         * Defined columns displayed in the table
         */
        this.visibleColumns = [];
        this.anjColumnToggle = createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = createEvent(this, "anjReorder", 7);
    }
    onChange({ detail }) {
        this.anjColumnToggle.emit(detail.value);
    }
    onDrop({ detail, target }) {
        detail['targetIndex'] = (Number.isInteger(detail.targetIndex)) ? detail.targetIndex : target.index;
        this.anjReorder.emit(detail);
    }
    render() {
        const disabled = this.visibleColumns.length === 1;
        return [
            h("anj-headline", null, h("h5", null, "Customize Columns")),
            h("div", { class: "anj-column-menu-item-container" }, this.visibleColumns.map((c, i) => h("anj-column-menu-item", { key: `${c.name}-${c.visible}-${i}`, disabled: disabled, index: i, name: c.name, visible: c.visible }, c.headerRenderer(c.field, c.caption))), this.hiddenColumns.length > 0 ? h("anj-divider", null) : undefined, this.hiddenColumns.sort(sortByName).map((c, i) => h("anj-column-menu-item", { key: `${c.name}-${c.visible}-${i}`, name: c.name, visible: c.visible }, c.headerRenderer(c.field, c.caption))))
        ];
    }
    static get style() { return ".sc-anj-column-menu-h {\n  display: block;\n  white-space: nowrap;\n}\n.sc-anj-column-menu-h anj-headline.sc-anj-column-menu {\n  padding: 0.75rem 0.75rem 0;\n}\n.sc-anj-column-menu-h anj-headline.sc-anj-column-menu h5.sc-anj-column-menu {\n  color: var(--anj-neutral);\n}\n.sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu {\n  max-height: 300px;\n  padding: 0.25rem 0;\n  overflow-y: auto;\n}\n\@media (min-width: 768px) {\n  .sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu {\n    max-height: 600px;\n  }\n}\n\@media (min-width: 992px) {\n  .sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu {\n    max-height: 800px;\n  }\n}"; }
};
const sortByName = (colA, colB) => {
    return colA.headerRenderer(colA.field, colA.caption).localeCompare(colB.headerRenderer(colB.field, colB.caption));
};

export { ColumnMenu as anj_column_menu };
