@aarsteinmedia/dotlottie-player 3.0.8 → 3.0.9
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 +42 -64
- package/dist/custom-elements.json +34 -1
- package/dist/esm/index.js +42 -64
- package/dist/index.d.ts +4 -1
- package/dist/index.js +2 -2
- package/package.json +6 -6
package/dist/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var Lottie = require('lottie-web');
|
|
4
4
|
var fflate = require('fflate');
|
|
5
5
|
|
|
6
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
6
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.9";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"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$1="./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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];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.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.21.2","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.7.0",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
7
7
|
|
|
8
8
|
var ObjectFit;
|
|
9
9
|
(function(ObjectFit) {
|
|
@@ -364,7 +364,7 @@ const addExt = (ext, str)=>{
|
|
|
364
364
|
|
|
365
365
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
366
366
|
if (isServer()) {
|
|
367
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
367
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
368
368
|
};
|
|
369
369
|
}
|
|
370
370
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -407,6 +407,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
409
|
};
|
|
410
|
+
EnhancedElement.observedProperties = [];
|
|
410
411
|
|
|
411
412
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgba(0, 0, 0, 0.2);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n display: block;\n width: 100%;\n height: 100%;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fadeIn 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n border-top-color: transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n}\n:host progress {\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgba(255, 255, 255, 0.6);\n }\n}";
|
|
412
413
|
|
|
@@ -912,78 +913,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
912
913
|
getManifest() {
|
|
913
914
|
return this._manifest;
|
|
914
915
|
}
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
916
|
+
_toggleEventListeners(action) {
|
|
917
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
918
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
919
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
920
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
921
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
922
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
923
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
924
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
925
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
926
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
927
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
928
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
929
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
930
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
931
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
932
|
+
if (this._lottieInstance) {
|
|
933
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
934
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
935
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
936
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
937
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
938
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
918
939
|
}
|
|
919
|
-
this.shadow.querySelector('.togglePlay')?.addEventListener('click', this.togglePlay);
|
|
920
|
-
this.shadow.querySelector('.stop')?.addEventListener('click', this.stop);
|
|
921
|
-
this.shadow.querySelector('.prev')?.addEventListener('click', this.prev);
|
|
922
|
-
this.shadow.querySelector('.next')?.addEventListener('click', this.next);
|
|
923
|
-
this.shadow.querySelector('.toggleLoop')?.addEventListener('click', this.toggleLoop);
|
|
924
|
-
this.shadow.querySelector('.toggleBoomerang')?.addEventListener('click', this.toggleBoomerang);
|
|
925
|
-
this.shadow.querySelector('.convert')?.addEventListener('click', this.convert);
|
|
926
|
-
this.shadow.querySelector('.snapshot')?.addEventListener('click', this.snapshot);
|
|
927
|
-
const toggleSettings = this.shadow.querySelector('.seeker');
|
|
928
|
-
toggleSettings?.addEventListener('change', this._handleSeekChange);
|
|
929
|
-
toggleSettings?.addEventListener('mousedown', this._freeze);
|
|
930
|
-
const settings = this.shadow.querySelector('.toggleSettings');
|
|
931
|
-
settings?.addEventListener('click', this._handleSettingsClick);
|
|
932
|
-
settings?.addEventListener('blur', this._handleBlur);
|
|
933
|
-
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
934
|
-
this._lottieInstance.addEventListener('complete', this._complete);
|
|
935
|
-
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
936
|
-
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
937
|
-
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
938
|
-
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
939
940
|
if (this._container && this.hover) {
|
|
940
|
-
this._container
|
|
941
|
-
this._container
|
|
941
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
942
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
942
943
|
}
|
|
943
|
-
|
|
944
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
944
945
|
passive: true,
|
|
945
946
|
capture: false
|
|
946
947
|
});
|
|
947
|
-
|
|
948
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
948
949
|
passive: true,
|
|
949
950
|
capture: false
|
|
950
951
|
});
|
|
951
952
|
if (this.animateOnScroll) {
|
|
952
|
-
|
|
953
|
+
window[method]('scroll', this._handleScroll, {
|
|
953
954
|
passive: true,
|
|
954
955
|
capture: true
|
|
955
956
|
});
|
|
956
957
|
}
|
|
957
958
|
}
|
|
959
|
+
_addEventListeners() {
|
|
960
|
+
this._toggleEventListeners('add');
|
|
961
|
+
}
|
|
958
962
|
_removeEventListeners() {
|
|
959
|
-
|
|
960
|
-
return;
|
|
961
|
-
}
|
|
962
|
-
this.shadow.querySelector('.togglePlay')?.removeEventListener('click', this.togglePlay);
|
|
963
|
-
this.shadow.querySelector('.stop')?.removeEventListener('click', this.stop);
|
|
964
|
-
this.shadow.querySelector('.prev')?.removeEventListener('click', this.prev);
|
|
965
|
-
this.shadow.querySelector('.next')?.removeEventListener('click', this.next);
|
|
966
|
-
this.shadow.querySelector('.toggleLoop')?.removeEventListener('click', this.toggleLoop);
|
|
967
|
-
this.shadow.querySelector('.toggleBoomerang')?.removeEventListener('click', this.toggleBoomerang);
|
|
968
|
-
this.shadow.querySelector('.convert')?.removeEventListener('click', this.convert);
|
|
969
|
-
this.shadow.querySelector('.snapshot')?.removeEventListener('click', this.snapshot);
|
|
970
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
971
|
-
seeker?.removeEventListener('change', this._handleSeekChange);
|
|
972
|
-
seeker?.removeEventListener('mousedown', this._freeze);
|
|
973
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
974
|
-
toggleSettings?.removeEventListener('click', this._handleSettingsClick);
|
|
975
|
-
toggleSettings?.removeEventListener('blur', this._handleBlur);
|
|
976
|
-
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
977
|
-
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
978
|
-
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
979
|
-
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
980
|
-
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
981
|
-
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
982
|
-
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
983
|
-
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
984
|
-
removeEventListener('focus', this._handleWindowBlur, true);
|
|
985
|
-
removeEventListener('blur', this._handleWindowBlur, true);
|
|
986
|
-
removeEventListener('scroll', this._handleScroll, true);
|
|
963
|
+
this._toggleEventListeners('remove');
|
|
987
964
|
}
|
|
988
965
|
_loopComplete() {
|
|
989
966
|
if (!this._lottieInstance) {
|
|
@@ -1100,8 +1077,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1100
1077
|
}
|
|
1101
1078
|
if (isServer()) {
|
|
1102
1079
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1080
|
+
return;
|
|
1103
1081
|
}
|
|
1104
1082
|
if (this._playerState.visible) {
|
|
1083
|
+
if (this._playerState.scrollTimeout) {
|
|
1084
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1085
|
+
}
|
|
1086
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1087
|
+
this.playerState = exports.PlayerState.Paused;
|
|
1088
|
+
}, 400);
|
|
1105
1089
|
const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
|
|
1106
1090
|
requestAnimationFrame(()=>{
|
|
1107
1091
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1112,12 +1096,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1112
1096
|
}
|
|
1113
1097
|
});
|
|
1114
1098
|
}
|
|
1115
|
-
if (this._playerState.scrollTimeout) {
|
|
1116
|
-
clearTimeout(this._playerState.scrollTimeout);
|
|
1117
|
-
}
|
|
1118
|
-
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1119
|
-
this.playerState = exports.PlayerState.Paused;
|
|
1120
|
-
}, 400);
|
|
1121
1099
|
}
|
|
1122
1100
|
_handleSeekChange({ target }) {
|
|
1123
1101
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
@@ -30,8 +30,16 @@
|
|
|
30
30
|
{
|
|
31
31
|
"kind": "field",
|
|
32
32
|
"name": "observedProperties",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "(keyof EnhancedElement)[]"
|
|
35
|
+
},
|
|
33
36
|
"static": true,
|
|
34
|
-
"
|
|
37
|
+
"default": "[]",
|
|
38
|
+
"readonly": true,
|
|
39
|
+
"inheritedFrom": {
|
|
40
|
+
"name": "EnhancedElement",
|
|
41
|
+
"module": "src/observeProperties.ts"
|
|
42
|
+
}
|
|
35
43
|
},
|
|
36
44
|
{
|
|
37
45
|
"kind": "method",
|
|
@@ -312,6 +320,20 @@
|
|
|
312
320
|
"privacy": "public",
|
|
313
321
|
"description": "Get Lottie Manifest"
|
|
314
322
|
},
|
|
323
|
+
{
|
|
324
|
+
"kind": "method",
|
|
325
|
+
"name": "_toggleEventListeners",
|
|
326
|
+
"privacy": "private",
|
|
327
|
+
"parameters": [
|
|
328
|
+
{
|
|
329
|
+
"name": "action",
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "'add' | 'remove'"
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
],
|
|
335
|
+
"description": "Toggle event listeners"
|
|
336
|
+
},
|
|
315
337
|
{
|
|
316
338
|
"kind": "method",
|
|
317
339
|
"name": "_addEventListeners",
|
|
@@ -802,6 +824,17 @@
|
|
|
802
824
|
"kind": "class",
|
|
803
825
|
"description": "HTMLElement enhanced to track property changes",
|
|
804
826
|
"name": "EnhancedElement",
|
|
827
|
+
"members": [
|
|
828
|
+
{
|
|
829
|
+
"kind": "field",
|
|
830
|
+
"name": "observedProperties",
|
|
831
|
+
"type": {
|
|
832
|
+
"text": "(keyof EnhancedElement)[]"
|
|
833
|
+
},
|
|
834
|
+
"static": true,
|
|
835
|
+
"default": "[]"
|
|
836
|
+
}
|
|
837
|
+
],
|
|
805
838
|
"superclass": {
|
|
806
839
|
"name": "HTMLElement"
|
|
807
840
|
},
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Lottie from 'lottie-web';
|
|
2
2
|
import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
|
|
3
3
|
|
|
4
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
4
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.9";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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];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.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.21.2","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.7.0",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
5
5
|
|
|
6
6
|
var ObjectFit;
|
|
7
7
|
(function(ObjectFit) {
|
|
@@ -362,7 +362,7 @@ const addExt = (ext, str)=>{
|
|
|
362
362
|
|
|
363
363
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
364
364
|
if (isServer()) {
|
|
365
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
365
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
366
366
|
};
|
|
367
367
|
}
|
|
368
368
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -405,6 +405,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
};
|
|
408
|
+
EnhancedElement.observedProperties = [];
|
|
408
409
|
|
|
409
410
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgba(0, 0, 0, 0.2);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n display: block;\n width: 100%;\n height: 100%;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fadeIn 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n border-top-color: transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n}\n:host progress {\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgba(255, 255, 255, 0.6);\n }\n}";
|
|
410
411
|
|
|
@@ -910,78 +911,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
910
911
|
getManifest() {
|
|
911
912
|
return this._manifest;
|
|
912
913
|
}
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
914
|
+
_toggleEventListeners(action) {
|
|
915
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
916
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
917
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
918
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
919
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
920
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
921
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
922
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
923
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
924
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
925
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
926
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
927
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
928
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
929
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
930
|
+
if (this._lottieInstance) {
|
|
931
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
932
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
933
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
934
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
935
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
936
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
916
937
|
}
|
|
917
|
-
this.shadow.querySelector('.togglePlay')?.addEventListener('click', this.togglePlay);
|
|
918
|
-
this.shadow.querySelector('.stop')?.addEventListener('click', this.stop);
|
|
919
|
-
this.shadow.querySelector('.prev')?.addEventListener('click', this.prev);
|
|
920
|
-
this.shadow.querySelector('.next')?.addEventListener('click', this.next);
|
|
921
|
-
this.shadow.querySelector('.toggleLoop')?.addEventListener('click', this.toggleLoop);
|
|
922
|
-
this.shadow.querySelector('.toggleBoomerang')?.addEventListener('click', this.toggleBoomerang);
|
|
923
|
-
this.shadow.querySelector('.convert')?.addEventListener('click', this.convert);
|
|
924
|
-
this.shadow.querySelector('.snapshot')?.addEventListener('click', this.snapshot);
|
|
925
|
-
const toggleSettings = this.shadow.querySelector('.seeker');
|
|
926
|
-
toggleSettings?.addEventListener('change', this._handleSeekChange);
|
|
927
|
-
toggleSettings?.addEventListener('mousedown', this._freeze);
|
|
928
|
-
const settings = this.shadow.querySelector('.toggleSettings');
|
|
929
|
-
settings?.addEventListener('click', this._handleSettingsClick);
|
|
930
|
-
settings?.addEventListener('blur', this._handleBlur);
|
|
931
|
-
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
932
|
-
this._lottieInstance.addEventListener('complete', this._complete);
|
|
933
|
-
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
934
|
-
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
935
|
-
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
936
|
-
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
937
938
|
if (this._container && this.hover) {
|
|
938
|
-
this._container
|
|
939
|
-
this._container
|
|
939
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
940
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
940
941
|
}
|
|
941
|
-
|
|
942
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
942
943
|
passive: true,
|
|
943
944
|
capture: false
|
|
944
945
|
});
|
|
945
|
-
|
|
946
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
946
947
|
passive: true,
|
|
947
948
|
capture: false
|
|
948
949
|
});
|
|
949
950
|
if (this.animateOnScroll) {
|
|
950
|
-
|
|
951
|
+
window[method]('scroll', this._handleScroll, {
|
|
951
952
|
passive: true,
|
|
952
953
|
capture: true
|
|
953
954
|
});
|
|
954
955
|
}
|
|
955
956
|
}
|
|
957
|
+
_addEventListeners() {
|
|
958
|
+
this._toggleEventListeners('add');
|
|
959
|
+
}
|
|
956
960
|
_removeEventListeners() {
|
|
957
|
-
|
|
958
|
-
return;
|
|
959
|
-
}
|
|
960
|
-
this.shadow.querySelector('.togglePlay')?.removeEventListener('click', this.togglePlay);
|
|
961
|
-
this.shadow.querySelector('.stop')?.removeEventListener('click', this.stop);
|
|
962
|
-
this.shadow.querySelector('.prev')?.removeEventListener('click', this.prev);
|
|
963
|
-
this.shadow.querySelector('.next')?.removeEventListener('click', this.next);
|
|
964
|
-
this.shadow.querySelector('.toggleLoop')?.removeEventListener('click', this.toggleLoop);
|
|
965
|
-
this.shadow.querySelector('.toggleBoomerang')?.removeEventListener('click', this.toggleBoomerang);
|
|
966
|
-
this.shadow.querySelector('.convert')?.removeEventListener('click', this.convert);
|
|
967
|
-
this.shadow.querySelector('.snapshot')?.removeEventListener('click', this.snapshot);
|
|
968
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
969
|
-
seeker?.removeEventListener('change', this._handleSeekChange);
|
|
970
|
-
seeker?.removeEventListener('mousedown', this._freeze);
|
|
971
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
972
|
-
toggleSettings?.removeEventListener('click', this._handleSettingsClick);
|
|
973
|
-
toggleSettings?.removeEventListener('blur', this._handleBlur);
|
|
974
|
-
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
975
|
-
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
976
|
-
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
977
|
-
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
978
|
-
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
979
|
-
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
980
|
-
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
981
|
-
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
982
|
-
removeEventListener('focus', this._handleWindowBlur, true);
|
|
983
|
-
removeEventListener('blur', this._handleWindowBlur, true);
|
|
984
|
-
removeEventListener('scroll', this._handleScroll, true);
|
|
961
|
+
this._toggleEventListeners('remove');
|
|
985
962
|
}
|
|
986
963
|
_loopComplete() {
|
|
987
964
|
if (!this._lottieInstance) {
|
|
@@ -1098,8 +1075,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1098
1075
|
}
|
|
1099
1076
|
if (isServer()) {
|
|
1100
1077
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1078
|
+
return;
|
|
1101
1079
|
}
|
|
1102
1080
|
if (this._playerState.visible) {
|
|
1081
|
+
if (this._playerState.scrollTimeout) {
|
|
1082
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1083
|
+
}
|
|
1084
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1085
|
+
this.playerState = PlayerState.Paused;
|
|
1086
|
+
}, 400);
|
|
1103
1087
|
const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
|
|
1104
1088
|
requestAnimationFrame(()=>{
|
|
1105
1089
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1110,12 +1094,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1110
1094
|
}
|
|
1111
1095
|
});
|
|
1112
1096
|
}
|
|
1113
|
-
if (this._playerState.scrollTimeout) {
|
|
1114
|
-
clearTimeout(this._playerState.scrollTimeout);
|
|
1115
|
-
}
|
|
1116
|
-
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1117
|
-
this.playerState = PlayerState.Paused;
|
|
1118
|
-
}, 400);
|
|
1119
1097
|
}
|
|
1120
1098
|
_handleSeekChange({ target }) {
|
|
1121
1099
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,9 @@ import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } fro
|
|
|
2
2
|
import { RefObject, CSSProperties } from 'react';
|
|
3
3
|
|
|
4
4
|
declare class EnhancedElement extends HTMLElement {
|
|
5
|
+
[key: symbol]: unknown;
|
|
5
6
|
constructor();
|
|
7
|
+
static observedProperties: (keyof EnhancedElement)[];
|
|
6
8
|
connectedCallback(): void;
|
|
7
9
|
}
|
|
8
10
|
|
|
@@ -154,7 +156,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
154
156
|
template: HTMLTemplateElement;
|
|
155
157
|
static get observedAttributes(): string[];
|
|
156
158
|
attributeChangedCallback(name: string, _oldValue: unknown, value: string): void;
|
|
157
|
-
static get observedProperties():
|
|
159
|
+
static get observedProperties(): (keyof EnhancedElement)[];
|
|
158
160
|
propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
|
|
159
161
|
set animateOnScroll(value: AnimateOnScroll);
|
|
160
162
|
get animateOnScroll(): AnimateOnScroll;
|
|
@@ -214,6 +216,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
214
216
|
private _addIntersectionObserver;
|
|
215
217
|
load(src: string | null): Promise<void>;
|
|
216
218
|
getManifest(): LottieManifest;
|
|
219
|
+
private _toggleEventListeners;
|
|
217
220
|
private _addEventListeners;
|
|
218
221
|
private _removeEventListeners;
|
|
219
222
|
private _loopComplete;
|