import { h } from "@stencil/core";
export class ColumnMenu {
    constructor() {
        /**
         * Defined columns not displayed in the table
         */
        this.hiddenColumns = [];
        /**
         * Defined columns displayed in the table
         */
        this.visibleColumns = [];
    }
    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 is() { return "anj-column-menu"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["column-menu.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-menu.css"]
    }; }
    static get properties() { return {
        "hiddenColumns": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ColumnDefinition[]",
                "resolved": "ColumnDefinition[]",
                "references": {
                    "ColumnDefinition": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Defined columns not displayed in the table"
            },
            "defaultValue": "[]"
        },
        "visibleColumns": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ColumnDefinition[]",
                "resolved": "ColumnDefinition[]",
                "references": {
                    "ColumnDefinition": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Defined columns displayed in the table"
            },
            "defaultValue": "[]"
        }
    }; }
    static get events() { return [{
            "method": "anjColumnToggle",
            "name": "anjColumnToggle",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the column is toggled visible/hidden"
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }, {
            "method": "anjReorder",
            "name": "anjReorder",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the column has been changed"
            },
            "complexType": {
                "original": "ReorderData",
                "resolved": "ReorderData",
                "references": {
                    "ReorderData": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            }
        }]; }
    static get listeners() { return [{
            "name": "anjChange",
            "method": "onChange",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjDrop",
            "method": "onDrop",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
const sortByName = (colA, colB) => {
    return colA.headerRenderer(colA.field, colA.caption).localeCompare(colB.headerRenderer(colB.field, colB.caption));
};
