@momentum-design/components 0.22.0 → 0.22.2

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

@@ -1,7 +1,7 @@
-import { CSSResult } from 'lit';
 import type { PropertyValues, TemplateResult } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Component;
+declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * The `mdc-avatar` component is used to represent a person or a space.
  * An avatar can be an icon, initials, counter and photo.

package/dist/components/avatar/avatar.component.js

@@ -12,6 +12,7 @@ import { state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { AVATAR_TYPE, DEFAULTS, MAX_COUNTER } from './avatar.constants';
 import styles from './avatar.styles';
 import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './avatar.utils';
@@ -50,7 +51,7 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  */
-class Avatar extends AvatarComponentMixin(Component) {
+class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     constructor() {
         super(...arguments);
         /**

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

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Buttonsimple;
+declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
  *
@@ -17,7 +18,7 @@ declare class AvatarButton extends AvatarButton_base {
    */
     ariaLabel: string | null;
     constructor();
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     private setSize;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -11,6 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { AVATAR_SIZE, DEFAULTS } from '../avatar/avatar.constants';
 import { DEFAULTS as BUTTON_DEFAULTS } from '../button/button.constants';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
@@ -25,7 +26,7 @@ import styles from './avatarbutton.styles';
  *
  * @tagname mdc-avatarbutton
  */
-class AvatarButton extends AvatarComponentMixin(Buttonsimple) {
+class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
         super();
         /**

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

@@ -1,7 +1,8 @@
-import { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { IconNames } from '../icon/icon.types';
-import type { IconVariant, BadgeType } from './badge.types';
+import type { BadgeType, IconVariant } from './badge.types';
+declare const Badge_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * The `mdc-badge` component is a versatile UI element used to
  * display dot, icons, counters, success, warning and error type badge.
@@ -36,18 +37,12 @@ import type { IconVariant, BadgeType } from './badge.types';
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
-declare class Badge extends Component {
+declare class Badge extends Badge_base {
     /**
      * Type of the badge
      * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
      */
     type?: BadgeType;
-    /**
-     * Name of the icon (= filename).
-     *
-     * If no `icon-name` is provided, no icon will be rendered.
-     */
-    iconName?: IconNames;
     /**
      * Type of the variant can be `primary` or `secondary`.
      * It defines the background and foreground color of the icon.

package/dist/components/badge/badge.component.js

@@ -12,8 +12,9 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { TYPE as BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
+import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
 import styles from './badge.styles';
 /**
  * The `mdc-badge` component is a versatile UI element used to
@@ -49,7 +50,7 @@ import styles from './badge.styles';
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
-class Badge extends Component {
+class Badge extends IconNameMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -196,10 +197,6 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Badge.prototype, "type", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], Badge.prototype, "iconName", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
-import type { ButtonColor, ButtonVariant, PillButtonSize, IconButtonSize } from './button.types';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './button.types';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -85,7 +86,7 @@ declare class Button extends Buttonsimple {
      * @internal
      */
     private prevPostfixIcon?;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.
      * If the button is active, the icon name is suffixed with '-filled'.

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

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './button.styles';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
+import styles from './button.styles';
 import { getIconNameWithoutStyle, getIconSize } from './button.utils';
-import Buttonsimple from '../buttonsimple/buttonsimple.component';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *

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

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { ButtonSize, ButtonType } from './buttonsimple.types';
+import type { 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.
@@ -8,7 +9,6 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 declare class Buttonsimple extends Buttonsimple_base {
     /**
@@ -62,7 +62,7 @@ declare class Buttonsimple extends Buttonsimple_base {
     /** @internal */
     get form(): HTMLFormElement | null;
     constructor();
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     private executeAction;
     /**
      * Sets the aria-pressed attribute based on the active state.

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

@@ -9,18 +9,17 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 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';
+import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
+import styles from './buttonsimple.styles';
 /**
  * `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.
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     /** @internal */

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

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { Directions, DividerOrientation, DividerVariant } from './divider.types';
+import type { Directions, DividerOrientation, DividerVariant } from './divider.types';
 /**
  * `mdc-divider` is a component that provides a line to separate and organize content.
  * It can also include a button or text positioned centrally, allowing users to interact with the layout.
@@ -116,7 +117,7 @@ declare class Divider extends Component {
      * @returns The icon that represents the arrow direction.
      */
     private getArrowIcon;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     /**
      * Infers the type of divider based on the kind of slot present.
      * @param slot - default slot of divider

package/dist/components/divider/divider.component.js

@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './divider.styles';
 import { Component } from '../../models';
 import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
+import styles from './divider.styles';
 /**
  * `mdc-divider` is a component that provides a line to separate and organize content.
  * It can also include a button or text positioned centrally, allowing users to interact with the layout.

package/dist/components/formfieldwrapper/formfieldwrapper.types.d.ts

@@ -1,4 +1,6 @@
 import type { ValueOf } from '../../utils/types';
+import type { IconNames } from '../icon/icon.types';
 import { VALIDATION } from './formfieldwrapper.constants';
 type ValidationType = ValueOf<typeof VALIDATION>;
-export { ValidationType };
+type HelperIconsList = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'priority-badge-filled'> | '';
+export { HelperIconsList, ValidationType };

package/dist/components/formfieldwrapper/formfieldwrapper.utils.d.ts

@@ -1,4 +1,3 @@
-import type { IconNames } from '../icon/icon.types';
-import type { ValidationType } from './formfieldwrapper.types';
-declare const getHelperIcon: (type: ValidationType) => IconNames | '';
+import type { HelperIconsList, ValidationType } from './formfieldwrapper.types';
+declare const getHelperIcon: (type: ValidationType) => HelperIconsList | '';
 export { getHelperIcon };

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

@@ -175,6 +175,12 @@ declare class Input extends Input_base {
    * @param event - Event which contains information about the value change.
    */
     private onChange;
+    /**
+     * Handles the keydown event of the input field.
+     * If the key pressed is 'Enter', it submits the form.
+     * @param event - Keyboard event
+     */
+    private handleKeyDown;
     /**
    * Renders the leading icon before the input field.
    * If the leading icon is not set, it will not be displayed.

package/dist/components/input/input.component.js

@@ -212,6 +212,17 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
+    /**
+     * Handles the keydown event of the input field.
+     * If the key pressed is 'Enter', it submits the form.
+     * @param event - Keyboard event
+     */
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Enter') {
+            (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
+    }
     /**
    * Renders the leading icon before the input field.
    * If the leading icon is not set, it will not be displayed.
@@ -319,6 +330,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             size=${ifDefined(this.size)}
             @input=${this.onInput}
             @change=${this.onChange}
+            @keydown=${this.handleKeyDown}
           />
         </slot>
        </div>

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

@@ -1,8 +1,8 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { LinkSize } from './link.types';
-import { IconNames } from '../icon/icon.types';
-declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+import type { LinkSize } from './link.types';
+declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
@@ -30,12 +30,6 @@ declare const Link_base: import("../../utils/mixins/index.types").Constructor<im
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
 declare class Link extends Link_base {
-    /**
-     * Name of the icon (= filename) to be used as trailing icon for link.
-     *
-     * If no `icon` is provided, no icon will be rendered.
-     */
-    iconName?: IconNames;
     /**
      * The link can be inline or standalone.
      * @default false
@@ -83,7 +77,7 @@ declare class Link extends Link_base {
      * If no icon name is provided, no icon will be rendered.
      */
     private updateTrailingIcon;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/link/link.component.js

@@ -10,9 +10,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
 import styles from './link.styles';
-import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
@@ -39,7 +40,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
-class Link extends DisabledMixin(Component) {
+class Link extends DisabledMixin(IconNameMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -135,10 +136,6 @@ class Link extends DisabledMixin(Component) {
     }
 }
 Link.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], Link.prototype, "iconName", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)