import { r as registerInstance, d as createEvent, h, c as getElement } from './core-3f33e631.js';
import './utils-3aef1637.js';
import { T as TableClasses, A as ALL_ROWS_KEY } from './table.utils-110cc530.js';
import './column.renderer-b9656ad4.js';
import { R as Row } from './row-3561c863.js';

const RowSelection = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.rowsDidChangeListener = () => this.onRowsDidChange();
        /**
         * The mode of selection
         * Possible values are: `"batch"`, and `"single`. Defaults to "single"
         */
        this.mode = 'single';
        /**
         * Renderer to use for cell content when the selected cell conditions are met
         */
        this.row = this.renderRow.bind(this);
        /**
         * For batch selection only, will renderer a "select all" checkbox
         */
        this.showCheckAll = false;
        /**
         * If true, will render checkboxes for batch selection and radio buttons for single
         */
        this.showChecks = false;
        /**
         * Rules to use for using this as a renderer
         */
        this.when = this.useAsRenderer.bind(this);
        this.anjRowControlDidLoad = createEvent(this, "anjRowControlDidLoad", 7);
        this.anjRowSelect = createEvent(this, "anjRowSelect", 7);
    }
    connectedCallback() {
        this.table = this.element.closest('anj-table');
        this.table.addEventListener('anjRowsDidLoad', this.rowsDidChangeListener);
    }
    componentDidLoad() {
        this.anjRowControlDidLoad.emit();
    }
    disconnectedCallback() {
        this.table.removeEventListener('anjRowsDidLoad', this.rowsDidChangeListener);
    }
    static clearStyles(el) {
        if (el) {
            el.removeAttribute('style');
        }
    }
    onRowsDidChange() {
        if (this.headerControl) {
            return this.checkSelectAll();
        }
    }
    async onSelection(event) {
        event.stopPropagation();
        const detail = event.detail;
        this.table.selectedRowKeys = this.table.selectedRowKeys.includes(detail.key) ? this.table.selectedRowKeys.filter(k => k !== detail.key)
            : (this.mode === 'batch') ? this.table.selectedRowKeys.concat([detail.key]) : [detail.key];
        if (this.mode === 'batch' && this.showCheckAll) {
            await this.checkSelectAll();
        }
        this.anjRowSelect.emit({ key: detail.key, selectedRowKeys: this.table.selectedRowKeys });
    }
    async onSelectAll(event) {
        event.stopPropagation();
        const checkbox = this.headerControl.querySelector('anj-checkbox');
        const rows = await this.table.getRows();
        const rowKeys = rows.map(r => r[this.table.rowKey]);
        const selectAll = (checkbox.checked || checkbox.indeterminate);
        this.table.selectedRowKeys = selectAll
            ? this.table.selectedRowKeys.concat(rowKeys.filter(k => !this.table.selectedRowKeys.includes(k)))
            : this.table.selectedRowKeys.filter(k => !rowKeys.includes(k));
        this.anjRowSelect.emit({ key: undefined, selectedRowKeys: this.table.selectedRowKeys });
        return this.checkSelectAll(rows, rowKeys, checkbox);
    }
    /**
     * This is a little wonky but the main thrust is that we get all the args in onSelectAll, so if we're calling this from there, it doesn't make sense to
     * get it all again.
     */
    async checkSelectAll(rs, keys, check) {
        const rows = rs || await this.table.getRows();
        const checkbox = check || this.headerControl.querySelector('anj-checkbox');
        const rowKeys = keys || rows.map(r => r[this.table.rowKey]);
        const selectedKeys = rowKeys.filter(k => this.table.selectedRowKeys.includes(k));
        checkbox.indeterminate = selectedKeys.length < rows.length && selectedKeys.length > 0;
        this.headerControl.selected = selectedKeys.length > 0;
        checkbox.checked = selectedKeys.length > 0;
    }
    renderRow(props) {
        const attrs = { colspan: props.columns.length - 1 };
        // The first cell is a dummy cell to keep things kosher
        return (h(Row, Object.assign({}, props), h("tr", { class: TableClasses.detailRow }, h("td", { style: { border: '0', 'border-color': 'transparent', width: '0', padding: '0' } }), h("td", Object.assign({}, attrs, { class: TableClasses.detailCell, ref: (r) => { RowSelection.clearStyles(r); } }), h("div", { class: TableClasses.detailWrapper }, this.template
            ? h("div", { class: TableClasses.detail, ref: r => this.table.renderer.fromTemplate(this.template, r, props.row, props.rowIndex) })
            : this.formatter ? h("div", { class: TableClasses.detail, innerHTML: this.formatter(props.row, props.rowIndex) })
                : h("div", { class: TableClasses.detail }, this.renderer(props.row, props.rowIndex)))))));
    }
    cell(data) {
        return h("anj-row-select-control", { showCheck: this.showChecks, rowKey: data[this.table.rowKey], selected: this.selected(data), mode: this.mode, labelFormatter: this.labelFormatter, onAnjRowSelectClick: e => this.onSelection(e) });
    }
    header() {
        return this.mode === 'batch' && this.showCheckAll ?
            h("anj-row-select-control", { showCheck: true, rowKey: ALL_ROWS_KEY, mode: this.mode, labelFormatter: this.labelFormatter, ref: e => this.headerControl = e, onAnjRowSelectClick: e => this.onSelectAll(e) }) : undefined;
    }
    selected(data) {
        return this.table.selectedRowKeys.includes(data[this.table.rowKey]);
    }
    hasDetail() {
        return !!(this.template || this.renderer || this.formatter);
    }
    useAsRenderer(data) {
        return (this.hasDetail() && this.selected(data));
    }
    render() {
        return h("anj-column", { filterable: false, internal: true, pinned: "left", editable: false, sizable: false, pinnable: false, orderable: false, selectable: false, sortable: false, name: `row-selection${this.showChecks ? '-checks' : ''}`, width: this.showChecks ? '42px' : '0', cellRenderer: (data) => this.cell(data), headerRenderer: () => this.header() });
    }
    get element() { return getElement(this); }
    static get style() { return ".anj-table .anj-table-body .anj-row {\n  cursor: default;\n}\n.anj-table .anj-table-body .anj-row.anj-selectable.anj-selected, .anj-table .anj-table-body .anj-row.anj-selectable.anj-selected:hover {\n  background-color: var(--anj-background);\n}\n.anj-table .anj-header-cell.anj-col-row-selection,\n.anj-table .anj-cell.anj-col-row-selection {\n  border-right: 0 !important;\n  padding-left: 0;\n  padding-right: 0;\n  white-space: nowrap;\n  width: 0 !important;\n}\n.anj-table .anj-header-cell.anj-col-row-selection .anj-column-caption,\n.anj-table .anj-cell.anj-col-row-selection .anj-column-caption {\n  display: none;\n}\n.anj-table .anj-header-cell.anj-col-row-selection-checks,\n.anj-table .anj-cell.anj-col-row-selection-checks {\n  width: 42px;\n}\n.anj-table .anj-col-row-selection-checks.anj-header-cell .anj-column-caption {\n  overflow: visible;\n  padding-right: 0;\n}\n.anj-table .anj-col-row-selection-checks.anj-header-cell anj-row-select-control[show-check] {\n  margin: -1px 0;\n}\n.anj-table .anj-col-row-selection-checks.anj-header-cell anj-checkbox {\n  margin: -1px 0;\n  top: 1px;\n}\n.anj-table .anj-col-row-selection-checks.anj-cell anj-checkbox {\n  margin: -1px 0;\n  top: 2px;\n}\n.anj-table .anj-col-row-selection-checks.anj-cell anj-radio {\n  top: -3px;\n}\n.anj-table .anj-col-row-selection-checks anj-checkbox {\n  font-size: 0.875rem;\n  position: relative;\n}\n.anj-table .anj-row-detail-cell {\n  border-color: transparent !important;\n}\n.anj-table anj-table .anj-row:last-child .anj-cell {\n  border-bottom: 0;\n  border-color: transparent !important;\n}\n.anj-table .anj-detail-row:hover {\n  background-color: inherit;\n}"; }
};

export { RowSelection as anj_row_selection };
