'use strict';

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

const core = require('./core-7e2b0104.js');
const drop_controller = require('./drop.controller-ebab46a4.js');
require('./utils-2a7c8f6e.js');
const column_renderer = require('./column.renderer-2366bd3b.js');
const i18n_provider = require('./i18n.provider-b7733c9d.js');

const ColumnMenu = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * Defined columns not displayed in the table
         */
        this.hiddenColumns = [];
        /**
         * Defined columns displayed in the table
         */
        this.visibleColumns = [];
        this.anjColumnToggle = core.createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = core.createEvent(this, "anjReorder", 7);
    }
    onChange({ detail }) {
        this.anjColumnToggle.emit(detail.value);
    }
    onDrop({ detail, target }) {
        detail['targetIndex'] = (Number.isInteger(detail.targetIndex)) ? detail.targetIndex : target.index;
        this.anjReorder.emit(detail);
    }
    render() {
        const disabled = this.visibleColumns.length === 1;
        return [
            core.h("anj-headline", null, core.h("h5", null, "Customize Columns")),
            core.h("div", { class: "anj-column-menu-item-container" }, this.visibleColumns.map((c, i) => core.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 ? core.h("anj-divider", null) : undefined, this.hiddenColumns.sort(sortByName).map((c, i) => core.h("anj-column-menu-item", { key: `${c.name}-${c.visible}-${i}`, name: c.name, visible: c.visible }, c.headerRenderer(c.field, c.caption))))
        ];
    }
    static get style() { 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}}"; }
};
const sortByName = (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 = {}));
const ColumnMenuItem = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.handleFocused = false;
        this.anjDrop = core.createEvent(this, "anjDrop", 7);
    }
    onVisibleChange() {
        this.visible ? this.dropController.connect() : this.dropController.disconnect();
    }
    connectedCallback() {
        this.dragController = new drop_controller.DragController(this.element, this.getDropData.bind(this));
        this.dropController = new drop_controller.DropController(this.element);
        if (this.visible) {
            this.dropController.connect();
        }
    }
    disconnectedCallback() {
        this.dropController.disconnect();
    }
    onToggle(event) {
        if (event.detail.checked === this.visible || event.detail.value !== this.name) {
            event.stopPropagation();
        }
    }
    onEnter(ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            const detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    }
    onFocus() {
        this.handleFocused = true;
    }
    onBlur() {
        this.handleFocused = false;
    }
    getDropData() {
        return {
            currentIndex: this.index
        };
    }
    render() {
        return (core.h(core.Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: () => this.onFocus(), onMouseLeave: () => this.onBlur() }, this.visible && !this.disabled
            ? core.h("anj-button", { "aria-label": this.translator(Translations.DRAG_INSTRUCTION), context: "free", onMouseDown: () => this.dragController.connect(), onMouseUp: () => this.dragController.disconnect() }, core.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })))
            : undefined, core.h("anj-checkbox", { checked: this.visible, value: this.name }, core.h("slot", null))));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "visible": ["onVisibleChange"]
    }; }
    static get style() { 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}"; }
};
i18n_provider.Tunnel.injectProps(ColumnMenuItem, ['translator']);

const ColumnPinner = class {
    constructor(hostRef) {
        core.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;
    }
    render() {
        if (!this.enabled) {
            return undefined;
        }
        return column_renderer.COLUMN_CONTEXT_MENU.filter((o) => !this.disallow || o.value !== this.disallow)
            .map(o => core.h("anj-context-menu-item", { action: o.value }, this.translator(o.label)));
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-column-pinner{display:none}"; }
};
i18n_provider.Tunnel.injectProps(ColumnPinner, ['translator']);

const ColumnSelector = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.columnsUpdatedListener = ({ detail }) => this.onColumnsChanged(detail);
        this.columnToggleListener = ({ detail }) => this.onColumnToggle(detail);
        this.columnReorderListener = ({ detail }) => this.onColumnReorder(detail);
        this.columns = [];
        this.anjColumnToggle = core.createEvent(this, "anjColumnToggle", 7);
        this.anjReorder = core.createEvent(this, "anjReorder", 7);
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        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);
    }
    componentDidUnload() {
        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;
        }
    }
    onColumnsChanged(columns) {
        this.columns = columns.filter(c => !c.internal && c.orderable && isNaN(c.groupIndex));
    }
    onColumnToggle(detail) {
        this.anjColumnToggle.emit(detail);
    }
    onColumnReorder(detail) {
        this.anjReorder.emit(detail);
    }
    render() {
        const [visible, hidden] = groupByVisible(this.columns);
        return (core.h("anj-dropdown", { placement: "bottom-end" }, core.h("anj-button", { context: "icon", slot: "dropdown-toggle" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.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" }))), core.h("anj-column-menu", { visibleColumns: visible, hiddenColumns: hidden })));
    }
    get element() { return core.getElement(this); }
};
const groupByVisible = (columns) => {
    const firstHiddenIndex = columns.findIndex(c => !c.visible);
    return firstHiddenIndex > 0 ? [columns.slice(0, firstHiddenIndex), columns.slice(firstHiddenIndex)] : [columns, []];
};

const ContextMenu = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.menuListener = (event) => this.open(event);
        this.overlayClickListener = (e) => 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 = () => this.getSlottedOptions();
        this.anjContextSelect = core.createEvent(this, "anjContextSelect", 7);
    }
    connectedCallback() {
        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);
        }
    }
    disconnectedCallback() {
        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();
    }
    unbindOverlay() {
        if (this.overlay) {
            this.overlay.removeEventListener('click', this.overlayClickListener);
            this.overlay.innerHTML = '';
            this.overlay = null;
        }
    }
    async onElsewhereOpen({ target }) {
        if (this.overlay && target !== this.overlay) {
            return this.close();
        }
    }
    /**
     * open the date picker
     */
    async open(event) {
        event.preventDefault();
        this.bindOverlay(this.element.querySelector('anj-overlay'));
        const popper = await this.overlay.popper();
        if (popper)
            return;
        this.options = await this.loader(event);
        if (!this.options)
            return;
        this.insertOptions();
        this.bodyEl.appendChild(this.overlay);
        await this.overlay.open(this.attach === 'parent' ? this.parentEl : event.target);
    }
    /**
     * close the date picker
     */
    async close() {
        await this.overlay.close();
        this.unbindOverlay();
    }
    async onClick(event) {
        event.preventDefault();
        event.stopPropagation();
        const item = event.target;
        this.anjContextSelect.emit(item.action);
        return this.close();
    }
    bindOverlay(ref) {
        if (ref && !this.overlay) {
            this.overlay = ref;
            this.overlay.addEventListener('click', this.overlayClickListener);
        }
    }
    insertOptions() {
        this.options.forEach(o => this.overlay.appendChild(o));
    }
    async getSlottedOptions() {
        return Array.from(this.overlay.querySelectorAll('anj-context-menu-item'))
            .map(i => i.cloneNode(true));
    }
    render() {
        return (core.h("anj-overlay", { class: "anj-dropdown-menu anj-context-menu", placement: "bottom-start", dismiss: "auto" }));
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-context-menu{float:right}"; }
};

const ContextMenuItem = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * Is the item disabled
         */
        this.disabled = false;
    }
    onClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
    static get style() { 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}"; }
};

exports.anj_column_menu = ColumnMenu;
exports.anj_column_menu_item = ColumnMenuItem;
exports.anj_column_pinner = ColumnPinner;
exports.anj_column_selector = ColumnSelector;
exports.anj_context_menu = ContextMenu;
exports.anj_context_menu_item = ContextMenuItem;
