@georapbox/skeleton-placeholder-element/dist/skeleton-placeholder.d.ts

A custom element that acts as a placeholder to indicate that some content will eventually be rendered.

/**
 * Represents a value that may be of type T, or null.
 */
export type Nullable<T> = T | null;
export type Effect = "wave" | "fade" | "none";
export type Variant = "circle" | "rect" | "pill";
/**
 * @summary A custom element that acts as a placeholder to indicate that some content will eventually be rendered.
 * @documentation https://github.com/georapbox/skeleton-placeholder-element#readme
 *
 * @tagname skeleton-placeholder This is the default tag name, unless overridden by the `defineCustomElement` method.
 * @extends HTMLElement
 *
 * @property {Effect} effect - The animation effect the skeleton element will use.
 * @property {Variant} variant - The variant of the skeleton.
 *
 * @atttribute {Effect} effect - Reflects the effect property.
 * @atttribute {Variant} variant - Reflects the variant property.
 *
 * @slot - The default slot that can be used to add a caption to the skeleton.
 *
 * @csspart wrapper - The skeleton's internal wrapper element.
 * @csspart placeholder - The skeleton's placeholder element.
 *
 * @cssproperty --border-radius - The border radius of the placeholder element.
 * @cssproperty --color - The color of the placeholder element.
 * @cssproperty --wave-color - The color of the wave effect.
 *
 * @method defineCustomElement - Static method. Defines the custom element with the given name.
 */
export class SkeletonPlaceholder extends HTMLElement {
    static get observedAttributes(): string[];
    /**
     * Defines a custom element with the given name.
     * The name must contain a dash (-).
     *
     * @param {string} [elementName='skeleton-placeholder'] - The name of the custom element.
     * @example
     *
     * SkeletonPlaceholder.defineCustomElement('my-skeleton-placeholder');
     */
    static defineCustomElement(elementName?: string | undefined): void;
    /**
     * Lifecycle method that is called when attributes are changed, added, removed, or replaced.
     *
     * @param {string} name - The name of the attribute.
     * @param {string} oldValue - The old value of the attribute.
     * @param {string} newValue - The new value of the attribute.
     */
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    set effect(value: Effect);
    /**
     * @type {Effect} - The animation effect the skeleton element will use.
     * @default 'none'
     * @attribute effect - Reflects the effect property.
     */
    get effect(): Effect;
    set variant(value: Variant);
    /**
     * @type {Variant} - The variant of the skeleton.
     * @default ''
     * @attribute variant - Reflects the variant property.
     */
    get variant(): Variant;
    /**
     * Lifecycle method that is called when the element is added to the DOM.
     */
    connectedCallback(): void;
    #private;
}
//# sourceMappingURL=skeleton-placeholder.d.ts.map