@lordicon/web 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,394 +1,233 @@
1
- /**
2
- * Object storing multiple named colors.
3
- *
4
- * Example:
5
- * {
6
- * primary: 'red',
7
- * secondary: '#ff0000',
8
- * }
9
- */
10
- export declare interface ColorMap {
11
- [key: string]: string;
12
- }
13
-
14
- /**
15
- * Player event callback type.
16
- */
17
- export declare type EventHandler = () => void;
18
-
19
- /**
20
- * Supported player event names.
21
- */
22
- export declare type EventName = 'ready' | 'complete' | 'frame' | 'refresh';
23
-
24
- /**
25
- * Animation segment as a tuple: [startFrame, endFrame].
26
- */
27
- declare type FrameSegment = [number, number];
28
-
29
- /**
30
- * Properties for customizing icons.
31
- *
32
- * Example:
33
- * {
34
- * stroke: 'bold',
35
- * colors: {
36
- * primary: 'red',
37
- * },
38
- * }
39
- */
40
- export declare interface IconProperties {
41
- /**
42
- * State (motion type) of the icon. States allow switching between multiple animations built into a single icon file.
43
- */
44
- state?: string;
45
- /**
46
- * Colors.
47
- */
48
- colors?: ColorMap;
49
- /**
50
- * Stroke.
51
- */
52
- stroke?: Stroke;
53
- }
54
-
55
- /**
56
- * Details of a single animation state.
57
- */
58
- export declare interface IconState {
59
- name: string;
60
- time: number;
61
- duration: number;
62
- params: string[];
63
- default?: boolean;
64
- }
65
-
66
- /**
67
- * Properties for legacy icons.
68
- */
69
- export declare interface LegacyIconProperties {
70
- /**
71
- * Scale for legacy icons.
72
- */
73
- scale?: number;
74
- /**
75
- * Axis x for legacy icons.
76
- */
77
- axisX?: number;
78
- /**
79
- * Axis y for legacy icons.
80
- */
81
- axisY?: number;
82
- }
83
-
84
- /**
85
- * Represents a single Lottie animation instance from `@lordicon/internal`.
86
- * Contains the current state and methods for controlling playback.
87
- */
88
- declare type LottieAnimationInstance = {
89
- name: string;
90
- isLoaded: boolean;
91
- currentFrame: number;
92
- currentRawFrame: number;
93
- firstFrame: number;
94
- totalFrames: number;
95
- frameRate: number;
96
- frameMult: number;
97
- playSpeed: number;
98
- playDirection: number;
99
- playCount: number;
100
- isPaused: boolean;
101
- autoplay: boolean;
102
- loop: boolean | number;
103
- renderer: any;
104
- animationID: string;
105
- assetsPath: string;
106
- timeCompleted: number;
107
- segmentPos: number;
108
- isSubframeEnabled: boolean;
109
- segments: FrameSegment | FrameSegment[];
110
- play(name?: string): void;
111
- stop(name?: string): void;
112
- togglePause(name?: string): void;
113
- destroy(name?: string): void;
114
- pause(name?: string): void;
115
- goToAndStop(value: number | string, isFrame?: boolean, name?: string): void;
116
- goToAndPlay(value: number | string, isFrame?: boolean, name?: string): void;
117
- includeLayers(data: any): void;
118
- setSegment(init: number, end: number): void;
119
- resetSegments(forceFlag: boolean): void;
120
- hide(): void;
121
- show(): void;
122
- resize(): void;
123
- setSpeed(speed: number): void;
124
- setDirection(direction: PlaybackDirection_2): void;
125
- setLoop(isLooping: boolean): void;
126
- playSegments(segments: FrameSegment | FrameSegment[], forceFlag?: boolean): void;
127
- setSubframe(useSubFrames: boolean): void;
128
- getDuration(inFrames?: boolean): number;
129
- triggerEvent(name: string, args: any): void;
130
- addEventListener(name: string, callback: any): () => void;
131
- removeEventListener(name: string, callback?: any): void;
132
- };
133
-
134
- /**
135
- * Icon animation data in Lottie JSON format.
136
- * This player is optimized for icons from [Lordicon](https://lordicon.com/).
137
- */
138
- declare type LottieData = any;
139
-
140
- /**
141
- * Describes a property found in the animation.
142
- */
143
- declare interface LottieProperty {
144
- name: string;
145
- path: string;
146
- type: LottiePropertyType;
147
- value: any;
148
- }
149
-
150
- /**
151
- * Supported property types for Lottie animations.
152
- */
153
- declare type LottiePropertyType = 'color' | 'slider' | 'point' | 'checkbox' | 'feature';
154
-
155
- /**
156
- * Animation playback direction: 1 (forward) or -1 (backward).
157
- */
158
- declare type PlaybackDirection_2 = 1 | -1;
159
- export { PlaybackDirection_2 as PlaybackDirection }
160
-
161
- /**
162
- * Player class for controlling and customizing Lottie-based icons.
163
- */
164
- export declare class Player {
165
- protected _container: HTMLElement;
166
- protected _iconData: any;
167
- protected _initialProperties: IconProperties & LegacyIconProperties;
168
- protected _lottieInstance?: LottieAnimationInstance;
169
- protected _ready: boolean;
170
- protected _colorsProxy?: any;
171
- protected _direction: PlaybackDirection_2;
172
- protected _speed: number;
173
- protected _lottieProperties?: LottieProperty[];
174
- protected _eventHandlers: any;
175
- protected _state?: IconState;
176
- protected _availableStates: IconState[];
177
- protected _animationFrameRate: number;
178
- /**
179
- * Creates a new Player instance.
180
- * @param container The DOM element where the animation will be rendered.
181
- * @param data Lottie animation data.
182
- * @param properties Initial icon properties (colors, stroke, state, etc.).
183
- * @param options Additional options (e.g., autoInit).
184
- */
185
- constructor(container: HTMLElement, data: LottieData, properties?: IconProperties & LegacyIconProperties, options?: {
186
- autoInit?: boolean;
187
- });
188
- /**
189
- * Initializes the player and connects it to the DOM element.
190
- * Throws an error if already initialized.
191
- */
192
- init(): void;
193
- /**
194
- * Destroys the player and releases all resources.
195
- * Throws an error if not initialized.
196
- */
197
- destroy(): void;
198
- /**
199
- * Registers an event listener for a player event.
200
- * @param name Event name (e.g., 'complete', 'frame', 'ready').
201
- * @param handler Handler function to call when the event is triggered.
202
- * @returns Function to remove the listener.
203
- */
204
- addEventListener(name: EventName, handler: EventHandler): () => void;
205
- /**
206
- * Removes an event listener for a player event.
207
- * @param name Event name.
208
- * @param handler Handler function to remove. If not provided, removes all handlers for the event.
209
- */
210
- removeEventListener(name: EventName, handler?: EventHandler): void;
211
- /**
212
- * Triggers a player event and invokes all registered callbacks.
213
- * @param name Event name.
214
- * @param args Optional arguments to pass to the callbacks.
215
- */
216
- protected triggerEvent(name: EventName, args?: any): void;
217
- /**
218
- * Forces a re-render of the animation.
219
- */
220
- protected refresh(): void;
221
- /**
222
- * Starts playing the animation from the current frame.
223
- * Note: If the animation is finished, it cannot be played again from the last frame.
224
- */
225
- play(): void;
226
- /**
227
- * Plays the animation from the beginning of the current state or from the start if no state is set.
228
- */
229
- playFromStart(): void;
230
- /**
231
- * Pauses the animation at the current frame.
232
- */
233
- pause(): void;
234
- /**
235
- * Stop the animation.
236
- */
237
- stop(): void;
238
- /**
239
- * Moves the animation to a specific frame and stops.
240
- * @param frame Frame number to seek to.
241
- */
242
- seek(frame: number): void;
243
- /**
244
- * Moves the animation to the first frame and stops.
245
- */
246
- seekToStart(): void;
247
- /**
248
- * Moves the animation to the last frame and stops.
249
- */
250
- seekToEnd(): void;
251
- /**
252
- * Sets the animation segment to play.
253
- * If no segment is provided, resets to the default segment.
254
- * @param segment Optional segment as [start, end] frame numbers.
255
- */
256
- switchSegment(segment?: [number, number]): void;
257
- /**
258
- * Sets multiple icon properties at once.
259
- * Any property not provided will be reset to its default value.
260
- * @param properties Properties to assign.
261
- */
262
- set properties(properties: IconProperties);
263
- /**
264
- * Gets the current icon properties (colors, stroke, state).
265
- * @returns The current properties.
266
- */
267
- get properties(): IconProperties;
268
- /**
269
- * Sets all customizable colors at once.
270
- * Pass null to reset all colors to default.
271
- * @param colors Color map or null.
272
- */
273
- set colors(colors: ColorMap | null);
274
- /**
275
- * Provides a proxy for reading or updating individual colors by name.
276
- *
277
- * Example:
278
- * player.colors.primary = '#ff0000';
279
- * delete player.colors.secondary;
280
- */
281
- get colors(): ColorMap;
282
- /**
283
- * Sets the stroke width for the icon.
284
- * Pass null to reset to default.
285
- * @param stroke Stroke value or null.
286
- */
287
- set stroke(stroke: Stroke | null);
288
- /**
289
- * Gets the current stroke width of the icon.
290
- * @returns Stroke value or null if not set.
291
- */
292
- get stroke(): Stroke | null;
293
- /**
294
- * Sets the current state (animation segment) of the icon.
295
- * If the state does not exist, falls back to the default state.
296
- * @param state State name or null for default.
297
- */
298
- set state(state: string | null);
299
- /**
300
- * Gets the current state (animation segment) of the icon.
301
- * @returns State name or null if not set.
302
- */
303
- get state(): string | null;
304
- /**
305
- * Sets the playback speed of the animation.
306
- * @param speed Playback speed (1 = normal).
307
- */
308
- set speed(speed: number);
309
- /**
310
- * Gets the current playback speed.
311
- * @returns Playback speed.
312
- */
313
- get speed(): number;
314
- /**
315
- * Sets the playback direction.
316
- * @param direction 1 for forward, -1 for reverse.
317
- */
318
- set direction(direction: PlaybackDirection_2);
319
- /**
320
- * Gets the current playback direction.
321
- * @returns Playback direction.
322
- */
323
- get direction(): PlaybackDirection_2;
324
- /**
325
- * Enables or disables looping of the animation.
326
- * @param loop True to loop, false otherwise.
327
- */
328
- set loop(loop: boolean);
329
- /**
330
- * Gets whether the animation is set to loop.
331
- * @returns True if looping, false otherwise.
332
- */
333
- get loop(): boolean;
334
- /**
335
- * Sets the current frame of the animation.
336
- * @param frame Frame number.
337
- */
338
- set frame(frame: number);
339
- /**
340
- * Gets the current frame of the animation.
341
- * @returns Current frame number.
342
- */
343
- get frame(): number;
344
- /**
345
- * Gets the list of available states for the icon.
346
- * @returns Array of available states.
347
- */
348
- get availableStates(): IconState[];
349
- /**
350
- * Gets the frame rate of the animation.
351
- * @returns Frame rate in frames per second.
352
- */
353
- get frameRate(): number;
354
- /**
355
- * Returns true if the animation is currently playing.
356
- */
357
- get playing(): boolean;
358
- /**
359
- * Returns true if the player is ready for interaction.
360
- */
361
- get ready(): boolean;
362
- /**
363
- * Gets the total number of frames in the animation.
364
- * @returns Frame count.
365
- */
366
- get frameCount(): number;
367
- /**
368
- * Gets the current segment of the animation as [start, end] frame numbers.
369
- * @returns Segment as [start, end].
370
- */
371
- get segment(): [number, number];
372
- /**
373
- * Gets the duration of the animation in seconds.
374
- * @returns Duration in seconds.
375
- */
376
- get duration(): number;
377
- /**
378
- * Provides access to the underlying Lottie player instance.
379
- * @returns LottieAnimationInstance.
380
- */
381
- get lottieInstance(): LottieAnimationInstance | undefined;
382
- /**
383
- * Gets all customizable properties for the icon.
384
- * @returns Array of LottieProperty.
385
- */
386
- get lottieProperties(): LottieProperty[];
387
- }
388
-
389
- /**
390
- * Supported stroke weights for icons.
391
- */
392
- export declare type Stroke = 1 | 2 | 3 | 'light' | 'regular' | 'bold';
393
-
394
- export { }
1
+ import { AnimationConfig } from '@lordicon/internal';
2
+ import { ColorMap, EventHandler, EventName, IconProperties, IconState, LegacyIconProperties, LottieAnimationInstance, LottieData, LottieProperty, PlaybackDirection, Stroke } from './interfaces';
3
+ /**
4
+ * LottieOptions type represents the configuration options for the Lottie player.
5
+ */
6
+ export type LottieOptions = Omit<AnimationConfig, 'container'>;
7
+ /**
8
+ * Player class for controlling and customizing Lottie-based icons.
9
+ */
10
+ export declare class Player {
11
+ protected _container: HTMLElement;
12
+ protected _iconData: any;
13
+ protected _initialProperties: IconProperties & LegacyIconProperties;
14
+ protected _lottieInstance?: LottieAnimationInstance;
15
+ protected _ready: boolean;
16
+ protected _colorsProxy?: any;
17
+ protected _direction: PlaybackDirection;
18
+ protected _speed: number;
19
+ protected _lottieProperties?: LottieProperty[];
20
+ protected _eventHandlers: any;
21
+ protected _state?: IconState;
22
+ protected _availableStates: IconState[];
23
+ protected _animationFrameRate: number;
24
+ /**
25
+ * Creates a new Player instance.
26
+ * @param container The DOM element where the animation will be rendered.
27
+ * @param data Lottie animation data.
28
+ * @param properties Initial icon properties (colors, stroke, state, etc.).
29
+ * @param options Additional options (e.g., autoInit).
30
+ */
31
+ constructor(container: HTMLElement, data: LottieData, properties?: IconProperties & LegacyIconProperties, options?: {
32
+ autoInit?: boolean;
33
+ });
34
+ /**
35
+ * Initializes the player and connects it to the DOM element.
36
+ * Throws an error if already initialized.
37
+ */
38
+ init(): void;
39
+ /**
40
+ * Destroys the player and releases all resources.
41
+ * Throws an error if not initialized.
42
+ */
43
+ destroy(): void;
44
+ /**
45
+ * Registers an event listener for a player event.
46
+ * @param name Event name (e.g., 'complete', 'frame', 'ready').
47
+ * @param handler Handler function to call when the event is triggered.
48
+ * @returns Function to remove the listener.
49
+ */
50
+ addEventListener(name: EventName, handler: EventHandler): () => void;
51
+ /**
52
+ * Removes an event listener for a player event.
53
+ * @param name Event name.
54
+ * @param handler Handler function to remove. If not provided, removes all handlers for the event.
55
+ */
56
+ removeEventListener(name: EventName, handler?: EventHandler): void;
57
+ /**
58
+ * Triggers a player event and invokes all registered callbacks.
59
+ * @param name Event name.
60
+ * @param args Optional arguments to pass to the callbacks.
61
+ */
62
+ protected triggerEvent(name: EventName, args?: any): void;
63
+ /**
64
+ * Forces a re-render of the animation.
65
+ */
66
+ protected refresh(): void;
67
+ /**
68
+ * Starts playing the animation from the current frame.
69
+ * Note: If the animation is finished, it cannot be played again from the last frame.
70
+ */
71
+ play(): void;
72
+ /**
73
+ * Plays the animation from the beginning of the current state or from the start if no state is set.
74
+ */
75
+ playFromStart(): void;
76
+ /**
77
+ * Pauses the animation at the current frame.
78
+ */
79
+ pause(): void;
80
+ /**
81
+ * Stop the animation.
82
+ */
83
+ stop(): void;
84
+ /**
85
+ * Moves the animation to a specific frame and stops.
86
+ * @param frame Frame number to seek to.
87
+ */
88
+ seek(frame: number): void;
89
+ /**
90
+ * Moves the animation to the first frame and stops.
91
+ */
92
+ seekToStart(): void;
93
+ /**
94
+ * Moves the animation to the last frame and stops.
95
+ */
96
+ seekToEnd(): void;
97
+ /**
98
+ * Sets the animation segment to play.
99
+ * If no segment is provided, resets to the default segment.
100
+ * @param segment Optional segment as [start, end] frame numbers.
101
+ */
102
+ switchSegment(segment?: [number, number]): void;
103
+ /**
104
+ * Sets multiple icon properties at once.
105
+ * Any property not provided will be reset to its default value.
106
+ * @param properties Properties to assign.
107
+ */
108
+ set properties(properties: IconProperties);
109
+ /**
110
+ * Gets the current icon properties (colors, stroke, state).
111
+ * @returns The current properties.
112
+ */
113
+ get properties(): IconProperties;
114
+ /**
115
+ * Sets all customizable colors at once.
116
+ * Pass null to reset all colors to default.
117
+ * @param colors Color map or null.
118
+ */
119
+ set colors(colors: ColorMap | null);
120
+ /**
121
+ * Provides a proxy for reading or updating individual colors by name.
122
+ *
123
+ * Example:
124
+ * player.colors.primary = '#ff0000';
125
+ * delete player.colors.secondary;
126
+ */
127
+ get colors(): ColorMap;
128
+ /**
129
+ * Sets the stroke width for the icon.
130
+ * Pass null to reset to default.
131
+ * @param stroke Stroke value or null.
132
+ */
133
+ set stroke(stroke: Stroke | null);
134
+ /**
135
+ * Gets the current stroke width of the icon.
136
+ * @returns Stroke value or null if not set.
137
+ */
138
+ get stroke(): Stroke | null;
139
+ /**
140
+ * Sets the current state (animation segment) of the icon.
141
+ * If the state does not exist, falls back to the default state.
142
+ * @param state State name or null for default.
143
+ */
144
+ set state(state: string | null);
145
+ /**
146
+ * Gets the current state (animation segment) of the icon.
147
+ * @returns State name or null if not set.
148
+ */
149
+ get state(): string | null;
150
+ /**
151
+ * Sets the playback speed of the animation.
152
+ * @param speed Playback speed (1 = normal).
153
+ */
154
+ set speed(speed: number);
155
+ /**
156
+ * Gets the current playback speed.
157
+ * @returns Playback speed.
158
+ */
159
+ get speed(): number;
160
+ /**
161
+ * Sets the playback direction.
162
+ * @param direction 1 for forward, -1 for reverse.
163
+ */
164
+ set direction(direction: PlaybackDirection);
165
+ /**
166
+ * Gets the current playback direction.
167
+ * @returns Playback direction.
168
+ */
169
+ get direction(): PlaybackDirection;
170
+ /**
171
+ * Enables or disables looping of the animation.
172
+ * @param loop True to loop, false otherwise.
173
+ */
174
+ set loop(loop: boolean);
175
+ /**
176
+ * Gets whether the animation is set to loop.
177
+ * @returns True if looping, false otherwise.
178
+ */
179
+ get loop(): boolean;
180
+ /**
181
+ * Sets the current frame of the animation.
182
+ * @param frame Frame number.
183
+ */
184
+ set frame(frame: number);
185
+ /**
186
+ * Gets the current frame of the animation.
187
+ * @returns Current frame number.
188
+ */
189
+ get frame(): number;
190
+ /**
191
+ * Gets the list of available states for the icon.
192
+ * @returns Array of available states.
193
+ */
194
+ get availableStates(): IconState[];
195
+ /**
196
+ * Gets the frame rate of the animation.
197
+ * @returns Frame rate in frames per second.
198
+ */
199
+ get frameRate(): number;
200
+ /**
201
+ * Returns true if the animation is currently playing.
202
+ */
203
+ get playing(): boolean;
204
+ /**
205
+ * Returns true if the player is ready for interaction.
206
+ */
207
+ get ready(): boolean;
208
+ /**
209
+ * Gets the total number of frames in the animation.
210
+ * @returns Frame count.
211
+ */
212
+ get frameCount(): number;
213
+ /**
214
+ * Gets the current segment of the animation as [start, end] frame numbers.
215
+ * @returns Segment as [start, end].
216
+ */
217
+ get segment(): [number, number];
218
+ /**
219
+ * Gets the duration of the animation in seconds.
220
+ * @returns Duration in seconds.
221
+ */
222
+ get duration(): number;
223
+ /**
224
+ * Provides access to the underlying Lottie player instance.
225
+ * @returns LottieAnimationInstance.
226
+ */
227
+ get lottieInstance(): LottieAnimationInstance | undefined;
228
+ /**
229
+ * Gets all customizable properties for the icon.
230
+ * @returns Array of LottieProperty.
231
+ */
232
+ get lottieProperties(): LottieProperty[];
233
+ }