element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
49 lines (48 loc) • 1.69 kB
TypeScript
import { type MaybePromise } from '@augment-vir/common';
import { type PartInfo } from '../../lit-exports/all-lit-exports.js';
/**
* Callback called by the {@link onResize} directive.
*
* @category Internal
*/
export type OnResizeCallback = (size: Readonly<Pick<ResizeObserverEntry,
/** Only these two properties are supported in all major modern browsers */
'target' | 'contentRect'>>, element: Element) => MaybePromise<void>;
/**
* A directive that fires its listener any time the element that it's attached to is resized. This
* uses the [built-in `ResizeObserver`
* API](https://developer.mozilla.org/docs/Web/API/ResizeObserver), so it is very efficient.
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, onResize} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div
* ${onResize((size, element) => {
* console.log('resized!', element, size);
* })}
* >
* Some div
* </div>
* `;
* },
* });
* ```
*/
export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive.js").DirectiveResult<{
new (partInfo: PartInfo): {
element: Element | undefined;
readonly resizeObserver: ResizeObserver;
callback: OnResizeCallback | undefined;
fireCallback(entries: ResizeObserverEntry[]): void;
update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
render(callback: OnResizeCallback): undefined;
readonly _$isConnected: boolean;
};
}>;