@momentum-design/components 0.73.3 → 0.73.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.
@@ -11,7 +11,7 @@ import { html } from 'lit';
|
|
11
11
|
import { property } from 'lit/decorators.js';
|
12
12
|
import { createRef, ref } from 'lit/directives/ref.js';
|
13
13
|
import lottie from 'lottie-web/build/player/lottie_light';
|
14
|
-
import
|
14
|
+
import animationManifest from '@momentum-design/animations/dist/manifest';
|
15
15
|
import styles from './animation.styles';
|
16
16
|
import { Component } from '../../models';
|
17
17
|
import { DEFAULTS } from './animation.constants';
|
@@ -123,13 +123,15 @@ class Animation extends Component {
|
|
123
123
|
* Import animation data dynamically
|
124
124
|
*/
|
125
125
|
getAnimationData() {
|
126
|
-
if (
|
127
|
-
|
126
|
+
if (this.name && animationManifest[this.name]) {
|
127
|
+
const path = animationManifest[this.name].replace(/^\./, '');
|
128
|
+
import(`@momentum-design/animations/dist${path}`)
|
129
|
+
.then((result) => this.onLoadSuccessHandler(result.default))
|
130
|
+
.catch((error) => this.onLoadFailHandler(error));
|
131
|
+
}
|
132
|
+
else {
|
133
|
+
this.onLoadFailHandler(new Error(`Invalid animation name: ${this.name}`));
|
128
134
|
}
|
129
|
-
const path = animationManifest[this.name].replace(/^\./, '');
|
130
|
-
return import(`@momentum-design/animations/dist${path}`)
|
131
|
-
.then((result) => this.onLoadSuccessHandler(result.default))
|
132
|
-
.catch((error) => this.onLoadFailHandler(error));
|
133
135
|
}
|
134
136
|
updated(changedProperties) {
|
135
137
|
super.updated(changedProperties);
|
@@ -137,7 +139,7 @@ class Animation extends Component {
|
|
137
139
|
// note: we re-create the animation for parameter changes as well, because lottie
|
138
140
|
// does not API for changing them on the fly
|
139
141
|
if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
|
140
|
-
this.getAnimationData()
|
142
|
+
this.getAnimationData();
|
141
143
|
}
|
142
144
|
if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
|
143
145
|
this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
|
@@ -492,6 +492,67 @@
|
|
492
492
|
}
|
493
493
|
]
|
494
494
|
},
|
495
|
+
{
|
496
|
+
"kind": "javascript-module",
|
497
|
+
"path": "components/appheader/appheader.component.js",
|
498
|
+
"declarations": [
|
499
|
+
{
|
500
|
+
"kind": "class",
|
501
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
502
|
+
"name": "Appheader",
|
503
|
+
"cssParts": [
|
504
|
+
{
|
505
|
+
"description": "The main container for styling the header.",
|
506
|
+
"name": "container"
|
507
|
+
},
|
508
|
+
{
|
509
|
+
"description": "The leading section of the header.",
|
510
|
+
"name": "leading-section"
|
511
|
+
},
|
512
|
+
{
|
513
|
+
"description": "The center section of the header.",
|
514
|
+
"name": "center-section"
|
515
|
+
},
|
516
|
+
{
|
517
|
+
"description": "The trailing section of the header.",
|
518
|
+
"name": "trailing-section"
|
519
|
+
}
|
520
|
+
],
|
521
|
+
"slots": [
|
522
|
+
{
|
523
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
524
|
+
"name": "leading"
|
525
|
+
},
|
526
|
+
{
|
527
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
528
|
+
"name": "center"
|
529
|
+
},
|
530
|
+
{
|
531
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
532
|
+
"name": "trailing"
|
533
|
+
}
|
534
|
+
],
|
535
|
+
"members": [],
|
536
|
+
"superclass": {
|
537
|
+
"name": "Component",
|
538
|
+
"module": "/src/models"
|
539
|
+
},
|
540
|
+
"tagName": "mdc-appheader",
|
541
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
542
|
+
"customElement": true
|
543
|
+
}
|
544
|
+
],
|
545
|
+
"exports": [
|
546
|
+
{
|
547
|
+
"kind": "js",
|
548
|
+
"name": "default",
|
549
|
+
"declaration": {
|
550
|
+
"name": "Appheader",
|
551
|
+
"module": "components/appheader/appheader.component.js"
|
552
|
+
}
|
553
|
+
}
|
554
|
+
]
|
555
|
+
},
|
495
556
|
{
|
496
557
|
"kind": "javascript-module",
|
497
558
|
"path": "components/animation/animation.component.js",
|
@@ -704,67 +765,6 @@
|
|
704
765
|
}
|
705
766
|
]
|
706
767
|
},
|
707
|
-
{
|
708
|
-
"kind": "javascript-module",
|
709
|
-
"path": "components/appheader/appheader.component.js",
|
710
|
-
"declarations": [
|
711
|
-
{
|
712
|
-
"kind": "class",
|
713
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
714
|
-
"name": "Appheader",
|
715
|
-
"cssParts": [
|
716
|
-
{
|
717
|
-
"description": "The main container for styling the header.",
|
718
|
-
"name": "container"
|
719
|
-
},
|
720
|
-
{
|
721
|
-
"description": "The leading section of the header.",
|
722
|
-
"name": "leading-section"
|
723
|
-
},
|
724
|
-
{
|
725
|
-
"description": "The center section of the header.",
|
726
|
-
"name": "center-section"
|
727
|
-
},
|
728
|
-
{
|
729
|
-
"description": "The trailing section of the header.",
|
730
|
-
"name": "trailing-section"
|
731
|
-
}
|
732
|
-
],
|
733
|
-
"slots": [
|
734
|
-
{
|
735
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
736
|
-
"name": "leading"
|
737
|
-
},
|
738
|
-
{
|
739
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
740
|
-
"name": "center"
|
741
|
-
},
|
742
|
-
{
|
743
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
744
|
-
"name": "trailing"
|
745
|
-
}
|
746
|
-
],
|
747
|
-
"members": [],
|
748
|
-
"superclass": {
|
749
|
-
"name": "Component",
|
750
|
-
"module": "/src/models"
|
751
|
-
},
|
752
|
-
"tagName": "mdc-appheader",
|
753
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
754
|
-
"customElement": true
|
755
|
-
}
|
756
|
-
],
|
757
|
-
"exports": [
|
758
|
-
{
|
759
|
-
"kind": "js",
|
760
|
-
"name": "default",
|
761
|
-
"declaration": {
|
762
|
-
"name": "Appheader",
|
763
|
-
"module": "components/appheader/appheader.component.js"
|
764
|
-
}
|
765
|
-
}
|
766
|
-
]
|
767
|
-
},
|
768
768
|
{
|
769
769
|
"kind": "javascript-module",
|
770
770
|
"path": "components/avatar/avatar.component.js",
|
package/dist/react/index.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
export { default as AlertChip } from './alertchip';
|
2
|
-
export { default as Animation } from './animation';
|
3
2
|
export { default as Appheader } from './appheader';
|
3
|
+
export { default as Animation } from './animation';
|
4
4
|
export { default as Avatar } from './avatar';
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
6
|
export { default as Badge } from './badge';
|
package/dist/react/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
export { default as AlertChip } from './alertchip';
|
2
|
-
export { default as Animation } from './animation';
|
3
2
|
export { default as Appheader } from './appheader';
|
3
|
+
export { default as Animation } from './animation';
|
4
4
|
export { default as Avatar } from './avatar';
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
6
|
export { default as Badge } from './badge';
|
package/package.json
CHANGED