@momentum-design/components 0.71.2 → 0.72.0

package/dist/components/animation/animation.component.d.ts

@@ -0,0 +1,76 @@
+import { CSSResult } from 'lit';
+import { AnimationItem } from 'lottie-web/build/player/lottie_light';
+import { Component } from '../../models';
+import { AnimationNames, LoopType } from './animation.types';
+/**
+ * The `mdc-animation` component is a wrapper around the Lottie animation library.
+ * It fetches the animation data dynamically based on the provided name and renders it.
+ * This is a display only component that does not have any interactive functionality.
+ * From accessibility perspective, (by default) it is a decorative image component.
+ *
+ * @tagname mdc-animation
+ *
+ * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
+ * @event error - (React: onError) This event is dispatched when animation loading failed
+ */
+declare class Animation extends Component {
+    /**
+     * Name of the animation (= filename)
+     */
+    name?: AnimationNames;
+    /**
+     * How many times to loop the animation
+     * - "true" - infinite
+     * - "false" - no loop
+     * - number - number of times to loop
+     */
+    loop?: LoopType;
+    /**
+     * Weather start the animation automatically
+     */
+    autoplay?: boolean;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * Aria-labelledby attribute to be set for accessibility
+     */
+    ariaLabelledBy: string | null;
+    /**
+     * Lottie animation instance
+     */
+    private lottieInstance?;
+    /**
+     * Container for the animation
+     */
+    private containerRef;
+    /**
+     * Exposed API of the animation library (lottie)
+     */
+    get animation(): AnimationItem | undefined;
+    private getLoopValue;
+    /**
+     * Create new lotty instance for the loaded data
+     */
+    private onLoadSuccessHandler;
+    /**
+     * Error handler for animation loading
+     */
+    private onLoadFailHandler;
+    /**
+     * Import animation data dynamically
+     */
+    private getAnimationData;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Re-dispatch the complete event from the animation library
+     *
+     * This handler called with the animation instance instead of the component instance
+     * so we need to bind it to the component instance. The arrow function just does that.
+     */
+    onCompleteHandler: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Animation;

package/dist/components/animation/animation.component.js

@@ -0,0 +1,168 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import lottie from 'lottie-web/build/player/lottie_light';
+import * as animationManifest from '@momentum-design/animations/dist/manifest.json';
+import styles from './animation.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './animation.constants';
+/**
+ * The `mdc-animation` component is a wrapper around the Lottie animation library.
+ * It fetches the animation data dynamically based on the provided name and renders it.
+ * This is a display only component that does not have any interactive functionality.
+ * From accessibility perspective, (by default) it is a decorative image component.
+ *
+ * @tagname mdc-animation
+ *
+ * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
+ * @event error - (React: onError) This event is dispatched when animation loading failed
+ */
+class Animation extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Name of the animation (= filename)
+         */
+        this.name = DEFAULTS.NAME;
+        /**
+         * How many times to loop the animation
+         * - "true" - infinite
+         * - "false" - no loop
+         * - number - number of times to loop
+         */
+        this.loop = DEFAULTS.LOOP;
+        /**
+         * Weather start the animation automatically
+         */
+        this.autoplay = DEFAULTS.AUTO_PLAY;
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+         * Aria-labelledby attribute to be set for accessibility
+         */
+        this.ariaLabelledBy = null;
+        /**
+         * Container for the animation
+         */
+        this.containerRef = createRef();
+        /**
+         * Re-dispatch the complete event from the animation library
+         *
+         * This handler called with the animation instance instead of the component instance
+         * so we need to bind it to the component instance. The arrow function just does that.
+         */
+        this.onCompleteHandler = () => {
+            const event = new CustomEvent('complete', {
+                detail: { name: this.name },
+                bubbles: true,
+            });
+            this.dispatchEvent(event);
+        };
+    }
+    /**
+     * Exposed API of the animation library (lottie)
+     */
+    get animation() {
+        return this.lottieInstance;
+    }
+    getLoopValue() {
+        if (this.loop === 'true')
+            return true;
+        if (this.loop === 'false')
+            return false;
+        if (this.loop)
+            return Number(this.loop);
+        return true;
+    }
+    /**
+     * Create new lotty instance for the loaded data
+     */
+    onLoadSuccessHandler(animationData) {
+        if (this.lottieInstance) {
+            this.lottieInstance.removeEventListener('complete', this.onCompleteHandler);
+            this.lottieInstance.destroy();
+        }
+        if (this.containerRef.value) {
+            this.lottieInstance = lottie.loadAnimation({
+                container: this.containerRef.value,
+                renderer: 'svg',
+                loop: this.getLoopValue(),
+                autoplay: this.autoplay,
+                animationData,
+                name: this.name,
+            });
+            this.lottieInstance.addEventListener('complete', this.onCompleteHandler);
+        }
+    }
+    /**
+     * Error handler for animation loading
+     */
+    onLoadFailHandler(error) {
+        const errorEvent = new CustomEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            detail: { error },
+        });
+        this.dispatchEvent(errorEvent);
+    }
+    /**
+     * Import animation data dynamically
+     */
+    getAnimationData() {
+        if (!(this.name && animationManifest[this.name])) {
+            return Promise.reject(new Error(`Invalid animation name: ${this.name}`));
+        }
+        const path = animationManifest[this.name].replace(/^\./, '');
+        return import(`@momentum-design/animations/dist${path}`)
+            .then((result) => this.onLoadSuccessHandler(result.default))
+            .catch((error) => this.onLoadFailHandler(error));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // fetch animation data when new animation needed or any animation parameter changed
+        // note: we re-create the animation for parameter changes as well, because lottie
+        //       does not API for changing them on the fly
+        if (changedProperties.has('name') || changedProperties.has('loop') || changedProperties.has('autoplay')) {
+            this.getAnimationData().catch((err) => { var _a; return (_a = this.onerror) === null || _a === void 0 ? void 0 : _a.call(this, err.message); });
+        }
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
+            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
+        }
+    }
+    render() {
+        return html `<div aria-hidden="true" ${ref(this.containerRef)}></div>`;
+    }
+}
+Animation.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Animation.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Animation.prototype, "loop", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Animation.prototype, "autoplay", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Animation.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-labelledby' }),
+    __metadata("design:type", Object)
+], Animation.prototype, "ariaLabelledBy", void 0);
+export default Animation;

package/dist/components/animation/animation.constants.d.ts

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-animation";
+declare const DEFAULTS: {
+    readonly NAME: undefined;
+    readonly AUTO_PLAY: true;
+    readonly LOOP: "true";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/animation/animation.constants.js

@@ -0,0 +1,8 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('animation');
+const DEFAULTS = {
+    NAME: undefined,
+    AUTO_PLAY: true,
+    LOOP: 'true',
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/animation/animation.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/animation/animation.styles.js

@@ -0,0 +1,3 @@
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles];
+export default styles;

package/dist/components/animation/animation.types.d.ts

@@ -0,0 +1,10 @@
+import type AnimationNames from '@momentum-design/animations/dist/types/types';
+/** Event mapping for React */
+interface Events {
+    /** This event is dispatched when all animation loops completed */
+    onCompleteEvent: Event;
+    /** This event is dispatched when animation loading failed */
+    onErrorEvent: Event;
+}
+type LoopType = `${boolean | number}`;
+export type { Events, AnimationNames, LoopType };

package/dist/components/animation/animation.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/animation/index.d.ts

@@ -0,0 +1,7 @@
+import Animation from './animation.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-animation']: Animation;
+    }
+}
+export default Animation;

package/dist/components/animation/index.js

@@ -0,0 +1,4 @@
+import Animation from './animation.component';
+import { TAG_NAME } from './animation.constants';
+Animation.register(TAG_NAME);
+export default Animation;