'use strict';

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

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

const CONTROL_ICONS = {
    update: 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',
    save: 'M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z',
    cancel: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
};
const RowEditControl = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.controlListener = () => this.onControl(table_utils.EditControl.save);
        /**
         * Can the user delete a row? Defaults to false.
         */
        this.delete = false;
        /**
         * If true, the user cannot delete records
         */
        this.deleteDisabled = false;
        /**
         * The mode of editing
         * Possible values are: `"batch"` and `"row`. Defaults to "row"
         */
        this.mode = 'row';
        /**
         * Can the user edit?
         */
        this.update = false;
        this.anjUpdateCancel = core.createEvent(this, "anjUpdateCancel", 7);
        this.anjCreateEnd = core.createEvent(this, "anjCreateEnd", 7);
        this.anjDelete = core.createEvent(this, "anjDelete", 7);
        this.anjUpdateEnd = core.createEvent(this, "anjUpdateEnd", 7);
        this.anjUpdateStart = core.createEvent(this, "anjUpdateStart", 7);
    }
    componentDidLoad() {
        if (this.mode === 'batch') {
            this.element.closest('tr').addEventListener('anjBlur', this.controlListener);
        }
    }
    componentDidUnload() {
        if (this.mode === 'batch') {
            const row = this.element.closest('tr');
            if (row) {
                this.element.closest('tr').removeEventListener('anjBlur', this.controlListener);
            }
        }
    }
    onControl(action) {
        const key = table_utils.keyFromData(this.rowKey);
        const payload = { key };
        switch (action) {
            case table_utils.EditControl.cancel:
                this.anjUpdateCancel.emit(payload);
                break;
            case table_utils.EditControl.save:
                this.editing === 'create' ? this.anjCreateEnd.emit(payload) : this.anjUpdateEnd.emit(payload);
                break;
            case table_utils.RowControl.delete:
                this.anjDelete.emit(payload);
                break;
            case table_utils.RowControl.update:
                this.anjUpdateStart.emit(payload);
                break;
            default:
                break;
        }
    }
    controlDisabled(control) {
        return this[`${control}Disabled`];
    }
    render() {
        const controls = this.editing ? table_utils.EditControls : table_utils.RowControls.filter(c => this[c]);
        return (core.h("anj-button-group", null, controls.map((c) => core.h("anj-button", { context: "icon", onClick: () => this.onControl(c), onAnjBlur: e => e.stopPropagation(), disabled: this.controlDisabled(c), ariaLabel: c }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, c === 'delete' ?
            core.h("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z" }) :
            core.h("path", { d: CONTROL_ICONS[c] }))))));
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-row-edit-control {\n  display: block;\n}\nanj-row-edit-control anj-button:not(:last-child) {\n  margin-right: 0.5rem;\n}\nanj-row-edit-control anj-button .anj-button-link {\n  border-radius: 50%;\n}"; }
};

exports.anj_row_edit_control = RowEditControl;
