@momentum-design/components 0.16.1 → 0.16.3

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

@@ -65,11 +65,6 @@ declare class Button extends Buttonsimple {
      * @default default
      */
     color: ButtonColor;
-    /**
-     * The tabindex of the button.
-     * @default 0
-     */
-    tabIndex: number;
     /**
      * This property defines the ARIA role for the element. By default, it is set to 'button'.
      * Consumers should override this role when:

package/dist/components/button/button.component.js

@@ -69,11 +69,6 @@ class Button extends Buttonsimple {
          * @default default
          */
         this.color = DEFAULTS.COLOR;
-        /**
-         * The tabindex of the button.
-         * @default 0
-         */
-        this.tabIndex = 0;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -238,10 +233,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Button.prototype, "color", void 0);
-__decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Object)
-], Button.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

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

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
 import { ButtonSize, ButtonType } from './buttonsimple.types';
+declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.
@@ -9,7 +10,7 @@ import { ButtonSize, ButtonType } from './buttonsimple.types';
  * @tagname mdc-buttonsimple
  *
  */
-declare class Buttonsimple extends Component {
+declare class Buttonsimple extends Buttonsimple_base {
     /**
      * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
      * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
@@ -17,12 +18,6 @@ declare class Buttonsimple extends Component {
      * @default false
      */
     active: boolean;
-    /**
-     * Indicates whether the button is disabled.
-     * When the button is disabled for user interaction; it is not focusable or clickable.
-     * @default false
-     */
-    disabled: boolean;
     /**
      * Indicates whether the button is soft disabled.
      * When set to `true`, the button appears visually disabled but still allows
@@ -39,11 +34,6 @@ declare class Buttonsimple extends Component {
      * @default 32
      */
     size: ButtonSize;
-    /**
-     * The tabindex of the button.
-     * @default 0
-     */
-    tabIndex: number;
     /**
      * This property defines the ARIA role for the element. By default, it is set to 'button'.
      * Consumers should override this role when:

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -12,6 +12,8 @@ import { property } from 'lit/decorators.js';
 import styles from './buttonsimple.styles';
 import { Component } from '../../models';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.
@@ -20,7 +22,7 @@ import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
  * @tagname mdc-buttonsimple
  *
  */
-class Buttonsimple extends Component {
+class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     /** @internal */
     get form() {
         return this.internals.form;
@@ -34,12 +36,6 @@ class Buttonsimple extends Component {
          * @default false
          */
         this.active = false;
-        /**
-         * Indicates whether the button is disabled.
-         * When the button is disabled for user interaction; it is not focusable or clickable.
-         * @default false
-         */
-        this.disabled = false;
         /**
          * Indicates whether the button is soft disabled.
          * When set to `true`, the button appears visually disabled but still allows
@@ -56,11 +52,6 @@ class Buttonsimple extends Component {
          * @default 32
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * The tabindex of the button.
-         * @default 0
-         */
-        this.tabIndex = 0;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -210,10 +201,6 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], Buttonsimple.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Buttonsimple.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled' }),
     __metadata("design:type", Object)
@@ -222,10 +209,6 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Buttonsimple.prototype, "size", void 0);
-__decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Object)
-], Buttonsimple.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

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;