@momentum-design/components - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

dist/components/icon/icon.component.d.ts

@@ -65,2 +65,7 @@ import { CSSResult } from 'lit';
     /**
+     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
+     * This event bubbles and is cancelable.
+     */
+    private triggerIconLoaded;
+    /**
      * Get Icon Data function which will fetch the icon (currently only svg)
@@ -75,2 +80,15 @@ * and sets state and attributes once fetched successfully
     /**
+     * Sets the iconData state to the fetched icon,
+     * and calls functions to set role, aria-label and aria-hidden attributes on the icon.
+     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
+     * @param iconHtml - The icon html element which has been fetched from the icon provider.
+     */
+    private handleIconLoadedSuccess;
+    /**
+     * Dispatches an 'error' event on the component when the icon fetching has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    private handleIconLoadedFailure;
+    /**
      * Updates the size by setting the width and height
@@ -77,0 +95,0 @@ */

dist/components/icon/icon.component.js

@@ -70,2 +70,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     /**
+     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
+     * This event bubbles and is cancelable.
+     */
+    triggerIconLoaded() {
+        const loadEvent = new Event('load', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(loadEvent);
+    }
+    /**
      * Get Icon Data function which will fetch the icon (currently only svg)
@@ -84,9 +95,9 @@ * and sets state and attributes once fetched successfully
                 this.abortController = new AbortController();
-                const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
-                // update iconData state once fetched:
-                this.iconData = iconHtml;
-                // when icon got fetched, set role and aria-label:
-                this.setRoleOnIcon();
-                this.setAriaLabelOnIcon();
-                this.setAriaHiddenOnIcon();
+                try {
+                    const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
+                    this.handleIconLoadedSuccess(iconHtml);
+                }
+                catch (error) {
+                    this.handleIconLoadedFailure(error);
+                }
             }
@@ -96,2 +107,30 @@ }
     /**
+     * Sets the iconData state to the fetched icon,
+     * and calls functions to set role, aria-label and aria-hidden attributes on the icon.
+     * Dispatches a 'load' event on the component once the icon has been successfully loaded.
+     * @param iconHtml - The icon html element which has been fetched from the icon provider.
+     */
+    handleIconLoadedSuccess(iconHtml) {
+        // update iconData state once fetched:
+        this.iconData = iconHtml;
+        // when icon is fetched successfully, set the role, aria-label and invoke function to trigger icon load event.
+        this.setRoleOnIcon();
+        this.setAriaLabelOnIcon();
+        this.setAriaHiddenOnIcon();
+        this.triggerIconLoaded();
+    }
+    /**
+     * Dispatches an 'error' event on the component when the icon fetching has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    handleIconLoadedFailure(error) {
+        const errorEvent = new CustomEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            detail: { error },
+        });
+        this.dispatchEvent(errorEvent);
+    }
+    /**
      * Updates the size by setting the width and height
@@ -98,0 +137,0 @@ */

dist/react/index.d.ts

 export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
@@ -5,0 +5,0 @@ export { default as Button } from './button';

dist/react/index.js

 export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
@@ -5,0 +5,0 @@ export { default as Button } from './button';

package.json

@@ -38,3 +38,3 @@ {
   },
-  "version": "0.16.0"
+  "version": "0.16.1"
 }

No alert changes

Improved metrics

Total package byte prevSize

899306

increased by0.68%

Lines of code

11021

increased by0.9%

No dependency changes