// #region Imports
import { ElementValueAccessorBase } from '../../../../../Forms/Accessors/Abstracts/ElementValueAccessorBase';
/**
 * The `ColorEditorAreaElementValueAccessor` class provides form value accessor
 * functionality for the `ColorEditorAreaElement`, enabling two-way binding
 * between the color area and form controls.
 *
 * @public
 */
export class ColorEditorAreaElementValueAccessor extends ElementValueAccessorBase {
    // #region Methods
    /**
     * Called when the host element is connected to the DOM.
     * Sets up event listeners for area changes.
     *
     * @public
     */
    hostConnected() {
        this.host.on('change', (e) => this.writeValue(e.detail));
        this.host.on('blur', () => this.onTouched());
        // we need to set the value here because the host element may have a value before the accessor is connected
        void this.host.updateComplete.then(() => {
            this.value = {
                hue: this.host.hue,
                saturation: this.host.saturation,
                value: this.host.value
            };
        });
    }
    /**
     * Writes a value to the host element.
     *
     * @public
     * @override
     * @param value - The HSV value to write.
     */
    writeValue(value) {
        super.writeValue(value);
        if (value) {
            this.host.setColor(value.hue, value.saturation, value.value);
        }
        else {
            this.host.setColor(0, 1, 1);
        }
    }
    /**
     * Resets the host element to its default value.
     *
     * @public
     * @override
     */
    resetValue() {
        super.resetValue();
        this.host.setColor(0, 1, 1);
    }
}
/**
 * Factory function to create a `ColorEditorAreaElementValueAccessor` instance.
 *
 * @public
 */
export const colorEditorAreaElementValueAccessor = (host) => new ColorEditorAreaElementValueAccessor(host);
//# sourceMappingURL=ColorEditorAreaElementValueAccessor.js.map