@lordicon/web 1.0.0 → 1.1.0

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export type { ColorMap, EventHandler, EventName, IconProperties, IconState, LegacyIconProperties, PlaybackDirection, Stroke } from './interfaces';
+export { Player } from './player';

package/dist/src/interfaces.d.ts

@@ -0,0 +1,163 @@
+/**
+ * Icon animation data in Lottie JSON format.
+ * This player is optimized for icons from [Lordicon](https://lordicon.com/).
+ */
+export type LottieData = any;
+/**
+ * Represents a single Lottie animation instance from `@lordicon/internal`.
+ * Contains the current state and methods for controlling playback.
+ */
+export type LottieAnimationInstance = {
+    name: string;
+    isLoaded: boolean;
+    currentFrame: number;
+    currentRawFrame: number;
+    firstFrame: number;
+    totalFrames: number;
+    frameRate: number;
+    frameMult: number;
+    playSpeed: number;
+    playDirection: number;
+    playCount: number;
+    isPaused: boolean;
+    autoplay: boolean;
+    loop: boolean | number;
+    renderer: any;
+    animationID: string;
+    assetsPath: string;
+    timeCompleted: number;
+    segmentPos: number;
+    isSubframeEnabled: boolean;
+    segments: FrameSegment | FrameSegment[];
+    play(name?: string): void;
+    stop(name?: string): void;
+    togglePause(name?: string): void;
+    destroy(name?: string): void;
+    pause(name?: string): void;
+    goToAndStop(value: number | string, isFrame?: boolean, name?: string): void;
+    goToAndPlay(value: number | string, isFrame?: boolean, name?: string): void;
+    includeLayers(data: any): void;
+    setSegment(init: number, end: number): void;
+    resetSegments(forceFlag: boolean): void;
+    hide(): void;
+    show(): void;
+    resize(): void;
+    setSpeed(speed: number): void;
+    setDirection(direction: PlaybackDirection): void;
+    setLoop(isLooping: boolean): void;
+    playSegments(segments: FrameSegment | FrameSegment[], forceFlag?: boolean): void;
+    setSubframe(useSubFrames: boolean): void;
+    getDuration(inFrames?: boolean): number;
+    triggerEvent(name: string, args: any): void;
+    addEventListener(name: string, callback: any): () => void;
+    removeEventListener(name: string, callback?: any): void;
+};
+/**
+ * Supported property types for Lottie animations.
+ */
+export type LottiePropertyType = 'color' | 'slider' | 'point' | 'checkbox' | 'feature';
+/**
+ * Describes a property found in the animation.
+ */
+export interface LottieProperty {
+    name: string;
+    path: string;
+    type: LottiePropertyType;
+    value: any;
+}
+/**
+ * Supported stroke weights for icons.
+ */
+export type Stroke = 1 | 2 | 3 | 'light' | 'regular' | 'bold';
+/**
+ * RGB color tuple in Lottie format: [r, g, b].
+ */
+export type RgbTuple = [number, number, number];
+/**
+ * RGB color as an object.
+ */
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Object storing multiple named colors.
+ *
+ * Example:
+ * {
+ *     primary: 'red',
+ *     secondary: '#ff0000',
+ * }
+ */
+export interface ColorMap {
+    [key: string]: string;
+}
+/**
+ * Animation segment as a tuple: [startFrame, endFrame].
+ */
+export type FrameSegment = [number, number];
+/**
+ * Animation playback direction: 1 (forward) or -1 (backward).
+ */
+export type PlaybackDirection = 1 | -1;
+/**
+ * Supported player event names.
+ */
+export type EventName = 'ready' | 'complete' | 'frame' | 'refresh';
+/**
+ * Player event callback type.
+ */
+export type EventHandler = () => void;
+/**
+ * Properties for legacy icons.
+ */
+export interface LegacyIconProperties {
+    /**
+     * Scale for legacy icons.
+     */
+    scale?: number;
+    /**
+     * Axis x for legacy icons.
+     */
+    axisX?: number;
+    /**
+     * Axis y for legacy icons.
+     */
+    axisY?: number;
+}
+/**
+ * Properties for customizing icons.
+ *
+ * Example:
+ * {
+ *     stroke: 'bold',
+ *     colors: {
+ *         primary: 'red',
+ *     },
+ * }
+ */
+export interface IconProperties {
+    /**
+     * State (motion type) of the icon. States allow switching between multiple animations built into a single icon file.
+     */
+    state?: string;
+    /**
+     * Colors.
+     */
+    colors?: ColorMap;
+    /**
+     * Stroke.
+     */
+    stroke?: Stroke;
+}
+/**
+ * Details of a single animation state.
+ */
+export interface IconState {
+    name: string;
+    time: number;
+    duration: number;
+    params: string[];
+    default?: boolean;
+}

package/dist/src/lottie.d.ts

@@ -0,0 +1,48 @@
+import { LottieAnimationInstance, LottieData, LottieProperty, RgbColor, RgbTuple } from './interfaces';
+/**
+ * Converts an RGB color object to a hexadecimal color string.
+ * @param value Color object with r, g, b properties.
+ * @returns Hexadecimal color string (e.g., "#ff0000").
+ */
+export declare function rgbToHex(value: RgbColor): string;
+/**
+ * Converts a hexadecimal color string to an RGB color object.
+ * @param hex Hexadecimal color string (with or without "#").
+ * @returns RgbColor object with r, g, b properties.
+ */
+export declare function hexToRgb(hex: string): RgbColor;
+/**
+ * Converts a hexadecimal color string to an RGB tuple in the 0-1 range.
+ * @param hex Hexadecimal color string.
+ * @returns RgbTuple with values normalized to 0-1.
+ */
+export declare function hexToTupleColor(hex: string): RgbTuple;
+/**
+ * Converts an RGB tuple (0-1 range) to a hexadecimal color string.
+ * @param value RgbTuple with values in the 0-1 range.
+ * @returns Hexadecimal color string.
+ */
+export declare function tupleColorToHex(value: RgbTuple): string;
+/**
+ * Extracts all supported customizable properties from Lottie data.
+ * @param data Lottie animation data.
+ * @param options Extraction options (e.g., lottieInstance: boolean).
+ * @returns Array of LottieProperty objects describing customizable properties.
+ */
+export declare function extractLottieProperties(data: LottieData, { lottieInstance }?: {
+    lottieInstance?: boolean;
+}): LottieProperty[];
+/**
+ * Resets Lottie data or animation instance to default values for the given properties.
+ * @param data Lottie data or animation instance to reset.
+ * @param properties Array of properties to reset.
+ */
+export declare function resetLottieProperties(data: LottieData | LottieAnimationInstance, properties: LottieProperty[]): void;
+/**
+ * Updates Lottie data or animation instance with a new value for the given properties.
+ * Handles color, point, and other property types accordingly.
+ * @param data Lottie data or animation instance to update.
+ * @param properties Array of properties to update.
+ * @param value New value to set for each property.
+ */
+export declare function updateLottieProperties(data: LottieData | LottieAnimationInstance, properties: LottieProperty[], value: any): void;

package/dist/src/parsers.d.ts

@@ -0,0 +1,40 @@
+import { ColorMap } from './interfaces';
+/**
+ * Returns a hexadecimal color string for a given color name or hex code.
+ *
+ * Example:
+ * ```js
+ * parseColor('red'); // "#ff0000"
+ * parseColor('#0f0'); // "#00ff00"
+ * ```
+ *
+ * @param colorName Color name (e.g., "red") or hex string (e.g., "#ff0000" or "#0f0").
+ * @returns Hexadecimal color string in the format "#rrggbb".
+ */
+export declare function parseColor(colorName: string): string;
+/**
+ * Parses a colors attribute string into a ColorMap object.
+ *
+ * Example:
+ * ```js
+ * parseColors('primary:red,secondary:#00ff00');
+ * // Returns: { primary: '#ff0000', secondary: '#00ff00' }
+ * ```
+ *
+ * @param colors Colors defined as a comma-separated string (e.g., "primary:red,secondary:#00ff00").
+ * @returns Object mapping color names to hex strings, or undefined if input is invalid.
+ */
+export declare function parseColors(colors: any): ColorMap | undefined;
+/**
+ * Parses a stroke attribute value to a supported numeric range.
+ *
+ * @param value Stroke value as a string or number ("light", 1, "1", "regular", 2, "2", "bold", 3, "3").
+ * @returns Stroke value as 1, 2, or 3, or undefined if not valid.
+ */
+export declare function parseStroke(value: any): (1 | 2 | 3 | undefined);
+/**
+ * Parse state attribute.
+ * @param value State value.
+ * @returns Returns the state as a string if valid, otherwise undefined.
+ */
+export declare function parseState(value: any): (string | undefined);