@alegendstale/holly-components/dist/components/responsive-svg/responsive-svg.d.ts

Reusable UI components created using lit

import { LitElement, TemplateResult } from 'lit';
type ViewBox = {
    x: number;
    y: number;
    width: number;
    height: number;
};
export declare const preserveAspectRatioAlignOptions: readonly ["none", "xMinYMin", "xMidYMin", "xMaxYMin", "xMinYMid", "xMidYMid", "xMaxYMid", "xMinYMax", "xMidYMax", "xMaxYMax"];
export declare const preserveAspectRatioSpacingOptions: readonly ["meet", "slice"];
export declare const preserveAspectRatioOptions: readonly ["none", "xMinYMin", "xMidYMin", "xMaxYMin", "xMinYMid", "xMidYMid", "xMaxYMid", "xMinYMax", "xMidYMax", "xMaxYMax", ...("none slice" | "none meet" | "xMinYMin slice" | "xMinYMin meet" | "xMidYMin slice" | "xMidYMin meet" | "xMaxYMin slice" | "xMaxYMin meet" | "xMinYMid slice" | "xMinYMid meet" | "xMidYMid slice" | "xMidYMid meet" | "xMaxYMid slice" | "xMaxYMid meet" | "xMinYMax slice" | "xMinYMax meet" | "xMidYMax slice" | "xMidYMax meet" | "xMaxYMax slice" | "xMaxYMax meet")[]];
export type PreserveAspectRatioAlign = typeof preserveAspectRatioAlignOptions[number];
export type PreserveAspectRatioSpacing = typeof preserveAspectRatioSpacingOptions[number];
export type PreserveAspectRatio = typeof preserveAspectRatioOptions[number];
export type CombinedAlignSpacing = `${PreserveAspectRatioAlign} ${PreserveAspectRatioSpacing}`;
/**
 * Responsively sizes SVGs to font-size or automatically fits them to the container.
 *
 * @cssprop {<length> (em)} --svg-width - Controls the width of the SVG. (Expects em value)
 * @cssprop {<length> (em)} --svg-height - Controls the height of the SVG. (Expects em value)
 * @cssprop {<length> (em)} --svg-width-fallback - Set by the component as a fallback in case --svg-width is not defined.
 * @cssprop {<length> (em)} --svg-height-fallback - Set by the component as a fallback in case --svg-height is not defined.
 * @cssprop {number} --scale - Controls the scale of the SVG when sized relative to font-size.
 *
 * @csspart __svg - Styles the SVG element.
 * @csspart __path - Styles all child path elements of the SVG.
 */
export declare class ResponsiveSvg extends LitElement {
    static styles: import("lit").CSSResult[];
    /** The SVG will attempt to fill its container. */
    autofit: boolean;
    /** Use the colors from the SVG input. */
    svgColors: boolean;
    /** @internal */
    private _svg?;
    /**
     * The SVG to responsively size.
     * Must use a property expression (.) to set
     * @type {SVGElement | TemplateResult<2> | string}
     */
    set svg(val: SVGElement | TemplateResult<2> | string);
    get svg(): SVGElement | TemplateResult<2> | ChildNode[] | string;
    /** @internal */
    private _preserveAspectRatio;
    /**
     * Set whether SVG preserves its aspect ratio alignment or spacing.
     * @type {PreserveAspectRatio}
     * @default xMidYMid meet
     */
    set preserveAspectRatio(val: PreserveAspectRatio | undefined);
    get preserveAspectRatio(): PreserveAspectRatio | undefined;
    /** The viewBox dimensions the SVG will use. */
    protected viewBox: ViewBox;
    protected svgClasses(): {};
    private _widthController;
    private _heightController;
    render(): TemplateResult<1>;
    /**
     * Gets the viewBox dimensions from an SVG element.
     * @param svg The SVG to get the attribute from.
     * @returns The SVG viewBox x, y, width, and height
     */
    getViewBoxSize(svg: SVGElement): ViewBox | null;
}
declare global {
    interface HTMLElementTagNameMap {
        'responsive-svg': ResponsiveSvg;
    }
}
export {};
//# sourceMappingURL=responsive-svg.d.ts.map