@momentum-design/components - npm Package Compare versions

Comparing version 0.16.1 to 0.16.2

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

@@ -51,2 +51,7 @@ import { CSSResult } from 'lit';
     /**
+     * @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
@@ -59,2 +64,11 @@ */
     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>;
@@ -61,0 +75,0 @@ static styles: Array<CSSResult>;

dist/components/presence/presence.component.js

@@ -11,3 +11,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
@@ -65,2 +65,7 @@ import { DEFAULTS, SIZE } from './presence.constants';
         this.size = DEFAULTS.SIZE;
+        /**
+         * @internal
+         * State to track the current icon type (previous type until the new icon is loaded)
+         */
+        this.currentIconType = DEFAULTS.TYPE;
     }
@@ -98,2 +103,17 @@ /**
     }
+    /**
+      * 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() {
@@ -103,5 +123,7 @@ return html `
         <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>
@@ -121,2 +143,6 @@ </div>
 ], Presence.prototype, "size", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Presence.prototype, "currentIconType", void 0);
 export default Presence;

dist/react/index.d.ts

 export { default as Avatar } from './avatar';
+export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as AvatarButton } from './avatarbutton';
 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 AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as AvatarButton } from './avatarbutton';
 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.1"
+  "version": "0.16.2"
 }

No alert changes

Improved metrics

Total package byte prevSize

902611

increased by0.37%

Lines of code

11086

increased by0.59%

No dependency changes