/** * Resolve the observer options. * @param {StyleObserverOptions} options * @returns {StyleObserverOptionsObject} */ export function resolveOptions(options: StyleObserverOptions): StyleObserverOptionsObject; /** * @typedef { object } StyleObserverOptionsObject * @property { string[] } properties - The properties to observe. */ /** * @typedef { StyleObserverOptionsObject | string | string[] } StyleObserverOptions */ /** * @callback StyleObserverCallback * @param {Record[]} records * @returns {void} */ /** * @typedef { Object } Record * @property {Element} target - The element that changed. * @property {string} property - The property that changed. * @property {string} value - The new value of the property. * @property {string} oldValue - The old value of the property. */ export default class ElementStyleObserver { /** All properties ever observed by this class. */ static properties: Set; /** * All instances ever observed by this class. */ static all: MultiWeakMap; /** * @param {Element} target * @param {StyleObserverCallback} callback * @param {StyleObserverOptions} [options] */ constructor(target: Element, callback: StyleObserverCallback, options?: StyleObserverOptions); /** * Observed properties to their old values. * @type {Map} */ properties: Map; /** * Get the names of all properties currently being observed. * @type { string[] } */ get propertyNames(): string[]; /** * The element being observed. * @type {Element} */ target: Element; /** * The callback to call when the element's style changes. * @type {StyleObserverCallback} */ callback: StyleObserverCallback; /** * The observer options. * @type {StyleObserverOptions} */ options: StyleObserverOptions; renderedObserver: RenderedObserver; resolveOptions(options: any): StyleObserverOptionsObject & StyleObserverOptions; /** * Handle a potential property change * @private * @param {TransitionEvent} [event] */ private handleEvent; /** * Observe the target for changes to one or more CSS properties. * @param {string | string[]} properties * @return {void} */ observe(properties: string | string[]): void; /** * Update the `--style-observer-transition` property to include all observed properties. */ updateTransitionProperties(): void; /** * Update the target's transition property or refresh it if it was overwritten. * @param {object} options * @param {boolean} [options.firstTime] - Whether this is the first time the transition is being set. */ updateTransition({ firstTime }?: { firstTime?: boolean; }): void; /** * Whether the target has an open shadow root (and the modern adoptedStyleSheets API is supported). * @type { boolean } * @private */ private get _isHost(); /** * Shadow style sheet. Only used if _isHost is true. * @type { CSSStyleSheet | undefined } * @private */ private _shadowSheet; /** * Any styles we've set on the target, for any reason. * @type { Record } * @private */ private _styles; /** * Set a CSS property on the target. * @param {string} property * @param {string} value * @param {string} [priority] * @return {void} */ setProperty(property: string, value: string, priority?: string): void; /** * Get a CSS property from the target. * @param {string} property * @return {string} */ getProperty(property: string): string; /** * Stop observing a target for changes to one or more CSS properties. * @param { string | string[] } [properties] Properties to stop observing. Defaults to all observed properties. * @return {void} */ unobserve(properties?: string | string[]): void; #private; } export type StyleObserverOptionsObject = { /** * - The properties to observe. */ properties: string[]; }; export type StyleObserverOptions = StyleObserverOptionsObject | string | string[]; export type StyleObserverCallback = (records: Record[]) => void; export type Record = { /** * - The element that changed. */ target: Element; /** * - The property that changed. */ property: string; /** * - The new value of the property. */ value: string; /** * - The old value of the property. */ oldValue: string; }; import RenderedObserver from "./rendered-observer.js"; import MultiWeakMap from "./util/MultiWeakMap.js";