import { __decorate } from "tslib";
import { attr, observable } from '@ni/fast-element';
import { DesignSystem } from '@ni/fast-foundation';
import { keyEnter } from '@ni/fast-web-utilities';
import { AnchorBase } from '../anchor-base';
import { styles } from './styles';
import { template } from './template';
/**
 * A nimble-styled anchor menu-item
 */
export class AnchorMenuItem extends AnchorBase {
    constructor() {
        super(...arguments);
        this.disabled = false;
        /**
         * There is an assumption that this component is styled using a grid display, and this property
         * controls which grid column contains the menu item text (i.e. the indentation of the text).
         * The parent menu sets this value on all its child menu items so their indentations align.
         * @internal
         */
        this.startColumnCount = 0;
    }
    // The following two handlers are workarounds for issues with anchor menu items in submenus.
    // Events can bubble up the DOM and get handled by the menu item in the parent menu. When that happens,
    // the menu item's handlers (FAST) return false and prevent the default action, i.e. navigation.
    // See tech debt issue: https://github.com/ni/nimble/issues/1740
    /**
     * @internal
     */
    clickHandler(e) {
        e.stopPropagation();
        return true;
    }
    /**
     * @internal
     */
    keydownHandler(e) {
        if (e.defaultPrevented) {
            return false;
        }
        switch (e.key) {
            case keyEnter:
                e.stopPropagation();
                break;
            default:
        }
        return true;
    }
    // The FAST Menu manages the `tabindex` of its menu items.
    // When keyboard navigating to an item, it sets that item's `tabindex` to 0.
    // We need to pass this on to the anchor, otherwise an anchor without an href
    // will not be focusable and will prevent arrowing through the menu.
    setAttribute(qualifiedName, value) {
        if (qualifiedName === 'tabindex') {
            this.anchor.setAttribute(qualifiedName, value);
        }
        else {
            super.setAttribute(qualifiedName, value);
        }
    }
    get tabIndex() {
        return this.anchor.tabIndex;
    }
    set tabIndex(value) {
        this.anchor.tabIndex = value;
    }
}
__decorate([
    attr({ mode: 'boolean' })
], AnchorMenuItem.prototype, "disabled", void 0);
__decorate([
    observable
], AnchorMenuItem.prototype, "anchor", void 0);
__decorate([
    observable
], AnchorMenuItem.prototype, "startColumnCount", void 0);
// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
const nimbleAnchorMenuItem = AnchorMenuItem.compose({
    baseName: 'anchor-menu-item',
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    }
});
DesignSystem.getOrCreate()
    .withPrefix('nimble')
    .register(nimbleAnchorMenuItem());
export const anchorMenuItemTag = 'nimble-anchor-menu-item';
//# sourceMappingURL=index.js.map