@aarsteinmedia/dotlottie-player 2.2.9 → 2.2.11
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.
- package/dist/cjs/index.js +14 -130
- package/dist/custom-elements.json +1276 -0
- package/dist/esm/index.js +14 -130
- package/dist/index.d.ts +3 -0
- package/dist/index.js +8 -8
- package/package.json +18 -12
package/dist/esm/index.js
CHANGED
|
@@ -253,9 +253,7 @@ const addExt = (ext, str)=>{
|
|
|
253
253
|
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
|
|
254
254
|
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), strToU8 = (str)=>{
|
|
255
255
|
const u8 = new Uint8Array(str.length);
|
|
256
|
-
for
|
|
257
|
-
...Array(str.length)
|
|
258
|
-
].entries()){
|
|
256
|
+
for(let i = 0; i < str.length; i++){
|
|
259
257
|
u8[i] = str.charCodeAt(i);
|
|
260
258
|
}
|
|
261
259
|
return u8;
|
|
@@ -292,129 +290,9 @@ const addExt = (ext, str)=>{
|
|
|
292
290
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
293
291
|
};
|
|
294
292
|
|
|
295
|
-
var name = "@aarsteinmedia/dotlottie-player";
|
|
296
|
-
var version = "2.2.9";
|
|
297
|
-
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
298
|
-
var exports = {
|
|
299
|
-
".": {
|
|
300
|
-
"import": "./dist/esm/index.js",
|
|
301
|
-
node: "./dist/esm/index.js",
|
|
302
|
-
require: "./dist/cjs/index.js",
|
|
303
|
-
types: "./dist/index.d.ts"
|
|
304
|
-
}
|
|
305
|
-
};
|
|
306
|
-
var main = "./dist/esm/index.js";
|
|
307
|
-
var unpkg = "./dist/index.js";
|
|
308
|
-
var module = "./dist/esm/index.js";
|
|
309
|
-
var types = "./dist/index.d.ts";
|
|
310
|
-
var type = "module";
|
|
311
|
-
var homepage = "https://www.aarstein.media/en/dotlottie-player";
|
|
312
|
-
var repository = {
|
|
313
|
-
url: "https://github.com/aarsteinmedia/dotlottie-player.git",
|
|
314
|
-
type: "git"
|
|
315
|
-
};
|
|
316
|
-
var bugs = "https://github.com/aarsteinmedia/dotlottie-player/issues";
|
|
317
|
-
var author = {
|
|
318
|
-
name: "Johan Martin Aarstein",
|
|
319
|
-
email: "johan@aarstein.media",
|
|
320
|
-
url: "https://www.aarstein.media",
|
|
321
|
-
organization: "Aarstein Media"
|
|
322
|
-
};
|
|
323
|
-
var license = "GPL-2.0-or-later";
|
|
324
|
-
var scripts = {
|
|
325
|
-
build: "pnpm cleanup && rollup -c",
|
|
326
|
-
"build:types": "pnpm cleanup:types && tsc",
|
|
327
|
-
"build:cem": "npx cem analyze --config 'cem.config.mjs'",
|
|
328
|
-
prod: "pnpm build:types && pnpm build && pnpm build:cem",
|
|
329
|
-
dev: "pnpm cleanup && rollup -c --watch",
|
|
330
|
-
lint: "tsc && eslint . --ext .ts,.js",
|
|
331
|
-
"lint:fix": "eslint . --ext .ts,.js --fix",
|
|
332
|
-
"cleanup:types": "shx rm -rf types && shx mkdir types",
|
|
333
|
-
cleanup: "shx rm -rf dist && shx mkdir dist"
|
|
334
|
-
};
|
|
335
|
-
var dependencies = {
|
|
336
|
-
fflate: "^0.8.1",
|
|
337
|
-
lit: "^2.8.0",
|
|
338
|
-
"lottie-web": "^5.12.2"
|
|
339
|
-
};
|
|
340
|
-
var peerDependencies = {
|
|
341
|
-
"@types/react": ">= 16.0.0"
|
|
342
|
-
};
|
|
343
|
-
var devDependencies = {
|
|
344
|
-
"@custom-elements-manifest/analyzer": "^0.6.9",
|
|
345
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
346
|
-
"@rollup/plugin-json": "^6.1.0",
|
|
347
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
348
|
-
"@rollup/plugin-replace": "^5.0.5",
|
|
349
|
-
"@swc/core": "^1.3.101",
|
|
350
|
-
"@types/node": "^20.10.5",
|
|
351
|
-
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
352
|
-
"@typescript-eslint/parser": "^5.62.0",
|
|
353
|
-
eslint: "^8.56.0",
|
|
354
|
-
"eslint-plugin-lit": "^1.11.0",
|
|
355
|
-
rollup: "^3.29.4",
|
|
356
|
-
"rollup-plugin-dts": "^6.1.0",
|
|
357
|
-
"rollup-plugin-html-literals": "^1.1.8",
|
|
358
|
-
"rollup-plugin-summary": "^2.0.0",
|
|
359
|
-
"rollup-plugin-swc3": "^0.9.1",
|
|
360
|
-
shx: "^0.3.4",
|
|
361
|
-
"ts-lit-plugin": "^1.2.1",
|
|
362
|
-
typescript: "^5.3.3"
|
|
363
|
-
};
|
|
364
|
-
var customElements = "dist/custom-elements.json";
|
|
365
|
-
var files = [
|
|
366
|
-
"dist",
|
|
367
|
-
"README.md"
|
|
368
|
-
];
|
|
369
|
-
var keywords = [
|
|
370
|
-
"lottie",
|
|
371
|
-
"dotlottie",
|
|
372
|
-
"animation",
|
|
373
|
-
"web component",
|
|
374
|
-
"component",
|
|
375
|
-
"lit-element",
|
|
376
|
-
"svg",
|
|
377
|
-
"vector",
|
|
378
|
-
"player"
|
|
379
|
-
];
|
|
380
|
-
var publishConfig = {
|
|
381
|
-
access: "public"
|
|
382
|
-
};
|
|
383
|
-
var engines = {
|
|
384
|
-
node: ">= 7.6.0"
|
|
385
|
-
};
|
|
386
|
-
var funding = {
|
|
387
|
-
type: "paypal",
|
|
388
|
-
url: "https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"
|
|
389
|
-
};
|
|
390
|
-
var pkg = {
|
|
391
|
-
name: name,
|
|
392
|
-
version: version,
|
|
393
|
-
description: description,
|
|
394
|
-
exports: exports,
|
|
395
|
-
main: main,
|
|
396
|
-
unpkg: unpkg,
|
|
397
|
-
module: module,
|
|
398
|
-
types: types,
|
|
399
|
-
type: type,
|
|
400
|
-
homepage: homepage,
|
|
401
|
-
repository: repository,
|
|
402
|
-
bugs: bugs,
|
|
403
|
-
author: author,
|
|
404
|
-
license: license,
|
|
405
|
-
scripts: scripts,
|
|
406
|
-
dependencies: dependencies,
|
|
407
|
-
peerDependencies: peerDependencies,
|
|
408
|
-
devDependencies: devDependencies,
|
|
409
|
-
customElements: customElements,
|
|
410
|
-
files: files,
|
|
411
|
-
keywords: keywords,
|
|
412
|
-
publishConfig: publishConfig,
|
|
413
|
-
engines: engines,
|
|
414
|
-
funding: funding
|
|
415
|
-
};
|
|
293
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.2.11";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
416
294
|
|
|
417
|
-
var
|
|
295
|
+
var css_248z = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
|
|
418
296
|
|
|
419
297
|
function _ts_decorate(decorators, target, key, desc) {
|
|
420
298
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -568,7 +446,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
568
446
|
this.currentState = PlayerState.Error;
|
|
569
447
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
570
448
|
});
|
|
571
|
-
if (this.container) {
|
|
449
|
+
if (this.container && this.hover) {
|
|
572
450
|
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
573
451
|
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
574
452
|
}
|
|
@@ -790,14 +668,20 @@ class DotLottiePlayer extends LitElement {
|
|
|
790
668
|
if (curr?.mode !== undefined) {
|
|
791
669
|
if (curr.mode === PlayMode.Normal) {
|
|
792
670
|
curr.mode = PlayMode.Bounce;
|
|
671
|
+
this._isBounce = true;
|
|
793
672
|
} else {
|
|
794
673
|
curr.mode = PlayMode.Normal;
|
|
674
|
+
this._isBounce = false;
|
|
795
675
|
}
|
|
796
|
-
|
|
676
|
+
return;
|
|
677
|
+
}
|
|
678
|
+
if (this.mode === PlayMode.Normal) {
|
|
797
679
|
this.mode = PlayMode.Bounce;
|
|
798
|
-
|
|
799
|
-
|
|
680
|
+
this._isBounce = true;
|
|
681
|
+
return;
|
|
800
682
|
}
|
|
683
|
+
this.mode = PlayMode.Normal;
|
|
684
|
+
this._isBounce = false;
|
|
801
685
|
}
|
|
802
686
|
_toggleSettings(flag) {
|
|
803
687
|
if (flag === undefined) {
|
|
@@ -846,7 +730,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
846
730
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
847
731
|
}
|
|
848
732
|
static get styles() {
|
|
849
|
-
return
|
|
733
|
+
return css_248z;
|
|
850
734
|
}
|
|
851
735
|
connectedCallback() {
|
|
852
736
|
super.connectedCallback();
|
package/dist/index.d.ts
CHANGED
|
@@ -143,6 +143,8 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
143
143
|
load(src: string | LottieJSON): Promise<void>;
|
|
144
144
|
getManifest(): LottieManifest;
|
|
145
145
|
private _addEventListeners;
|
|
146
|
+
private _mouseEnter;
|
|
147
|
+
private _mouseLeave;
|
|
146
148
|
private _onVisibilityChange;
|
|
147
149
|
private _handleSeekChange;
|
|
148
150
|
private _isLottie;
|
|
@@ -172,6 +174,7 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
172
174
|
prev(): void;
|
|
173
175
|
convert(typeCheck?: boolean, manifest?: LottieManifest, animations?: LottieJSON[], fileName?: string, download?: boolean): Promise<void | ArrayBuffer> | undefined;
|
|
174
176
|
static get styles(): CSSResult;
|
|
177
|
+
constructor();
|
|
175
178
|
connectedCallback(): void;
|
|
176
179
|
protected firstUpdated(): Promise<void>;
|
|
177
180
|
disconnectedCallback(): void;
|