'use strict';

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

const core = require('./core-859ae5a6.js');
const utils = require('./utils-2a7c8f6e.js');
const i18n_provider = require('./i18n.provider-ca81b0a0.js');
const table_utils = require('./table.utils-12a2d306.js');

var Translations;
(function (Translations) {
    Translations["DESELECT_COLUMN"] = "Deselect column";
    Translations["SELECT_COLUMN"] = "Select Column";
})(Translations || (Translations = {}));
const CELL_SELECTOR = 'td.anj-selectable';
const ColumnSelection = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.cellClickListener = (e) => this.onCellClick(e);
        this.cellKeyListener = utils.enterAsClick(this.onCellClick.bind(this));
        this.tableWillUpdateListener = () => this.onTableWillChange();
        this.tableDidUpdateListener = () => this.onTableDidChange();
        this.anjColumnSelect = core.createEvent(this, "anjColumnSelect", 7);
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        this.table.addEventListener('anjTableWillUpdate', this.tableWillUpdateListener);
        this.table.addEventListener('anjTableDidUpdate', this.tableDidUpdateListener);
    }
    componentDidUnload() {
        this.onTableWillChange();
        this.table.removeEventListener('anjTableWillUpdate', this.tableWillUpdateListener);
        this.table.removeEventListener('anjTableDidUpdate', this.tableDidUpdateListener);
    }
    onTableWillChange() {
        Array.from(this.table.querySelectorAll(CELL_SELECTOR)).forEach((el) => {
            el.removeEventListener('click', this.cellClickListener);
            el.removeEventListener('keyup', this.cellKeyListener);
        });
    }
    async onTableDidChange() {
        const columns = await this.table.getColumns();
        Array.from(this.table.querySelectorAll(CELL_SELECTOR)).forEach((el) => {
            const column = table_utils.columnFromCell(columns, el);
            const selected = this.table.selectedColumnFields.includes(column.field);
            el.tabIndex = 0;
            el.setAttribute('aria-label', selected
                ? `${this.translator(Translations.DESELECT_COLUMN)}: ${column.name}`
                : `${this.translator(Translations.SELECT_COLUMN)}: ${column.name}`);
            el.addEventListener('click', this.cellClickListener);
            el.addEventListener('keyup', this.cellKeyListener);
        });
    }
    onCellClick(event) {
        const target = event.target;
        const cell = target.tagName === 'TD' ? target : target.closest('td');
        const field = cell.dataset.columnField;
        this.table.selectedColumnFields = this.table.selectedColumnFields.includes(field) ? [] : [field];
        this.anjColumnSelect.emit({ field, selectedColumnFields: this.table.selectedColumnFields });
    }
    get element() { return core.getElement(this); }
    static get style() { return ".anj-table .anj-header-cell.anj-selected-col {\n  background-color: var(--anj-background) !important;\n}\n.anj-table .anj-cell.anj-selected-col {\n  background-color: var(--anj-background) !important;\n}"; }
};
i18n_provider.Tunnel.injectProps(ColumnSelection, ['translator']);

exports.anj_column_selection = ColumnSelection;
