@momentum-design/components 0.16.0 → 0.16.1

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

@@ -61,6 +61,11 @@ declare class Icon extends Component {
     private readonly iconProviderContext;
     private abortController;
     constructor();
+    /**
+     * 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)
      * and sets state and attributes once fetched successfully
@@ -70,6 +75,19 @@ declare class Icon extends Component {
      * then attempting to read the response body will reject with an AbortError exception.
      */
     private getIconData;
+    /**
+     * 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
      */

package/dist/components/icon/icon.component.js

@@ -66,6 +66,17 @@ class Icon extends Component {
         this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
         this.abortController = new AbortController(); // Initialize AbortController
     }
+    /**
+     * 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)
      * and sets state and attributes once fetched successfully
@@ -80,16 +91,44 @@ class Icon extends Component {
             if (url && fileExtension && this.name) {
                 this.abortController.abort();
                 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);
+                }
             }
         }
     }
+    /**
+     * 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
      */