@momentum-design/components 0.16.0 → 0.16.2

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
      */

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

@@ -47,6 +47,11 @@ declare class Presence extends Component {
      * @default small
      */
     size: PresenceSize;
+    /**
+     * @internal
+     * State to track the current icon type (previous type until the new icon is loaded)
+     */
+    private currentIconType;
     /**
      * Get the size of the presence icon based on the given size type
      */
@@ -55,6 +60,15 @@ declare class Presence extends Component {
      * Get the icon name based on the presence type
      */
     private get icon();
+    /**
+      * Handles the successful load of an icon.
+      * Sets the `currentIconType` property to match the `type` property.
+    */
+    private handleOnLoad;
+    /**
+     * Handles an error that occurs when loading an icon.
+    */
+    private handleOnError;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/presence/presence.component.js

@@ -8,7 +8,7 @@ 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 { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DEFAULTS, SIZE } from './presence.constants';
 import styles from './presence.styles';
@@ -61,6 +61,11 @@ class Presence extends Component {
          * @default small
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * @internal
+         * State to track the current icon type (previous type until the new icon is loaded)
+         */
+        this.currentIconType = DEFAULTS.TYPE;
     }
     /**
      * Get the size of the presence icon based on the given size type
@@ -93,13 +98,30 @@ class Presence extends Component {
         }
         return iconName;
     }
+    /**
+      * Handles the successful load of an icon.
+      * Sets the `currentIconType` property to match the `type` property.
+    */
+    handleOnLoad() {
+        this.currentIconType = this.type;
+    }
+    /**
+     * Handles an error that occurs when loading an icon.
+    */
+    handleOnError() {
+        if (this.onerror) {
+            this.onerror('There was a problem while fetching the icon. Please check the icon name and try again.');
+        }
+    }
     render() {
         return html `
       <div class="mdc-presence mdc-presence__${this.size}">
         <mdc-icon
-          class="mdc-presence-icon mdc-presence-icon__${this.type}"
+          class="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
           name="${this.icon}"
           size="${this.iconSize}"
+          @load="${this.handleOnLoad}"
+          @error="${this.handleOnError}"
         ></mdc-icon>
       </div>
     `;
@@ -114,4 +136,8 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Presence.prototype, "size", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Presence.prototype, "currentIconType", void 0);
 export default Presence;

package/dist/custom-elements.json

@@ -2222,12 +2222,52 @@
               "privacy": "private",
               "default": "new AbortController()"
             },
+            {
+              "kind": "method",
+              "name": "triggerIconLoaded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatches a 'load' event on the component once the icon has been successfully loaded.\nThis event bubbles and is cancelable."
+            },
             {
               "kind": "method",
               "name": "getIconData",
               "privacy": "private",
               "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
             },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconHtml",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The icon html element which has been fetched from the icon provider."
+                }
+              ],
+              "description": "Sets the iconData state to the fetched icon,\nand calls functions to set role, aria-label and aria-hidden attributes on the icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            },
             {
               "kind": "method",
               "name": "updateSize",
@@ -2564,6 +2604,28 @@
               "privacy": "private",
               "description": "Get the icon name based on the presence type",
               "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleOnLoad",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
+            },
+            {
+              "kind": "method",
+              "name": "handleOnError",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles an error that occurs when loading an icon."
             }
           ],
           "attributes": [

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.16.0"
+  "version": "0.16.2"
 }