'use strict';

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

const index = require('./index-7a477838.js');
const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
require('./detectClosest.util-85b3507b.js');

const navigationContextMenuCss = ".sc-digi-context-menu-h{--digi--navigation-context-menu--toggle-icon--transition:ease-in-out 0.2s all;--digi--navigation-context-menu--toggle-icon--transform:rotate(-180deg);--digi--navigation-context-menu--content--background-color:var(--digi--color--background--primary);--digi--navigation-context-menu--content--border-radius:var(--digi--border-radius--secondary);--digi--navigation-context-menu--content--max-width:90vw;--digi--navigation-context-menu--content--max-height:15rem;--digi--navigation-context-menu--button-icon--width:0.875rem;--digi--navigation-context-menu--button-trigger--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--button-trigger--padding:0;--digi--navigation-context-menu--item--font-size:var(--digi--typography--body--font-size--desktop);--digi--navigation-context-menu--item--background-color--active:var(--digi--color--background--interactive--selected--tertiary);--digi--navigation-context-menu--item--display:flex;--digi--navigation-context-menu--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-context-menu--item--font-color:var(--digi--color--text--primary);display:block;box-sizing:border-box;width:fit-content}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu{display:grid}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__toggle-icon.sc-digi-context-menu{transition:var(--digi--navigation-context-menu--toggle-icon--transition)}.sc-digi-context-menu-h .digi-navigation-context-menu--active.sc-digi-context-menu .digi-navigation-context-menu__toggle-icon.sc-digi-context-menu{transform:var(--digi--navigation-context-menu--toggle-icon--transform)}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__trigger-button.sc-digi-context-menu{display:block;--digi--button--padding--medium:var(--digi--navigation-context-menu--button-trigger--padding);width:fit-content;--digi--button--font-size--medium:var(--digi--navigation-context-menu--button-trigger--font-size)}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list.sc-digi-context-menu{width:100%;position:relative;display:none}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list--active.sc-digi-context-menu{display:inline-grid}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list.sc-digi-context-menu .dropdown-wrapper.sc-digi-context-menu{padding:0.5rem 0;display:none;width:max-content;min-width:100%;max-width:var(--digi--navigation-context-menu--content--max-width);max-height:var(--digi--navigation-context-menu--content--max-height);overflow-y:auto;box-sizing:border-box;z-index:10;margin-top:0.5rem;background-color:var(--digi--navigation-context-menu--content--background-color);border-radius:var(--digi--navigation-context-menu--content--border-radius);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.7);position:absolute}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list.sc-digi-context-menu .dropdown-wrapper--visible.sc-digi-context-menu{display:block}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list.sc-digi-context-menu .dropdown-wrapper--position-right.sc-digi-context-menu{right:0}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__list.sc-digi-context-menu .dropdown-wrapper--position-center.sc-digi-context-menu{left:50%;transform:translateX(-50%)}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .content-wrapper.sc-digi-context-menu{display:flex;flex-direction:row;align-items:baseline;padding-left:1rem;padding-right:1rem;gap:0.5rem}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item.sc-digi-context-menu{font-size:var(--digi--navigation-context-menu--item--font-size);display:var(--digi--navigation-context-menu--item--display);font-family:var(--digi--navigation-context-menu--item--font-family);padding:0.625rem 0;max-width:max-content;min-width:100%;width:100%;position:relative;cursor:pointer}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item.sc-digi-context-menu:hover{background-color:var(--digi--navigation-context-menu--item--background-color--active)}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item.sc-digi-context-menu:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item--active.sc-digi-context-menu{font-weight:600;background-color:var(--digi--navigation-context-menu--item--background-color--active)}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item--link.sc-digi-context-menu{list-style:none;margin:0;padding:0}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item--link.sc-digi-context-menu a.sc-digi-context-menu{padding:0.625rem 1rem;color:var(--digi--navigation-context-menu--item--font-color, #333333);text-decoration:none;margin:0;width:100%}.sc-digi-context-menu-h .digi-navigation-context-menu.sc-digi-context-menu .digi-navigation-context-menu__item.sc-digi-context-menu .digi-navigation-context-menu__button-icon.sc-digi-context-menu{--digi--icon--width:var(--digi--navigation-context-menu--button-icon--width)}";
const DigiContextMenuStyle0 = navigationContextMenuCss;

function deserializeProp(prop) {
    if (typeof prop === 'string') {
        return JSON.parse(prop);
    }
    return prop;
}
const ContextMenu = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afChangeItem = index.createEvent(this, "afChangeItem", 7);
        this.afFocusItem = index.createEvent(this, "afFocusItem", 7);
        this.afToggleMenu = index.createEvent(this, "afToggleMenu", 7);
        this.afBlur = index.createEvent(this, "afBlur", 7);
        this.itemRefs = {};
        this.visible = false;
        this.activeItemIdx = undefined;
        this.selectItemIdx = 0;
        this.afId = randomIdGenerator_util.randomIdGenerator('digi-context-menu');
        this.afIcon = undefined;
        this.afTitle = undefined;
        this.afMenuItems = undefined;
        this.afDir = undefined;
        this.afLang = undefined;
        this.afAriaLabel = undefined;
        this.afMenuPosition = 'left-bottom';
        this.afActiveItem = undefined;
    }
    clickHandler(e) {
        const target = e.target;
        const selector = `#${this.afId}-identifier`;
        if (detectClickOutside_util.detectClickOutside(target, selector) && this.visible) {
            this.hideMenu();
        }
    }
    focusoutHandler(e) {
        const target = e.target;
        const selector = `#${this.afId}-identifier`;
        if (detectFocusOutside_util.detectFocusOutside(target, selector) && this.visible) {
            this.hideMenu();
            this.afBlur.emit();
        }
    }
    syncActiveItem() {
        if (this.afActiveItem != null) {
            const menuItems = this.afMenuItems;
            this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
        }
    }
    syncItems() {
        this.afMenuItems = deserializeProp(this.afMenuItems);
    }
    componentWillLoad() {
        this.syncItems();
        this.syncActiveItem();
    }
    get digiIcon() {
        if (this.afIcon != null) {
            return `digi-icon-${this.afIcon}`;
        }
    }
    hideMenu() {
        this.visible = false;
        this.afToggleMenu.emit(this.visible);
    }
    showMenu() {
        this.visible = true;
        this.afToggleMenu.emit(this.visible);
    }
    isLink() {
        if (this.afMenuItems && this.afMenuItems.length > 0) {
            const itemToCheck = this.afMenuItems[0];
            return itemToCheck.type && itemToCheck.type === 'link';
        }
        return false;
    }
    async handleToggle() {
        if (this.visible) {
            this.hideMenu();
            this.focusOnButton();
        }
        else {
            this.showMenu();
            if (!this.isLink()) {
                const idx = this.activeItemIdx || 0;
                const item = this.afMenuItems[idx];
                setTimeout(() => this.itemRefs[item.id].focus(), 25);
            }
        }
    }
    async focusOnButton() {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        const digiButton = this.buttonRef;
        const button = (await digiButton.afMGetButtonElement());
        button.focus();
    }
    handleChangeItem(item, idx) {
        this.activeItemIdx = idx;
        this.handleToggle();
        this.afChangeItem.emit({ item, idx });
    }
    handleRef(ref, refId, payload) {
        if (refId === 'item') {
            this.itemRefs[payload.id] = ref;
        }
    }
    isActive(idx) {
        if ((this.activeItemIdx !== undefined || this.activeItemIdx !== null) &&
            this.activeItemIdx === idx) {
            return true;
        }
        return false;
    }
    isSelected(idx) {
        return this.selectItemIdx === idx;
    }
    nextIdx(idx) {
        if (idx > this.afMenuItems.length - 1) {
            return 0;
        }
        else if (idx < 0) {
            return this.afMenuItems.length - 1;
        }
        else {
            return idx;
        }
    }
    activateItem(idx) {
        const item = this.afMenuItems[idx];
        this.activeItemIdx = idx;
        this.focusItem(idx);
        this.handleChangeItem(item, idx);
    }
    focusItem(idx) {
        var _a;
        const item = this.afMenuItems[idx];
        this.selectItemIdx = idx;
        (_a = this.itemRefs[item.id]) === null || _a === void 0 ? void 0 : _a.focus();
        this.afFocusItem.emit({ item, idx });
    }
    focusCaptured() {
        const menuItems = this.afMenuItems;
        return menuItems.some((item) => this.itemRefs[item.id] === document.activeElement);
    }
    handleKey(e) {
        if (!this.focusCaptured())
            return;
        switch (e.key) {
            case 'ArrowUp':
                this.focusItem(this.nextIdx(this.selectItemIdx - 1));
                break;
            case 'ArrowDown':
                this.focusItem(this.nextIdx(this.selectItemIdx + 1));
                break;
            case 'Escape':
                this.hideMenu();
                this.focusOnButton();
                break;
            case 'Enter':
            case ' ':
                e.preventDefault();
                e.stopPropagation();
                this.activateItem(this.selectItemIdx);
                break;
        }
    }
    handleLinkClick(e, item, idx) {
        if (!item.overrideLink) {
            window.location.assign(item.href);
        }
        else {
            e.preventDefault();
            this.handleChangeItem(item, idx);
        }
    }
    renderLink(item, idx) {
        const menuItem = this.afMenuItems[idx];
        return (index.h("li", { id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
                'digi-navigation-context-menu__item': true,
                'digi-navigation-context-menu__item--link': true,
                'digi-navigation-context-menu__item--active': this.isActive(idx)
            }, dir: this.afDir, lang: this.afLang, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, index.h("a", { "aria-label": item.ariaLabel ? item.ariaLabel : null, href: menuItem.href ? menuItem.href : null, onClick: (e) => this.handleLinkClick(e, item, idx) }, item.title)));
    }
    renderDiv(item, idx) {
        return (index.h("div", { role: "option", id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
                'digi-navigation-context-menu__item': true,
                'digi-navigation-context-menu__item--active': this.isActive(idx)
            }, dir: this.afDir, lang: this.afLang, "aria-selected": this.isActive(idx).toString(), tabIndex: this.isSelected(idx) ? 0 : -1, onClick: () => { var _a; return (_a = this.handleChangeItem) === null || _a === void 0 ? void 0 : _a.call(this, item, idx); }, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, index.h("div", { class: "content-wrapper" }, index.h("digi-icon-check", { class: "digi-navigation-context-menu__button-icon", slot: "icon", style: {
                visibility: idx === this.activeItemIdx && this.visible
                    ? 'visible'
                    : 'hidden'
            } }), index.h("span", { "aria-label": item.ariaLabel ? item.ariaLabel : null }, item.title)), ' '));
    }
    render() {
        const menuItems = this.afMenuItems;
        return (index.h(index.Host, { key: 'd9024d6373cbed4e449d880eb5999921941311c8' }, index.h("div", { key: '2e71d1de06967dee77553c0e171338f0ec2a16b2', id: `${this.afId}-identifier`, class: {
                'digi-navigation-context-menu': true,
                'digi-navigation-context-menu--active': this.visible
            } }, index.h("digi-button", { key: 'f72ca1811f2c10873bff2cf6c6edfb6d690909b3', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && index.h(this.digiIcon, { key: 'a7d28de1604540f5bc90ac45f92c11db03c9e3f4', slot: "icon" }), this.afTitle, index.h("digi-icon-chevron-down", { key: '39a9b3cc9d61b8a43f6b32391f20fdf183e620c4', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: 'f9a7c9014f2683e69c30fef9a586e0ff929d589f', class: {
                'digi-navigation-context-menu__list': true,
                'digi-navigation-context-menu__list--active': this.visible
            } }, index.h("div", { key: 'c31531d586d8214c2287f9c5d98902a0bd98c0a2', onKeyDown: (e) => {
                this.handleKey(e);
            }, id: `${this.afId}-dropdown`, style: {
                visibility: this.visible ? 'visible' : 'hidden'
            }, role: this.isLink() ? 'list' : 'listbox', "aria-labelledby": `${this.afId}-trigger`, class: {
                'dropdown-wrapper': true,
                'dropdown-wrapper--visible': this.visible,
                'dropdown-wrapper--position-right': this.afMenuPosition === 'right-bottom',
                'dropdown-wrapper--position-center': this.afMenuPosition === 'center-bottom'
            } }, menuItems &&
            menuItems.map((item, idx) => {
                const menuItem = menuItems[idx];
                if (menuItem.type && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) === 'link') {
                    return this.renderLink(item, idx);
                }
                return this.renderDiv(item, idx);
            }))))));
    }
    static get watchers() { return {
        "afActiveItem": ["syncActiveItem"],
        "afMenuItems": ["syncItems"]
    }; }
};
ContextMenu.style = DigiContextMenuStyle0;

exports.digi_context_menu = ContextMenu;
