@aarsteinmedia/dotlottie-player 2.2.9 → 2.2.10
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 +13 -127
- package/dist/custom-elements.json +1276 -0
- package/dist/esm/index.js +13 -127
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -1
- package/package.json +16 -10
package/dist/esm/index.js
CHANGED
|
@@ -292,129 +292,9 @@ const addExt = (ext, str)=>{
|
|
|
292
292
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
293
293
|
};
|
|
294
294
|
|
|
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
|
-
};
|
|
295
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.2.10";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.101","@types/node":"^20.10.5","@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
296
|
|
|
417
|
-
var
|
|
297
|
+
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
298
|
|
|
419
299
|
function _ts_decorate(decorators, target, key, desc) {
|
|
420
300
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -568,7 +448,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
568
448
|
this.currentState = PlayerState.Error;
|
|
569
449
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
570
450
|
});
|
|
571
|
-
if (this.container) {
|
|
451
|
+
if (this.container && this.hover) {
|
|
572
452
|
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
573
453
|
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
574
454
|
}
|
|
@@ -790,14 +670,20 @@ class DotLottiePlayer extends LitElement {
|
|
|
790
670
|
if (curr?.mode !== undefined) {
|
|
791
671
|
if (curr.mode === PlayMode.Normal) {
|
|
792
672
|
curr.mode = PlayMode.Bounce;
|
|
673
|
+
this._isBounce = true;
|
|
793
674
|
} else {
|
|
794
675
|
curr.mode = PlayMode.Normal;
|
|
676
|
+
this._isBounce = false;
|
|
795
677
|
}
|
|
796
|
-
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
if (this.mode === PlayMode.Normal) {
|
|
797
681
|
this.mode = PlayMode.Bounce;
|
|
798
|
-
|
|
799
|
-
|
|
682
|
+
this._isBounce = true;
|
|
683
|
+
return;
|
|
800
684
|
}
|
|
685
|
+
this.mode = PlayMode.Normal;
|
|
686
|
+
this._isBounce = false;
|
|
801
687
|
}
|
|
802
688
|
_toggleSettings(flag) {
|
|
803
689
|
if (flag === undefined) {
|
|
@@ -846,7 +732,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
846
732
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
847
733
|
}
|
|
848
734
|
static get styles() {
|
|
849
|
-
return
|
|
735
|
+
return css_248z;
|
|
850
736
|
}
|
|
851
737
|
connectedCallback() {
|
|
852
738
|
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;
|