import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/intersection-observer/intersection-observer.d.ts /** * * * @summary Watches child elements and dispatches events when they intersect with their root element. * @tag sigvelo-intersection-observer * @documentation https://design-system.sigvelo.com/docs/components/intersection * @status stable * @since 1.0 * * @slot - The elements to observe. Only direct children of the host element are observed. * * @event sigvelo-intersect - Emitted when an observed element starts or stops intersecting. `event.detail.entry` contains * the respective [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) * object. * * @example Default * The component uses an IntersectionObserver to monitor when its direct children intersect with a root element. The `sigvelo-intersect` event is dispatched when elements enter and leave the viewport. * * ```html *

* *

* * Scroll to see the element intersect at 100% visibility * * * ``` * * **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger intersection events. * * @example Observing elements * Only direct children of the intersection observer are observed. The component is styled with `display: contents`, allowing you to easily apply flex and grid layouts to a containing element. * * ```html *

* *

Box 1

Box 2

Box 3

* *

* ``` * * The component monitors when elements enter and leave the root element (the viewport by default) and dispatches the `sigvelo-intersect` event whenever an intersection state changes. The event includes `event.detail.entry`, which is an `IntersectionObserverEntry` object containing information about the intersection. * * You can determine which element triggered the event with `entry.target`. You can determine whether an element is entering or leaving the viewport by checking `entry.isIntersecting`. * * ```javascript * observer.addEventListener('sigvelo-intersect', event => { * const entry = event.detail.entry; * * if (entry.isIntersecting) { * console.log('Element entered viewport:', entry.target); * } else { * console.log('Element left viewport:', entry.target); * } * }); * ``` * * @example Customizing the root * Intersections can be observed within a specific container by setting the `root` attribute to the ID of the root element. Use `root-margin` to apply a `rootMargin` to one or all sides of the element. * * ```html *

* * ... * *

* ``` * * @example Providing multiple thresholds * You can monitor different visibility percentages by specifying multiple `threshold` values separated by a space. * * ```html * * ... * * ``` * * @example Applying classes on intersect * Use the `intersect-class` attribute to automatically apply the specified class to direct children when they intersect. This makes it easy to style them without event listeners. * * ```html *

* *

Fade In

Slide In

Scale & Rotate

Bounce

* *

* * Scroll to see elements transition at 50% visibility * * * ``` * * Use CSS transitions and animations to create advanced, modern effects without a single line of JavaScript. * * ```html *

* *

A kitten lays in its bed and cuddles a pillow

An orange kitten explores a tall grassy yard

A kitten peeks out from inside a cardboard box

A gray and white cat sleeps on a blanket with evening lights in the background

* *

* * * ``` */ declare class SigveloIntersectionObserver extends SigveloElement { static styles: CSSResultGroup; private hasInitialized; private intersectionObserver; private observedElements; /** The ID of the element to use as as the bounding box of the viewport for the observed targets. */ root: string | null; /** Margin around the root. Can have values similar to the CSS margin property. */ rootMargin: string; /** Either a single number or space-delimited numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. */ threshold: string; /** * A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no * longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure * CSS. */ intersectClass: string; /** When true, stops observing after the first intersection. */ once: boolean; /** Disables the intersection observer. */ disabled: boolean; connectedCallback(): void; disconnectedCallback(): void; updated(changedProperties: PropertyValues): void; private handleSlotChange; /** Parses the threshold property into an array of numbers. */ private parseThreshold; /** Resolves the root element from the provided ID. */ private resolveRoot; /** Starts or restarts the intersection observer. */ private startObserver; /** Stops the intersection observer. */ private stopObserver; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-intersection-observer": SigveloIntersectionObserver; } } //#endregion export { SigveloIntersectionObserver as t };