var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-15e24a78.js';
import { D as DragController, b as DropController } from './drop.controller-1d933db3.js';
import './utils-3aef1637.js';
import { T as Tunnel } from './i18n.provider-7cafb88f.js';
import { a as COLUMN_CONTEXT_MENU } from './column.renderer-5d1eab0d.js';
var ColumnMenu = /** @class */ (function () {
    function ColumnMenu(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Defined columns not displayed in the table
         */
        this.hiddenColumns = [];
        /**
         * Defined columns displayed in the table
         */
        this.visibleColumns = [];
        this.anjColumnToggle = createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = createEvent(this, "anjReorder", 7);
    }
    ColumnMenu.prototype.onChange = function (_a) {
        var detail = _a.detail;
        this.anjColumnToggle.emit(detail.value);
    };
    ColumnMenu.prototype.onDrop = function (_a) {
        var detail = _a.detail, target = _a.target;
        detail['targetIndex'] = (Number.isInteger(detail.targetIndex)) ? detail.targetIndex : target.index;
        this.anjReorder.emit(detail);
    };
    ColumnMenu.prototype.render = function () {
        var 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(function (c, i) { return 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(function (c, i) { return h("anj-column-menu-item", { key: c.name + "-" + c.visible + "-" + i, name: c.name, visible: c.visible }, c.headerRenderer(c.field, c.caption)); }))
        ];
    };
    Object.defineProperty(ColumnMenu, "style", {
        get: function () { return ".sc-anj-column-menu-h{display:block;white-space:nowrap}.sc-anj-column-menu-h anj-headline.sc-anj-column-menu{padding:.75rem .75rem 0}.sc-anj-column-menu-h anj-headline.sc-anj-column-menu h5.sc-anj-column-menu{color:var(--anj-neutral)}.sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu{max-height:300px;padding:.25rem 0;overflow-y:auto}\@media (min-width:768px){.sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu{max-height:600px}}\@media (min-width:992px){.sc-anj-column-menu-h .anj-column-menu-item-container.sc-anj-column-menu{max-height:800px}}"; },
        enumerable: true,
        configurable: true
    });
    return ColumnMenu;
}());
var sortByName = function (colA, colB) {
    return colA.headerRenderer(colA.field, colA.caption).localeCompare(colB.headerRenderer(colB.field, colB.caption));
};
var Translations;
(function (Translations) {
    Translations["DRAG_INSTRUCTION"] = "Draggable item. Press up or down to move.";
})(Translations || (Translations = {}));
var ColumnMenuItem = /** @class */ (function () {
    function ColumnMenuItem(hostRef) {
        registerInstance(this, hostRef);
        this.handleFocused = false;
        this.anjDrop = createEvent(this, "anjDrop", 7);
    }
    ColumnMenuItem.prototype.onVisibleChange = function () {
        this.visible ? this.dropController.connect() : this.dropController.disconnect();
    };
    ColumnMenuItem.prototype.connectedCallback = function () {
        this.dragController = new DragController(this.element, this.getDropData.bind(this));
        this.dropController = new DropController(this.element);
        if (this.visible) {
            this.dropController.connect();
        }
    };
    ColumnMenuItem.prototype.disconnectedCallback = function () {
        this.dropController.disconnect();
    };
    ColumnMenuItem.prototype.onToggle = function (event) {
        if (event.detail.checked === this.visible || event.detail.value !== this.name) {
            event.stopPropagation();
        }
    };
    ColumnMenuItem.prototype.onEnter = function (ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            var detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    };
    ColumnMenuItem.prototype.onFocus = function () {
        this.handleFocused = true;
    };
    ColumnMenuItem.prototype.onBlur = function () {
        this.handleFocused = false;
    };
    ColumnMenuItem.prototype.getDropData = function () {
        return {
            currentIndex: this.index
        };
    };
    ColumnMenuItem.prototype.render = function () {
        var _this = this;
        return (h(Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: function () { return _this.onFocus(); }, onMouseLeave: function () { return _this.onBlur(); } }, this.visible && !this.disabled
            ? h("anj-button", { "aria-label": this.translator(Translations.DRAG_INSTRUCTION), context: "free", onMouseDown: function () { return _this.dragController.connect(); }, onMouseUp: function () { return _this.dragController.disconnect(); } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })))
            : undefined, h("anj-checkbox", { checked: this.visible, value: this.name }, h("slot", null))));
    };
    Object.defineProperty(ColumnMenuItem.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ColumnMenuItem, "watchers", {
        get: function () {
            return {
                "visible": ["onVisibleChange"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ColumnMenuItem, "style", {
        get: function () { return ".sc-anj-column-menu-item-h{display:block;margin-left:-.5rem;padding:.25rem 1.5rem .25rem 2.75rem;position:relative;text-transform:capitalize}.anj-handle-focused.sc-anj-column-menu-item-h anj-button.sc-anj-column-menu-item, .sc-anj-column-menu-item-h:hover anj-button.sc-anj-column-menu-item{opacity:1}.sc-anj-column-menu-item-h anj-button.sc-anj-column-menu-item{left:.75rem;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s ease;transition:opacity .2s ease}"; },
        enumerable: true,
        configurable: true
    });
    return ColumnMenuItem;
}());
Tunnel.injectProps(ColumnMenuItem, ['translator']);
var ColumnPinner = /** @class */ (function () {
    function ColumnPinner(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Is pinning enabled
         */
        this.enabled = true;
        /**
         * Type of pinning not allows
         * Possible values are: `"left"`, `"right"`,  and `null` (both left and right pinning allowed). Defaults to null.
         */
        this.disallow = null;
    }
    ColumnPinner.prototype.render = function () {
        var _this = this;
        if (!this.enabled) {
            return undefined;
        }
        return COLUMN_CONTEXT_MENU.filter(function (o) { return !_this.disallow || o.value !== _this.disallow; })
            .map(function (o) { return h("anj-context-menu-item", { action: o.value }, _this.translator(o.label)); });
    };
    Object.defineProperty(ColumnPinner.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ColumnPinner, "style", {
        get: function () { return "anj-column-pinner{display:none}"; },
        enumerable: true,
        configurable: true
    });
    return ColumnPinner;
}());
Tunnel.injectProps(ColumnPinner, ['translator']);
var ColumnSelector = /** @class */ (function () {
    function ColumnSelector(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.columnsUpdatedListener = function (_a) {
            var detail = _a.detail;
            return _this.onColumnsChanged(detail);
        };
        this.columnToggleListener = function (_a) {
            var detail = _a.detail;
            return _this.onColumnToggle(detail);
        };
        this.columnReorderListener = function (_a) {
            var detail = _a.detail;
            return _this.onColumnReorder(detail);
        };
        this.columns = [];
        this.anjColumnToggle = createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = createEvent(this, "anjReorder", 7);
    }
    ColumnSelector.prototype.componentWillLoad = function () {
        this.table = this.element.closest('anj-table');
    };
    ColumnSelector.prototype.componentDidLoad = function () {
        this.menu = this.element.querySelector('anj-column-menu ');
        this.table.addEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.addEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        this.menu.addEventListener('anjColumnToggle', this.columnToggleListener);
        this.menu.addEventListener('anjReorder', this.columnReorderListener);
    };
    ColumnSelector.prototype.componentDidUnload = function () {
        this.table.removeEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.removeEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        if (this.menu) {
            this.menu.removeEventListener('anjColumnToggle', this.columnToggleListener);
            this.menu.removeEventListener('anjReorder', this.columnReorderListener);
            this.menu = undefined;
        }
    };
    ColumnSelector.prototype.onColumnsChanged = function (columns) {
        this.columns = columns.filter(function (c) { return !c.internal && c.orderable && isNaN(c.groupIndex); });
    };
    ColumnSelector.prototype.onColumnToggle = function (detail) {
        this.anjColumnToggle.emit(detail);
    };
    ColumnSelector.prototype.onColumnReorder = function (detail) {
        this.anjReorder.emit(detail);
    };
    ColumnSelector.prototype.render = function () {
        var _a = groupByVisible(this.columns), visible = _a[0], hidden = _a[1];
        return (h("anj-dropdown", { placement: "bottom-end" }, h("anj-button", { context: "icon", slot: "dropdown-toggle" }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { "fill-rule": "evenodd", d: "M16,7 L16,11 L20,11 L20,7 L16,7 Z M14,7 L10,7 L10,11 L14,11 L14,7 Z M8,7 L4,7 L4,11 L8,11 L8,7 Z M4,13 L4,17 L8,17 L8,13 L4,13 Z M10,17 L14,17 L14,13 L10,13 L10,17 Z M16,17 L20,17 L20,13 L16,13 L16,17 Z M22,7 L22,17 L22,19 L2,19 L2,17 L2,7 L2,5 L22,5 L22,7 Z" }))), h("anj-column-menu", { visibleColumns: visible, hiddenColumns: hidden })));
    };
    Object.defineProperty(ColumnSelector.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    return ColumnSelector;
}());
var groupByVisible = function (columns) {
    var firstHiddenIndex = columns.findIndex(function (c) { return !c.visible; });
    return firstHiddenIndex > 0 ? [columns.slice(0, firstHiddenIndex), columns.slice(firstHiddenIndex)] : [columns, []];
};
var ContextMenu = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.menuListener = function (event) { return _this.open(event); };
        this.overlayClickListener = function (e) { return _this.onClick(e); };
        /**
         * Where to attach the overlay when opened
         * Options are `"parent"` or `"target"` which is the default.
         */
        this.attach = 'parent';
        /**
         * Loader to get the menu options. The default is to grab whatever is slotted.
         */
        this.loader = function () { return _this.getSlottedOptions(); };
        this.anjContextSelect = createEvent(this, "anjContextSelect", 7);
    }
    class_1.prototype.connectedCallback = function () {
        this.bodyEl = this.element.ownerDocument.body;
        this.parentEl = this.element.parentElement;
        if (typeof this.attach !== 'string') {
            this.attach.addEventListener('contextmenu', this.menuListener);
        }
        else {
            this.parentEl.addEventListener('contextmenu', this.menuListener);
        }
    };
    class_1.prototype.disconnectedCallback = function () {
        if (this.overlay) {
            this.overlay.remove();
        }
        if (typeof this.attach !== 'string') {
            this.attach.removeEventListener('contextmenu', this.menuListener);
        }
        else {
            this.parentEl.removeEventListener('contextmenu', this.menuListener);
        }
        this.unbindOverlay();
    };
    class_1.prototype.unbindOverlay = function () {
        if (this.overlay) {
            this.overlay.removeEventListener('click', this.overlayClickListener);
            this.overlay.innerHTML = '';
            this.overlay = null;
        }
    };
    class_1.prototype.onElsewhereOpen = function (_a) {
        var target = _a.target;
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_b) {
                if (this.overlay && target !== this.overlay) {
                    return [2 /*return*/, this.close()];
                }
                return [2 /*return*/];
            });
        });
    };
    /**
     * open the date picker
     */
    class_1.prototype.open = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            var popper, _a;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        event.preventDefault();
                        this.bindOverlay(this.element.querySelector('anj-overlay'));
                        return [4 /*yield*/, this.overlay.popper()];
                    case 1:
                        popper = _b.sent();
                        if (popper)
                            return [2 /*return*/];
                        _a = this;
                        return [4 /*yield*/, this.loader(event)];
                    case 2:
                        _a.options = _b.sent();
                        if (!this.options)
                            return [2 /*return*/];
                        this.insertOptions();
                        this.bodyEl.appendChild(this.overlay);
                        return [4 /*yield*/, this.overlay.open(this.attach === 'parent' ? this.parentEl : event.target)];
                    case 3:
                        _b.sent();
                        return [2 /*return*/];
                }
            });
        });
    };
    /**
     * close the date picker
     */
    class_1.prototype.close = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, this.overlay.close()];
                    case 1:
                        _a.sent();
                        this.unbindOverlay();
                        return [2 /*return*/];
                }
            });
        });
    };
    class_1.prototype.onClick = function (event) {
        return __awaiter(this, void 0, void 0, function () {
            var item;
            return __generator(this, function (_a) {
                event.preventDefault();
                event.stopPropagation();
                item = event.target;
                this.anjContextSelect.emit(item.action);
                return [2 /*return*/, this.close()];
            });
        });
    };
    class_1.prototype.bindOverlay = function (ref) {
        if (ref && !this.overlay) {
            this.overlay = ref;
            this.overlay.addEventListener('click', this.overlayClickListener);
        }
    };
    class_1.prototype.insertOptions = function () {
        var _this = this;
        this.options.forEach(function (o) { return _this.overlay.appendChild(o); });
    };
    class_1.prototype.getSlottedOptions = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                return [2 /*return*/, Array.from(this.overlay.querySelectorAll('anj-context-menu-item'))
                        .map(function (i) { return i.cloneNode(true); })];
            });
        });
    };
    class_1.prototype.render = function () {
        return (h("anj-overlay", { class: "anj-dropdown-menu anj-context-menu", placement: "bottom-start", dismiss: "auto" }));
    };
    Object.defineProperty(class_1.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { return "anj-context-menu{float:right}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
var ContextMenuItem = /** @class */ (function () {
    function ContextMenuItem(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Is the item disabled
         */
        this.disabled = false;
    }
    ContextMenuItem.prototype.onClick = function (event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    };
    Object.defineProperty(ContextMenuItem, "style", {
        get: function () { return "anj-context-menu-item{display:block;font-size:.875rem;font-family:var(--anj-font-family);line-height:1.5;outline:none;background-color:transparent;border:0;color:var(--anj-text);clear:both;cursor:pointer;font-weight:400;padding:.25rem .75rem;text-align:inherit;white-space:nowrap;width:100%}anj-context-menu-item,anj-context-menu-item:after,anj-context-menu-item:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-context-menu-item:active,anj-context-menu-item :active,anj-context-menu-item:focus,anj-context-menu-item :focus{outline:none}anj-context-menu-item:active,anj-context-menu-item:focus,anj-context-menu-item:hover{background-color:var(--anj-background);color:var(--anj-text);text-decoration:none;outline:none}anj-context-menu-item[disabled],anj-context-menu-item[disabled]:active,anj-context-menu-item[disabled]:hover{background-color:var(--anj-light);color:var(--anj-neutral);pointer-events:none}"; },
        enumerable: true,
        configurable: true
    });
    return ContextMenuItem;
}());
export { ColumnMenu as anj_column_menu, ColumnMenuItem as anj_column_menu_item, ColumnPinner as anj_column_pinner, ColumnSelector as anj_column_selector, ContextMenu as anj_context_menu, ContextMenuItem as anj_context_menu_item };
