import { __decorate } from "tslib";
import { DesignSystem } from '@ni/fast-foundation';
import { observable, volatile } from '@ni/fast-element';
import { TableCellView } from '../../base/cell-view';
import { template } from './template';
import { styles } from './styles';
import { cellViewMenuSlotName } from '../types';
/**
 * The cell view base class for displaying a string field as a menu button.
 */
export class TableColumnMenuButtonCellView extends TableCellView {
    constructor() {
        super(...arguments);
        /** @internal */
        this.hasOverflow = false;
    }
    /** @internal */
    get showMenuButton() {
        return !!this.cellRecord?.value;
    }
    get tabbableChildren() {
        if (this.showMenuButton) {
            return [this.menuButton];
        }
        return [];
    }
    /** @internal */
    onMenuButtonBeforeToggle(event) {
        const configuredSlotName = this.columnConfig?.menuSlot;
        if (configuredSlotName && event.detail.newState) {
            const eventDetail = {
                slots: [
                    { name: configuredSlotName, slot: cellViewMenuSlotName }
                ]
            };
            this.$emit('cell-view-slots-request', eventDetail);
        }
        return true;
    }
    /** @internal */
    onMenuButtonMouseOver() {
        if (this.valueSpan) {
            this.hasOverflow = this.valueSpan.offsetWidth < this.valueSpan.scrollWidth;
        }
    }
    /** @internal */
    onMenuButtonMouseOut() {
        this.hasOverflow = false;
    }
    /** @internal */
    onMenuButtonClick(e) {
        // Stop propagation of the click event to prevent clicking the menu button
        // from affecting row selection.
        e.stopPropagation();
    }
}
__decorate([
    observable
], TableColumnMenuButtonCellView.prototype, "hasOverflow", void 0);
__decorate([
    volatile
], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
const menuButtonCellView = TableColumnMenuButtonCellView.compose({
    baseName: 'table-column-menu-button-cell-view',
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
export const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
//# sourceMappingURL=index.js.map