import { MediaElement } from "../media-element.js";
import { sliderContext } from "./context.js";
import { applyStateDataAttrs, getSliderPreviewStyle } from "@videojs/core/dom";
import { ContextConsumer } from "@videojs/element/context";
import { applyStyles } from "@videojs/utils/dom";

//#region src/ui/slider/slider-preview-element.ts
var SliderPreviewElement = class extends MediaElement {
	constructor(..._args) {
		super(..._args);
		this.overflow = "clamp";
	}
	static {
		this.tagName = "media-slider-preview";
	}
	static {
		this.properties = { overflow: { type: String } };
	}
	#ctx = new ContextConsumer(this, {
		context: sliderContext,
		subscribe: true
	});
	#resizeObserver = null;
	#width = 0;
	connectedCallback() {
		super.connectedCallback();
		this.#resizeObserver = new ResizeObserver(([entry]) => {
			this.#width = entry.contentRect.width;
			this.#applyPosition();
		});
		this.#resizeObserver.observe(this);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.#resizeObserver?.disconnect();
		this.#resizeObserver = null;
	}
	#applyPosition() {
		applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));
	}
	update(_changed) {
		super.update(_changed);
		const ctx = this.#ctx.value;
		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
		this.#applyPosition();
	}
};

//#endregion
export { SliderPreviewElement };
//# sourceMappingURL=slider-preview-element.js.map