@aidenlx/player/types/ui/aspect-ratio/AspectRatioElement.d.ts

Headless web components that make integrating media on the a web a breeze.

import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult } from 'lit';
/**
 * This element creates a container that will hold the dimensions of the desired aspect ratio. This
 * container is useful for reserving space for media as it loads over the network.
 *
 * 💡  If your browser matrix supports the
 * [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) CSS property
 * then you can skip using this component, and set the desired aspect ratio directly on the
 * provider.
 *
 * 💡 By default it respects the browser's default aspect-ratio for media. This is not specific
 * to the loaded media but instead a general setting of `2/1`.
 *
 * @tagname vds-aspect-ratio
 * @example
 * ```html
 * <vds-aspect-ratio ratio="16/9">
 *   <vds-video-player>
 *     <!-- ... -->
 *   </vds-video-player>
 * </vds-aspect-ratio>
 * ```
 */
export declare class AspectRatioElement extends LitElement {
    static get styles(): CSSResultGroup;
    /**
     * The minimum height of the container.
     */
    minHeight: string;
    /**
     * The maximum height of the container.
     */
    maxHeight: string;
    /**
     * The desired aspect ratio setting given as `'width/height'` (eg: `'16/9'`).
     */
    ratio: string;
    /**
     * Whether the current `ratio` is a valid aspect ratio setting in the form `width/height`.
     */
    get isValidRatio(): boolean;
    protected update(changedProperties: PropertyValues): void;
    render(): TemplateResult;
    protected _updateAspectRatio(): void;
    protected _parseAspectRatio(): [number, number];
}
//# sourceMappingURL=AspectRatioElement.d.ts.map