@aarsteinmedia/dotlottie-player 3.2.2 → 3.2.4
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/LICENSE.md +122 -0
- package/dist/cjs/index.js +88 -85
- package/dist/custom-elements.json +10 -5
- package/dist/esm/index.js +17 -17
- package/dist/index.d.ts +2 -6
- package/dist/index.js +7 -7
- package/package.json +45 -17
- package/LICENSE +0 -339
package/dist/esm/index.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
|
|
2
2
|
import Lottie from 'lottie-web';
|
|
3
3
|
|
|
4
|
-
var ObjectFit
|
|
5
|
-
(function(ObjectFit) {
|
|
4
|
+
var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
|
|
6
5
|
ObjectFit["Contain"] = "contain";
|
|
7
6
|
ObjectFit["Cover"] = "cover";
|
|
8
7
|
ObjectFit["Fill"] = "fill";
|
|
9
8
|
ObjectFit["ScaleDown"] = "scale-down";
|
|
10
9
|
ObjectFit["None"] = "none";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
return ObjectFit;
|
|
11
|
+
}({});
|
|
12
|
+
var PlayerState = /*#__PURE__*/ function(PlayerState) {
|
|
14
13
|
PlayerState["Completed"] = "completed";
|
|
15
14
|
PlayerState["Destroyed"] = "destroyed";
|
|
16
15
|
PlayerState["Error"] = "error";
|
|
@@ -19,14 +18,14 @@ var PlayerState;
|
|
|
19
18
|
PlayerState["Paused"] = "paused";
|
|
20
19
|
PlayerState["Playing"] = "playing";
|
|
21
20
|
PlayerState["Stopped"] = "stopped";
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
return PlayerState;
|
|
22
|
+
}({});
|
|
23
|
+
var PlayMode = /*#__PURE__*/ function(PlayMode) {
|
|
25
24
|
PlayMode["Bounce"] = "bounce";
|
|
26
25
|
PlayMode["Normal"] = "normal";
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
return PlayMode;
|
|
27
|
+
}({});
|
|
28
|
+
var PlayerEvents = /*#__PURE__*/ function(PlayerEvents) {
|
|
30
29
|
PlayerEvents["Complete"] = "complete";
|
|
31
30
|
PlayerEvents["Destroyed"] = "destroyed";
|
|
32
31
|
PlayerEvents["Error"] = "error";
|
|
@@ -41,14 +40,15 @@ var PlayerEvents;
|
|
|
41
40
|
PlayerEvents["Ready"] = "ready";
|
|
42
41
|
PlayerEvents["Rendered"] = "rendered";
|
|
43
42
|
PlayerEvents["Stop"] = "stop";
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
return PlayerEvents;
|
|
44
|
+
}({});
|
|
45
|
+
var PreserveAspectRatio = /*#__PURE__*/ function(PreserveAspectRatio) {
|
|
47
46
|
PreserveAspectRatio["Contain"] = "xMidYMid meet";
|
|
48
47
|
PreserveAspectRatio["Cover"] = "xMidYMid slice";
|
|
49
48
|
PreserveAspectRatio["None"] = "xMinYMin slice";
|
|
50
49
|
PreserveAspectRatio["Initial"] = "none";
|
|
51
|
-
|
|
50
|
+
return PreserveAspectRatio;
|
|
51
|
+
}({});
|
|
52
52
|
|
|
53
53
|
class CustomError extends Error {
|
|
54
54
|
}
|
|
@@ -585,9 +585,9 @@ function renderControls() {
|
|
|
585
585
|
}
|
|
586
586
|
}
|
|
587
587
|
|
|
588
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.2.
|
|
588
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.2.4";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 && tsc-alias","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","lint:fix":"eslint","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --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","@eslint/compat":"^1.2.1","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.36","@types/node":"^22.7.7","@typescript-eslint/eslint-plugin":"^8.10.0","@typescript-eslint/parser":"^8.10.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.0","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.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.3",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};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,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
589
589
|
|
|
590
|
-
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:
|
|
590
|
+
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: rgb(0 0 0 / 20%);\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: fade-in 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid 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 .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:host .toolbar {\n display: flex;\n place-items: center 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 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 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 appearance: none;\n outline: none;\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\n@keyframes fade-in {\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: rgb(255 255 255 / 60%);\n }\n}";
|
|
591
591
|
|
|
592
592
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
593
593
|
if (isServer()) {
|
package/dist/index.d.ts
CHANGED
|
@@ -242,13 +242,9 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
242
242
|
protected _handleSeekChange({ target }: Event): void;
|
|
243
243
|
private _isLottie;
|
|
244
244
|
addAnimation(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<{
|
|
245
|
-
result
|
|
245
|
+
result?: void | ArrayBuffer;
|
|
246
246
|
success: boolean;
|
|
247
|
-
error?:
|
|
248
|
-
} | {
|
|
249
|
-
error: string;
|
|
250
|
-
success: boolean;
|
|
251
|
-
result?: undefined;
|
|
247
|
+
error?: string;
|
|
252
248
|
}>;
|
|
253
249
|
getLottie(): AnimationItem | null;
|
|
254
250
|
play(): Promise<void>;
|