import { r as registerInstance, c as createEvent, h, g as getElement } from './core-58de451e.js';
import './utils-3aef1637.js';
import { T as TableClasses } from './table.utils-259f424b.js';
import './column.renderer-35d5d102.js';
import { T as Tr, R as Row } from './row-7b24ee6a.js';
import { T as Tunnel } from './i18n.provider-f50e5e6a.js';
var Translations;
(function (Translations) {
    Translations["EXPAND_GROUP"] = "Expand Group";
    Translations["COLLAPSE_GROUP"] = "Collapse Group";
})(Translations || (Translations = {}));
var RowGrouping = /** @class */ (function () {
    function RowGrouping(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.columnsUpdatedListener = function (_a) {
            var detail = _a.detail;
            return _this.onColumnsChanged(detail);
        };
        /**
         * If true, expanded will be the default state.
         * Defaults to false.
         */
        this.autoExpand = false;
        /**
         * Renderer to use for row content when the selected conditions are met
         */
        this.row = this.renderGroup.bind(this);
        /**
         * Rules to use for using this as a renderer
         */
        this.when = this.useAsRenderer.bind(this);
        this.anjColumnGroupChange = createEvent(this, "anjColumnGroupChange", 7);
        this.anjRowControlDidLoad = createEvent(this, "anjRowControlDidLoad", 7);
    }
    RowGrouping.prototype.componentWillLoad = function () {
        this.table = this.element.closest('anj-table');
    };
    RowGrouping.prototype.componentDidLoad = function () {
        this.anjRowControlDidLoad.emit();
        this.table.addEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.addEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
    };
    RowGrouping.prototype.componentDidUnload = function () {
        this.table.removeEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.removeEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
    };
    RowGrouping.prototype.onColumnsChanged = function (columns) {
        this.columns = columns.filter(function (c) { return c.groupIndex > -1; }).sort(function (a, b) { return a.groupIndex - b.groupIndex; });
    };
    RowGrouping.prototype.renderGroup = function (props) {
        var attrs = { colspan: props.columns.length - 1 };
        var group = this.findGroup(props.row);
        return [
            h(Tr, { classList: TableClasses.rowGroupHeader }, h("td", Object.assign({}, attrs, { class: TableClasses.rowGroupHeader }), h("anj-headline", null, h("h4", null, group.headerRenderer(group.field, group.caption) + ": " + props.row[group.field]))), h("td", null, this.groupControl(group, props.row))),
            this.isExpanded(group.groupKeys, props.row[group.groupKey]) && this.hasNestedGroup(props.row[group.groupKey])
                ? props.row[group.groupKey].map(function (row, i) {
                    return h(Row, Object.assign({}, Object.assign(props, { rowIndex: props.rowIndex + i, row: row })));
                }) : undefined
        ];
    };
    RowGrouping.prototype.groupClick = function (column, key) {
        column.groupKeys = column.groupKeys ? column.groupKeys.includes(key)
            ? column.groupKeys.filter(function (k) { return k !== key; }) : column.groupKeys.concat([key])
            : [key];
        this.anjColumnGroupChange.emit(column);
    };
    RowGrouping.prototype.useAsRenderer = function (data) {
        return !!this.findGroup(data);
    };
    RowGrouping.prototype.findGroup = function (data) {
        return this.columns.find(function (c) { return data[c.groupKey]; });
    };
    RowGrouping.prototype.hasNestedGroup = function (maybeGroup) {
        return maybeGroup && Array.isArray(maybeGroup) && maybeGroup.length > 0 && typeof maybeGroup[0] === 'object';
    };
    RowGrouping.prototype.groupControl = function (column, row) {
        var _this = this;
        var key = row[column.field];
        var expanded = this.isExpanded(column.groupKeys, key);
        var label = expanded
            ? this.translator(Translations.EXPAND_GROUP) + ": " + key
            : this.translator(Translations.COLLAPSE_GROUP) + ": " + key;
        var path = expanded ? 'M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z'
            : 'M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z';
        return (h("anj-button", { ariaLabel: label, context: "free", onClick: function () { return _this.groupClick(column, key); } }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: path }))));
    };
    RowGrouping.prototype.isExpanded = function (keys, key) {
        if (!keys)
            return this.autoExpand;
        return this.autoExpand ? !keys.includes(key) : keys.includes(key);
    };
    RowGrouping.prototype.render = function () {
        return h("anj-column", { internal: true, pinned: "right", editable: false, filterable: false, sizable: false, pinnable: false, orderable: false, selectable: false, sortable: false, name: "row-group-controls", width: "56px", cellRenderer: function () { return ''; }, headerRenderer: function () { return ''; } });
    };
    Object.defineProperty(RowGrouping.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(RowGrouping, "style", {
        get: function () { return ".anj-table .anj-col-row-group-controls.anj-header-cell .anj-column-caption{overflow:visible;padding-right:0}.anj-table .anj-col-row-group-controls anj-button{margin:-.75rem}.anj-table .anj-row-group-header anj-headline h4{color:var(--anj-neutral-dark)}"; },
        enumerable: true,
        configurable: true
    });
    return RowGrouping;
}());
Tunnel.injectProps(RowGrouping, ['translator']);
export { RowGrouping as anj_row_grouping };
