import { AttachedBehaviorHTMLDirective } from '@ni/fast-element';
/**
 * The runtime behavior for template overflow detection.
 * @public
 */
export class OverflowBehavior {
    /**
     * Creates an instance of OverflowBehavior.
     * @param target - The element to check for overflow.
     * @param propertyName - The name of the property to assign the overflow state to.
     */
    constructor(target, propertyName) {
        this.target = target;
        this.propertyName = propertyName;
    }
    /**
     * Bind this behavior to the source.
     * @param source - The source to bind to.
     * @param context - The execution context that the binding is operating within.
     */
    bind(source) {
        this.source = source;
        this.setSourceValue(false);
        this.mouseOverHandler = () => {
            const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
            this.setSourceValue(hasOverflow);
        };
        this.mouseOutHandler = () => {
            this.setSourceValue(false);
        };
        this.target.addEventListener('mouseover', this.mouseOverHandler);
        this.target.addEventListener('mouseout', this.mouseOutHandler);
    }
    /**
     * Unbinds this behavior from the source.
     * @param source - The source to unbind from.
     */
    unbind() {
        this.source = undefined;
        this.target.removeEventListener('mouseover', this.mouseOverHandler);
        this.target.removeEventListener('mouseout', this.mouseOutHandler);
    }
    setSourceValue(value) {
        // @ts-expect-error set property on source
        this.source[this.propertyName] = value;
    }
}
/**
 * A directive that observes if an element has overflow and sets a flag.
 * @param propertyName - The name of the property to assign the overflow flag.
 * @public
 */
export function overflow(propertyName) {
    return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
}
//# sourceMappingURL=overflow.js.map