@momentum-design/components 0.16.1 → 0.16.2

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;