@aarsteinmedia/dotlottie-player 3.0.9 → 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/cjs/index.js +233 -19
- package/dist/custom-elements.json +58 -42
- package/dist/esm/index.js +231 -19
- package/dist/index.d.ts +10 -2
- package/dist/index.js +206 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
var fflate = require('fflate');
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
6
|
-
var
|
|
5
|
+
var fflate = require('fflate');
|
|
6
|
+
var Lottie = require('lottie-web');
|
|
7
7
|
|
|
8
8
|
var ObjectFit;
|
|
9
9
|
(function(ObjectFit) {
|
|
@@ -85,11 +85,11 @@ const addExt = (ext, str)=>{
|
|
|
85
85
|
if (!animations?.length || !manifest) {
|
|
86
86
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
87
87
|
}
|
|
88
|
-
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
88
|
+
const manifestCompressionLevel = 0, animationCompressionLevel = 9, name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
89
89
|
'manifest.json': [
|
|
90
90
|
fflate.strToU8(JSON.stringify(manifest), true),
|
|
91
91
|
{
|
|
92
|
-
level:
|
|
92
|
+
level: manifestCompressionLevel
|
|
93
93
|
}
|
|
94
94
|
]
|
|
95
95
|
};
|
|
@@ -105,14 +105,14 @@ const addExt = (ext, str)=>{
|
|
|
105
105
|
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
|
|
106
106
|
base64ToU8(dataURL),
|
|
107
107
|
{
|
|
108
|
-
level:
|
|
108
|
+
level: animationCompressionLevel
|
|
109
109
|
}
|
|
110
110
|
];
|
|
111
111
|
}
|
|
112
112
|
dotlottie[`animations/${manifest.animations[i].id}.json`] = [
|
|
113
113
|
fflate.strToU8(JSON.stringify(animation), true),
|
|
114
114
|
{
|
|
115
|
-
level:
|
|
115
|
+
level: animationCompressionLevel
|
|
116
116
|
}
|
|
117
117
|
];
|
|
118
118
|
}
|
|
@@ -291,6 +291,7 @@ const addExt = (ext, str)=>{
|
|
|
291
291
|
case 'png':
|
|
292
292
|
case 'gif':
|
|
293
293
|
case 'webp':
|
|
294
|
+
case 'avif':
|
|
294
295
|
return `image/${ext}`;
|
|
295
296
|
case 'mp3':
|
|
296
297
|
case 'mpeg':
|
|
@@ -362,6 +363,8 @@ const addExt = (ext, str)=>{
|
|
|
362
363
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
363
364
|
};
|
|
364
365
|
|
|
366
|
+
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$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};
|
|
367
|
+
|
|
365
368
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
366
369
|
if (isServer()) {
|
|
367
370
|
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
@@ -535,9 +538,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
535
538
|
togglePlay.dataset.active = (value === exports.PlayerState.Playing || value === exports.PlayerState.Paused).toString();
|
|
536
539
|
stop.dataset.active = (value === exports.PlayerState.Stopped).toString();
|
|
537
540
|
if (value === exports.PlayerState.Playing) {
|
|
538
|
-
togglePlay.innerHTML =
|
|
541
|
+
togglePlay.innerHTML = `
|
|
542
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
543
|
+
<path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" />
|
|
544
|
+
</svg>
|
|
545
|
+
`;
|
|
539
546
|
} else {
|
|
540
|
-
togglePlay.innerHTML =
|
|
547
|
+
togglePlay.innerHTML = `
|
|
548
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
549
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
550
|
+
</svg>
|
|
551
|
+
`;
|
|
541
552
|
}
|
|
542
553
|
}
|
|
543
554
|
if (name === '_seeker' && typeof value === 'number') {
|
|
@@ -1141,14 +1152,20 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1141
1152
|
];
|
|
1142
1153
|
animations?.push(...animationsToAdd);
|
|
1143
1154
|
}
|
|
1144
|
-
return
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1155
|
+
return {
|
|
1156
|
+
success: true,
|
|
1157
|
+
result: await createDotLottie({
|
|
1158
|
+
animations,
|
|
1159
|
+
manifest,
|
|
1160
|
+
fileName,
|
|
1161
|
+
shouldDownload
|
|
1162
|
+
})
|
|
1163
|
+
};
|
|
1150
1164
|
} catch (err) {
|
|
1151
|
-
|
|
1165
|
+
return {
|
|
1166
|
+
success: false,
|
|
1167
|
+
error: handleErrors(err).message
|
|
1168
|
+
};
|
|
1152
1169
|
}
|
|
1153
1170
|
}
|
|
1154
1171
|
getLottie() {
|
|
@@ -1424,10 +1441,206 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1424
1441
|
if (!slot) {
|
|
1425
1442
|
return;
|
|
1426
1443
|
}
|
|
1427
|
-
slot.innerHTML = this.controls ?
|
|
1444
|
+
slot.innerHTML = this.controls ? `
|
|
1445
|
+
<div
|
|
1446
|
+
class="lottie-controls toolbar ${this.playerState === exports.PlayerState.Error ? 'has-error' : ''}"
|
|
1447
|
+
aria-label="Lottie Animation controls"
|
|
1448
|
+
>
|
|
1449
|
+
<button
|
|
1450
|
+
class="togglePlay"
|
|
1451
|
+
data-active="false"
|
|
1452
|
+
tabindex="0"
|
|
1453
|
+
aria-label="Toggle Play/Pause"
|
|
1454
|
+
>
|
|
1455
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1456
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1457
|
+
</svg>
|
|
1458
|
+
</button>
|
|
1459
|
+
|
|
1460
|
+
<button
|
|
1461
|
+
class="stop"
|
|
1462
|
+
data-active="true"
|
|
1463
|
+
tabindex="0"
|
|
1464
|
+
aria-label="Stop"
|
|
1465
|
+
>
|
|
1466
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1467
|
+
<path d="M6 6h12v12H6V6z" />
|
|
1468
|
+
</svg>
|
|
1469
|
+
</button>
|
|
1470
|
+
<button
|
|
1471
|
+
class="prev"
|
|
1472
|
+
tabindex="0"
|
|
1473
|
+
aria-label="Previous animation"
|
|
1474
|
+
hidden
|
|
1475
|
+
>
|
|
1476
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1477
|
+
<path
|
|
1478
|
+
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1479
|
+
/>
|
|
1480
|
+
</svg>
|
|
1481
|
+
</button>
|
|
1482
|
+
<button
|
|
1483
|
+
class="next"
|
|
1484
|
+
tabindex="0"
|
|
1485
|
+
aria-label="Next animation"
|
|
1486
|
+
hidden
|
|
1487
|
+
>
|
|
1488
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1489
|
+
<path
|
|
1490
|
+
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1491
|
+
/>
|
|
1492
|
+
</svg>
|
|
1493
|
+
</button>
|
|
1494
|
+
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1495
|
+
<input
|
|
1496
|
+
class="seeker"
|
|
1497
|
+
type="range"
|
|
1498
|
+
min="0"
|
|
1499
|
+
max="100"
|
|
1500
|
+
step="1"
|
|
1501
|
+
value="${this._seeker.toString()}"
|
|
1502
|
+
aria-valuemin="0"
|
|
1503
|
+
aria-valuemax="100"
|
|
1504
|
+
role="slider"
|
|
1505
|
+
aria-valuenow="${this._seeker.toString()}"
|
|
1506
|
+
tabindex="0"
|
|
1507
|
+
aria-label="Slider for search"
|
|
1508
|
+
/>
|
|
1509
|
+
<progress max="100" value="${this._seeker}"></progress>
|
|
1510
|
+
</form>
|
|
1511
|
+
${this.simple ? '' : ` <button
|
|
1512
|
+
class="toggleLoop"
|
|
1513
|
+
data-active="${this.loop}"
|
|
1514
|
+
tabindex="0"
|
|
1515
|
+
aria-label="Toggle loop"
|
|
1516
|
+
>
|
|
1517
|
+
<svg
|
|
1518
|
+
width="24"
|
|
1519
|
+
height="24"
|
|
1520
|
+
aria-hidden="true"
|
|
1521
|
+
focusable="false"
|
|
1522
|
+
>
|
|
1523
|
+
<path
|
|
1524
|
+
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"
|
|
1525
|
+
/>
|
|
1526
|
+
</svg>
|
|
1527
|
+
</button>
|
|
1528
|
+
<button
|
|
1529
|
+
class="toggleBoomerang"
|
|
1530
|
+
data-active="${this.mode === exports.PlayMode.Bounce}"
|
|
1531
|
+
aria-label="Toggle boomerang"
|
|
1532
|
+
tabindex="0"
|
|
1533
|
+
>
|
|
1534
|
+
<svg
|
|
1535
|
+
width="24"
|
|
1536
|
+
height="24"
|
|
1537
|
+
aria-hidden="true"
|
|
1538
|
+
focusable="false"
|
|
1539
|
+
>
|
|
1540
|
+
<path
|
|
1541
|
+
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"
|
|
1542
|
+
/>
|
|
1543
|
+
</svg>
|
|
1544
|
+
</button>
|
|
1545
|
+
<button
|
|
1546
|
+
class="toggleSettings"
|
|
1547
|
+
aria-label="Settings"
|
|
1548
|
+
aria-haspopup="true"
|
|
1549
|
+
aria-expanded="${!!this._isSettingsOpen}"
|
|
1550
|
+
aria-controls="${this._identifier}-settings"
|
|
1551
|
+
>
|
|
1552
|
+
<svg
|
|
1553
|
+
width="24"
|
|
1554
|
+
height="24"
|
|
1555
|
+
aria-hidden="true"
|
|
1556
|
+
focusable="false"
|
|
1557
|
+
>
|
|
1558
|
+
<circle cx="12" cy="5.4" r="2.5" />
|
|
1559
|
+
<circle cx="12" cy="12" r="2.5" />
|
|
1560
|
+
<circle cx="12" cy="18.6" r="2.5" />
|
|
1561
|
+
</svg>
|
|
1562
|
+
</button>
|
|
1563
|
+
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1564
|
+
<button
|
|
1565
|
+
class="convert"
|
|
1566
|
+
aria-label="Convert JSON animation to dotLottie format"
|
|
1567
|
+
tabindex="0"
|
|
1568
|
+
hidden
|
|
1569
|
+
>
|
|
1570
|
+
<svg
|
|
1571
|
+
width="24"
|
|
1572
|
+
height="24"
|
|
1573
|
+
aria-hidden="true"
|
|
1574
|
+
focusable="false"
|
|
1575
|
+
>
|
|
1576
|
+
<path
|
|
1577
|
+
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"
|
|
1578
|
+
/>
|
|
1579
|
+
</svg>
|
|
1580
|
+
Convert to dotLottie
|
|
1581
|
+
</button>
|
|
1582
|
+
<button
|
|
1583
|
+
class="snapshot"
|
|
1584
|
+
aria-label="Download still image"
|
|
1585
|
+
tabindex="0"
|
|
1586
|
+
>
|
|
1587
|
+
<svg
|
|
1588
|
+
width="24"
|
|
1589
|
+
height="24"
|
|
1590
|
+
aria-hidden="true"
|
|
1591
|
+
focusable="false"
|
|
1592
|
+
>
|
|
1593
|
+
<path
|
|
1594
|
+
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"
|
|
1595
|
+
/>
|
|
1596
|
+
</svg>
|
|
1597
|
+
Download still image
|
|
1598
|
+
</button>
|
|
1599
|
+
</div>`}
|
|
1600
|
+
</div>
|
|
1601
|
+
` : '';
|
|
1428
1602
|
}
|
|
1429
1603
|
render() {
|
|
1430
|
-
this.template.innerHTML =
|
|
1604
|
+
this.template.innerHTML = `
|
|
1605
|
+
<figure
|
|
1606
|
+
class="animation-container main"
|
|
1607
|
+
data-controls="${this.controls ?? false}"
|
|
1608
|
+
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1609
|
+
role="img"
|
|
1610
|
+
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1611
|
+
data-loaded="${this._playerState.loaded}"
|
|
1612
|
+
>
|
|
1613
|
+
<div class="animation" style="background:${this.background}">
|
|
1614
|
+
${this.playerState === exports.PlayerState.Error ? ` <div class="error">
|
|
1615
|
+
<svg
|
|
1616
|
+
preserveAspectRatio="xMidYMid slice"
|
|
1617
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1618
|
+
xml:space="preserve"
|
|
1619
|
+
width="1920"
|
|
1620
|
+
height="1080"
|
|
1621
|
+
viewBox="0 0 1920 1080"
|
|
1622
|
+
>
|
|
1623
|
+
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1624
|
+
<path
|
|
1625
|
+
fill="#3a6d8b"
|
|
1626
|
+
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"
|
|
1627
|
+
/>
|
|
1628
|
+
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1629
|
+
<text
|
|
1630
|
+
fill="#3a6d8b"
|
|
1631
|
+
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1632
|
+
x="50%"
|
|
1633
|
+
y="848.017"
|
|
1634
|
+
text-anchor="middle"
|
|
1635
|
+
>
|
|
1636
|
+
${this._errorMessage}
|
|
1637
|
+
</text>
|
|
1638
|
+
</svg>
|
|
1639
|
+
</div>` : ''}
|
|
1640
|
+
</div>
|
|
1641
|
+
<slot name="controls"></slot>
|
|
1642
|
+
</figure>
|
|
1643
|
+
`;
|
|
1431
1644
|
this.shadow.adoptedStyleSheets = [
|
|
1432
1645
|
DotLottiePlayer.styles
|
|
1433
1646
|
];
|
|
@@ -1489,11 +1702,12 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1489
1702
|
});
|
|
1490
1703
|
}
|
|
1491
1704
|
}
|
|
1705
|
+
|
|
1492
1706
|
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1493
1707
|
const tagName = 'dotlottie-player';
|
|
1494
1708
|
if (!isServer()) {
|
|
1495
1709
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1496
1710
|
}
|
|
1497
1711
|
|
|
1498
|
-
exports.
|
|
1712
|
+
exports.default = DotLottiePlayer;
|
|
1499
1713
|
exports.tagName = tagName;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/
|
|
7
|
+
"path": "src/DotLottiePlayer.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"readonly": true,
|
|
39
39
|
"inheritedFrom": {
|
|
40
40
|
"name": "EnhancedElement",
|
|
41
|
-
"module": "src/
|
|
41
|
+
"module": "src/EnhancedElement.ts"
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
{
|
|
@@ -751,11 +751,63 @@
|
|
|
751
751
|
],
|
|
752
752
|
"superclass": {
|
|
753
753
|
"name": "EnhancedElement",
|
|
754
|
-
"module": "/src/
|
|
754
|
+
"module": "/src/EnhancedElement"
|
|
755
755
|
},
|
|
756
756
|
"tagName": "dotlottie-player",
|
|
757
757
|
"customElement": true
|
|
758
|
-
}
|
|
758
|
+
}
|
|
759
|
+
],
|
|
760
|
+
"exports": [
|
|
761
|
+
{
|
|
762
|
+
"kind": "js",
|
|
763
|
+
"name": "DotLottiePlayer",
|
|
764
|
+
"declaration": {
|
|
765
|
+
"name": "DotLottiePlayer",
|
|
766
|
+
"module": "src/DotLottiePlayer.ts"
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
]
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"kind": "javascript-module",
|
|
773
|
+
"path": "src/EnhancedElement.ts",
|
|
774
|
+
"declarations": [
|
|
775
|
+
{
|
|
776
|
+
"kind": "class",
|
|
777
|
+
"description": "HTMLElement enhanced to track property changes",
|
|
778
|
+
"name": "EnhancedElement",
|
|
779
|
+
"members": [
|
|
780
|
+
{
|
|
781
|
+
"kind": "field",
|
|
782
|
+
"name": "observedProperties",
|
|
783
|
+
"type": {
|
|
784
|
+
"text": "(keyof EnhancedElement)[]"
|
|
785
|
+
},
|
|
786
|
+
"static": true,
|
|
787
|
+
"default": "[]"
|
|
788
|
+
}
|
|
789
|
+
],
|
|
790
|
+
"superclass": {
|
|
791
|
+
"name": "HTMLElement"
|
|
792
|
+
},
|
|
793
|
+
"customElement": true
|
|
794
|
+
}
|
|
795
|
+
],
|
|
796
|
+
"exports": [
|
|
797
|
+
{
|
|
798
|
+
"kind": "js",
|
|
799
|
+
"name": "default",
|
|
800
|
+
"declaration": {
|
|
801
|
+
"name": "EnhancedElement",
|
|
802
|
+
"module": "src/EnhancedElement.ts"
|
|
803
|
+
}
|
|
804
|
+
}
|
|
805
|
+
]
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"kind": "javascript-module",
|
|
809
|
+
"path": "src/index.ts",
|
|
810
|
+
"declarations": [
|
|
759
811
|
{
|
|
760
812
|
"kind": "variable",
|
|
761
813
|
"name": "tagName",
|
|
@@ -768,7 +820,7 @@
|
|
|
768
820
|
"exports": [
|
|
769
821
|
{
|
|
770
822
|
"kind": "js",
|
|
771
|
-
"name": "
|
|
823
|
+
"name": "default",
|
|
772
824
|
"declaration": {
|
|
773
825
|
"name": "DotLottiePlayer",
|
|
774
826
|
"module": "src/index.ts"
|
|
@@ -811,43 +863,7 @@
|
|
|
811
863
|
"name": "dotlottie-player",
|
|
812
864
|
"declaration": {
|
|
813
865
|
"name": "DotLottiePlayer",
|
|
814
|
-
"module": "src/
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
]
|
|
818
|
-
},
|
|
819
|
-
{
|
|
820
|
-
"kind": "javascript-module",
|
|
821
|
-
"path": "src/observeProperties.ts",
|
|
822
|
-
"declarations": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "class",
|
|
825
|
-
"description": "HTMLElement enhanced to track property changes",
|
|
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
|
-
],
|
|
838
|
-
"superclass": {
|
|
839
|
-
"name": "HTMLElement"
|
|
840
|
-
},
|
|
841
|
-
"customElement": true
|
|
842
|
-
}
|
|
843
|
-
],
|
|
844
|
-
"exports": [
|
|
845
|
-
{
|
|
846
|
-
"kind": "js",
|
|
847
|
-
"name": "default",
|
|
848
|
-
"declaration": {
|
|
849
|
-
"name": "EnhancedElement",
|
|
850
|
-
"module": "src/observeProperties.ts"
|
|
866
|
+
"module": "/src/DotLottiePlayer"
|
|
851
867
|
}
|
|
852
868
|
}
|
|
853
869
|
]
|