@aarsteinmedia/dotlottie-player 3.1.0 → 3.2.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.
package/dist/esm/index.js CHANGED
@@ -1,7 +1,5 @@
1
- import Lottie from 'lottie-web';
2
1
  import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
3
-
4
- var name="@aarsteinmedia/dotlottie-player";var version="3.1.0";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};
2
+ import Lottie from 'lottie-web';
5
3
 
6
4
  var ObjectFit;
7
5
  (function(ObjectFit) {
@@ -361,6 +359,8 @@ const addExt = (ext, str)=>{
361
359
  return `${prefix ?? `:${s4()}`}_${s4()}`;
362
360
  };
363
361
 
362
+ var name="@aarsteinmedia/dotlottie-player";var version="3.1.0";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};
363
+
364
364
  const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
365
365
  if (isServer()) {
366
366
  global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
@@ -534,9 +534,17 @@ class DotLottiePlayer extends EnhancedElement {
534
534
  togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
535
535
  stop.dataset.active = (value === PlayerState.Stopped).toString();
536
536
  if (value === PlayerState.Playing) {
537
- togglePlay.innerHTML = `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`;
537
+ togglePlay.innerHTML = `
538
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
539
+ <path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" />
540
+ </svg>
541
+ `;
538
542
  } else {
539
- togglePlay.innerHTML = `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
543
+ togglePlay.innerHTML = `
544
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
545
+ <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
546
+ </svg>
547
+ `;
540
548
  }
541
549
  }
542
550
  if (name === '_seeker' && typeof value === 'number') {
@@ -1429,10 +1437,206 @@ class DotLottiePlayer extends EnhancedElement {
1429
1437
  if (!slot) {
1430
1438
  return;
1431
1439
  }
1432
- slot.innerHTML = this.controls ? `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="false" tabindex="0" aria-label="Toggle Play/Pause"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg></button> <button class="stop" data-active="true" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> <button class="prev" tabindex="0" aria-label="Previous animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button> <button class="next" tabindex="0" aria-label="Next animation" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button><form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" tabindex="0" hidden><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button> <button class="snapshot" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>` : '';
1440
+ slot.innerHTML = this.controls ? `
1441
+ <div
1442
+ class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
1443
+ aria-label="Lottie Animation controls"
1444
+ >
1445
+ <button
1446
+ class="togglePlay"
1447
+ data-active="false"
1448
+ tabindex="0"
1449
+ aria-label="Toggle Play/Pause"
1450
+ >
1451
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
1452
+ <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
1453
+ </svg>
1454
+ </button>
1455
+
1456
+ <button
1457
+ class="stop"
1458
+ data-active="true"
1459
+ tabindex="0"
1460
+ aria-label="Stop"
1461
+ >
1462
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
1463
+ <path d="M6 6h12v12H6V6z" />
1464
+ </svg>
1465
+ </button>
1466
+ <button
1467
+ class="prev"
1468
+ tabindex="0"
1469
+ aria-label="Previous animation"
1470
+ hidden
1471
+ >
1472
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
1473
+ <path
1474
+ d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
1475
+ />
1476
+ </svg>
1477
+ </button>
1478
+ <button
1479
+ class="next"
1480
+ tabindex="0"
1481
+ aria-label="Next animation"
1482
+ hidden
1483
+ >
1484
+ <svg width="24" height="24" aria-hidden="true" focusable="false">
1485
+ <path
1486
+ d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
1487
+ />
1488
+ </svg>
1489
+ </button>
1490
+ <form class="progress-container${this.simple ? ' simple' : ''}">
1491
+ <input
1492
+ class="seeker"
1493
+ type="range"
1494
+ min="0"
1495
+ max="100"
1496
+ step="1"
1497
+ value="${this._seeker.toString()}"
1498
+ aria-valuemin="0"
1499
+ aria-valuemax="100"
1500
+ role="slider"
1501
+ aria-valuenow="${this._seeker.toString()}"
1502
+ tabindex="0"
1503
+ aria-label="Slider for search"
1504
+ />
1505
+ <progress max="100" value="${this._seeker}"></progress>
1506
+ </form>
1507
+ ${this.simple ? '' : ` <button
1508
+ class="toggleLoop"
1509
+ data-active="${this.loop}"
1510
+ tabindex="0"
1511
+ aria-label="Toggle loop"
1512
+ >
1513
+ <svg
1514
+ width="24"
1515
+ height="24"
1516
+ aria-hidden="true"
1517
+ focusable="false"
1518
+ >
1519
+ <path
1520
+ d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
1521
+ />
1522
+ </svg>
1523
+ </button>
1524
+ <button
1525
+ class="toggleBoomerang"
1526
+ data-active="${this.mode === PlayMode.Bounce}"
1527
+ aria-label="Toggle boomerang"
1528
+ tabindex="0"
1529
+ >
1530
+ <svg
1531
+ width="24"
1532
+ height="24"
1533
+ aria-hidden="true"
1534
+ focusable="false"
1535
+ >
1536
+ <path
1537
+ d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
1538
+ />
1539
+ </svg>
1540
+ </button>
1541
+ <button
1542
+ class="toggleSettings"
1543
+ aria-label="Settings"
1544
+ aria-haspopup="true"
1545
+ aria-expanded="${!!this._isSettingsOpen}"
1546
+ aria-controls="${this._identifier}-settings"
1547
+ >
1548
+ <svg
1549
+ width="24"
1550
+ height="24"
1551
+ aria-hidden="true"
1552
+ focusable="false"
1553
+ >
1554
+ <circle cx="12" cy="5.4" r="2.5" />
1555
+ <circle cx="12" cy="12" r="2.5" />
1556
+ <circle cx="12" cy="18.6" r="2.5" />
1557
+ </svg>
1558
+ </button>
1559
+ <div id="${this._identifier}-settings" class="popover" hidden>
1560
+ <button
1561
+ class="convert"
1562
+ aria-label="Convert JSON animation to dotLottie format"
1563
+ tabindex="0"
1564
+ hidden
1565
+ >
1566
+ <svg
1567
+ width="24"
1568
+ height="24"
1569
+ aria-hidden="true"
1570
+ focusable="false"
1571
+ >
1572
+ <path
1573
+ d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
1574
+ />
1575
+ </svg>
1576
+ Convert to dotLottie
1577
+ </button>
1578
+ <button
1579
+ class="snapshot"
1580
+ aria-label="Download still image"
1581
+ tabindex="0"
1582
+ >
1583
+ <svg
1584
+ width="24"
1585
+ height="24"
1586
+ aria-hidden="true"
1587
+ focusable="false"
1588
+ >
1589
+ <path
1590
+ d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
1591
+ />
1592
+ </svg>
1593
+ Download still image
1594
+ </button>
1595
+ </div>`}
1596
+ </div>
1597
+ ` : '';
1433
1598
  }
1434
1599
  render() {
1435
- this.template.innerHTML = `<figure class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? `<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</div><slot name="controls"></slot></figure>`;
1600
+ this.template.innerHTML = `
1601
+ <figure
1602
+ class="animation-container main"
1603
+ data-controls="${this.controls ?? false}"
1604
+ lang="${this.description ? document?.documentElement?.lang : 'en'}"
1605
+ role="img"
1606
+ aria-label="${this.description ?? 'Lottie animation'}"
1607
+ data-loaded="${this._playerState.loaded}"
1608
+ >
1609
+ <div class="animation" style="background:${this.background}">
1610
+ ${this.playerState === PlayerState.Error ? ` <div class="error">
1611
+ <svg
1612
+ preserveAspectRatio="xMidYMid slice"
1613
+ xmlns="http://www.w3.org/2000/svg"
1614
+ xml:space="preserve"
1615
+ width="1920"
1616
+ height="1080"
1617
+ viewBox="0 0 1920 1080"
1618
+ >
1619
+ <path fill="#fff" d="M0 0h1920v1080H0z" />
1620
+ <path
1621
+ fill="#3a6d8b"
1622
+ d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"
1623
+ />
1624
+ <path fill="none" d="M718.9 807.7h645v285.4h-645z" />
1625
+ <text
1626
+ fill="#3a6d8b"
1627
+ style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
1628
+ x="50%"
1629
+ y="848.017"
1630
+ text-anchor="middle"
1631
+ >
1632
+ ${this._errorMessage}
1633
+ </text>
1634
+ </svg>
1635
+ </div>` : ''}
1636
+ </div>
1637
+ <slot name="controls"></slot>
1638
+ </figure>
1639
+ `;
1436
1640
  this.shadow.adoptedStyleSheets = [
1437
1641
  DotLottiePlayer.styles
1438
1642
  ];
@@ -1494,10 +1698,11 @@ class DotLottiePlayer extends EnhancedElement {
1494
1698
  });
1495
1699
  }
1496
1700
  }
1701
+
1497
1702
  globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
1498
1703
  const tagName = 'dotlottie-player';
1499
1704
  if (!isServer()) {
1500
1705
  customElements.define('dotlottie-player', DotLottiePlayer);
1501
1706
  }
1502
1707
 
1503
- export { DotLottiePlayer, PlayMode, PlayerEvents, PlayerState, tagName };
1708
+ export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };
package/dist/index.d.ts CHANGED
@@ -280,4 +280,4 @@ declare class DotLottiePlayer extends EnhancedElement {
280
280
 
281
281
  declare const tagName = "dotlottie-player";
282
282
 
283
- export { DotLottiePlayer, PlayMode, PlayerEvents, PlayerState, tagName };
283
+ export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };