@momentum-design/components 0.22.1 → 0.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
- import { CSSResult } from 'lit';
2
1
  import type { PropertyValues, TemplateResult } from 'lit';
2
+ import { CSSResult } from 'lit';
3
3
  import { Component } from '../../models';
4
- declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Component;
4
+ 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;
5
5
  /**
6
6
  * The `mdc-avatar` component is used to represent a person or a space.
7
7
  * An avatar can be an icon, initials, counter and photo.
@@ -12,6 +12,7 @@ import { state } from 'lit/decorators.js';
12
12
  import { ifDefined } from 'lit/directives/if-defined.js';
13
13
  import { Component } from '../../models';
14
14
  import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
15
+ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
15
16
  import { AVATAR_TYPE, DEFAULTS, MAX_COUNTER } from './avatar.constants';
16
17
  import styles from './avatar.styles';
17
18
  import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './avatar.utils';
@@ -50,7 +51,7 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
50
51
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
51
52
  * Allows customization of the loading overlay background color.
52
53
  */
53
- class Avatar extends AvatarComponentMixin(Component) {
54
+ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
54
55
  constructor() {
55
56
  super(...arguments);
56
57
  /**
@@ -1,6 +1,7 @@
1
- import { CSSResult, PropertyValueMap } from 'lit';
1
+ import type { PropertyValues } from 'lit';
2
+ import { CSSResult } from 'lit';
2
3
  import Buttonsimple from '../buttonsimple/buttonsimple.component';
3
- declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Buttonsimple;
4
+ 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;
4
5
  /**
5
6
  * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
6
7
  *
@@ -17,7 +18,7 @@ declare class AvatarButton extends AvatarButton_base {
17
18
  */
18
19
  ariaLabel: string | null;
19
20
  constructor();
20
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
21
+ update(changedProperties: PropertyValues): void;
21
22
  private setSize;
22
23
  render(): import("lit-html").TemplateResult<1>;
23
24
  static styles: Array<CSSResult>;
@@ -11,6 +11,7 @@ import { html } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import { ifDefined } from 'lit/directives/if-defined.js';
13
13
  import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
14
+ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
14
15
  import { AVATAR_SIZE, DEFAULTS } from '../avatar/avatar.constants';
15
16
  import { DEFAULTS as BUTTON_DEFAULTS } from '../button/button.constants';
16
17
  import Buttonsimple from '../buttonsimple/buttonsimple.component';
@@ -25,7 +26,7 @@ import styles from './avatarbutton.styles';
25
26
  *
26
27
  * @tagname mdc-avatarbutton
27
28
  */
28
- class AvatarButton extends AvatarComponentMixin(Buttonsimple) {
29
+ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
29
30
  constructor() {
30
31
  super();
31
32
  /**
@@ -1,7 +1,8 @@
1
- import { CSSResult, PropertyValues, TemplateResult } from 'lit';
1
+ import type { PropertyValues, TemplateResult } from 'lit';
2
+ import { CSSResult } from 'lit';
2
3
  import { Component } from '../../models';
3
- import type { IconNames } from '../icon/icon.types';
4
- import type { IconVariant, BadgeType } from './badge.types';
4
+ import type { BadgeType, IconVariant } from './badge.types';
5
+ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
5
6
  /**
6
7
  * The `mdc-badge` component is a versatile UI element used to
7
8
  * display dot, icons, counters, success, warning and error type badge.
@@ -36,18 +37,12 @@ import type { IconVariant, BadgeType } from './badge.types';
36
37
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
37
38
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
38
39
  */
39
- declare class Badge extends Component {
40
+ declare class Badge extends Badge_base {
40
41
  /**
41
42
  * Type of the badge
42
43
  * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
43
44
  */
44
45
  type?: BadgeType;
45
- /**
46
- * Name of the icon (= filename).
47
- *
48
- * If no `icon-name` is provided, no icon will be rendered.
49
- */
50
- iconName?: IconNames;
51
46
  /**
52
47
  * Type of the variant can be `primary` or `secondary`.
53
48
  * It defines the background and foreground color of the icon.
@@ -12,8 +12,9 @@ import { classMap } from 'lit-html/directives/class-map.js';
12
12
  import { property } from 'lit/decorators.js';
13
13
  import { ifDefined } from 'lit/directives/if-defined.js';
14
14
  import { Component } from '../../models';
15
+ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
15
16
  import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
16
- import { TYPE as BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
17
+ import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
17
18
  import styles from './badge.styles';
18
19
  /**
19
20
  * The `mdc-badge` component is a versatile UI element used to
@@ -49,7 +50,7 @@ import styles from './badge.styles';
49
50
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
50
51
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
51
52
  */
52
- class Badge extends Component {
53
+ class Badge extends IconNameMixin(Component) {
53
54
  constructor() {
54
55
  super(...arguments);
55
56
  /**
@@ -196,10 +197,6 @@ __decorate([
196
197
  property({ type: String, reflect: true }),
197
198
  __metadata("design:type", String)
198
199
  ], Badge.prototype, "type", void 0);
199
- __decorate([
200
- property({ type: String, attribute: 'icon-name' }),
201
- __metadata("design:type", String)
202
- ], Badge.prototype, "iconName", void 0);
203
200
  __decorate([
204
201
  property({ type: String, reflect: true }),
205
202
  __metadata("design:type", String)
@@ -1,6 +1,7 @@
1
- import { CSSResult, PropertyValueMap } from 'lit';
2
- import type { ButtonColor, ButtonVariant, PillButtonSize, IconButtonSize } from './button.types';
1
+ import type { PropertyValues } from 'lit';
2
+ import { CSSResult } from 'lit';
3
3
  import Buttonsimple from '../buttonsimple/buttonsimple.component';
4
+ import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './button.types';
4
5
  /**
5
6
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
6
7
  *
@@ -85,7 +86,7 @@ declare class Button extends Buttonsimple {
85
86
  * @internal
86
87
  */
87
88
  private prevPostfixIcon?;
88
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
89
+ update(changedProperties: PropertyValues): void;
89
90
  /**
90
91
  * Modifies the icon name based on the active state.
91
92
  * If the button is active, the icon name is suffixed with '-filled'.
@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  };
10
10
  import { html } from 'lit';
11
11
  import { property, state } from 'lit/decorators.js';
12
- import styles from './button.styles';
12
+ import Buttonsimple from '../buttonsimple/buttonsimple.component';
13
13
  import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
14
+ import styles from './button.styles';
14
15
  import { getIconNameWithoutStyle, getIconSize } from './button.utils';
15
- import Buttonsimple from '../buttonsimple/buttonsimple.component';
16
16
  /**
17
17
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
18
18
  *
@@ -1,6 +1,7 @@
1
- import { CSSResult, PropertyValueMap } from 'lit';
1
+ import type { PropertyValues } from 'lit';
2
+ import { CSSResult } from 'lit';
2
3
  import { Component } from '../../models';
3
- import { ButtonSize, ButtonType } from './buttonsimple.types';
4
+ import type { ButtonSize, ButtonType } from './buttonsimple.types';
4
5
  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;
5
6
  /**
6
7
  * `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
8
9
  * Consumers should use the `mdc-button` component instead.
9
10
  *
10
11
  * @tagname mdc-buttonsimple
11
- *
12
12
  */
13
13
  declare class Buttonsimple extends Buttonsimple_base {
14
14
  /**
@@ -62,7 +62,7 @@ declare class Buttonsimple extends Buttonsimple_base {
62
62
  /** @internal */
63
63
  get form(): HTMLFormElement | null;
64
64
  constructor();
65
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
65
+ update(changedProperties: PropertyValues): void;
66
66
  private executeAction;
67
67
  /**
68
68
  * Sets the aria-pressed attribute based on the active state.
@@ -9,18 +9,17 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  };
10
10
  import { html } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
- import styles from './buttonsimple.styles';
13
12
  import { Component } from '../../models';
14
- import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
15
13
  import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
16
14
  import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
15
+ import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
16
+ import styles from './buttonsimple.styles';
17
17
  /**
18
18
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
19
19
  * It is used as an internal component and is not intended to be used directly by consumers.
20
20
  * Consumers should use the `mdc-button` component instead.
21
21
  *
22
22
  * @tagname mdc-buttonsimple
23
- *
24
23
  */
25
24
  class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
26
25
  /** @internal */
@@ -1,6 +1,7 @@
1
- import { CSSResult, PropertyValueMap } from 'lit';
1
+ import type { PropertyValues } from 'lit';
2
+ import { CSSResult } from 'lit';
2
3
  import { Component } from '../../models';
3
- import { Directions, DividerOrientation, DividerVariant } from './divider.types';
4
+ import type { Directions, DividerOrientation, DividerVariant } from './divider.types';
4
5
  /**
5
6
  * `mdc-divider` is a component that provides a line to separate and organize content.
6
7
  * 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 {
116
117
  * @returns The icon that represents the arrow direction.
117
118
  */
118
119
  private getArrowIcon;
119
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
120
+ update(changedProperties: PropertyValues): void;
120
121
  /**
121
122
  * Infers the type of divider based on the kind of slot present.
122
123
  * @param slot - default slot of divider
@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  };
10
10
  import { html } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
- import styles from './divider.styles';
13
12
  import { Component } from '../../models';
14
13
  import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
14
+ import styles from './divider.styles';
15
15
  /**
16
16
  * `mdc-divider` is a component that provides a line to separate and organize content.
17
17
  * It can also include a button or text positioned centrally, allowing users to interact with the layout.
@@ -1,4 +1,6 @@
1
1
  import type { ValueOf } from '../../utils/types';
2
+ import type { IconNames } from '../icon/icon.types';
2
3
  import { VALIDATION } from './formfieldwrapper.constants';
3
4
  type ValidationType = ValueOf<typeof VALIDATION>;
4
- export { ValidationType };
5
+ type HelperIconsList = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'priority-badge-filled'> | '';
6
+ export { HelperIconsList, ValidationType };
@@ -1,4 +1,3 @@
1
- import type { IconNames } from '../icon/icon.types';
2
- import type { ValidationType } from './formfieldwrapper.types';
3
- declare const getHelperIcon: (type: ValidationType) => IconNames | '';
1
+ import type { HelperIconsList, ValidationType } from './formfieldwrapper.types';
2
+ declare const getHelperIcon: (type: ValidationType) => HelperIconsList | '';
4
3
  export { getHelperIcon };
@@ -1,8 +1,8 @@
1
- import { CSSResult, PropertyValueMap } from 'lit';
1
+ import type { PropertyValues } from 'lit';
2
+ import { CSSResult } from 'lit';
2
3
  import { Component } from '../../models';
3
- import { LinkSize } from './link.types';
4
- import { IconNames } from '../icon/icon.types';
5
- declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
4
+ import type { LinkSize } from './link.types';
5
+ 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;
6
6
  /**
7
7
  * `mdc-link` component can be used to navigate to a different page
8
8
  * 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
30
30
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
31
31
  */
32
32
  declare class Link extends Link_base {
33
- /**
34
- * Name of the icon (= filename) to be used as trailing icon for link.
35
- *
36
- * If no `icon` is provided, no icon will be rendered.
37
- */
38
- iconName?: IconNames;
39
33
  /**
40
34
  * The link can be inline or standalone.
41
35
  * @default false
@@ -83,7 +77,7 @@ declare class Link extends Link_base {
83
77
  * If no icon name is provided, no icon will be rendered.
84
78
  */
85
79
  private updateTrailingIcon;
86
- update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
80
+ update(changedProperties: PropertyValues): void;
87
81
  render(): import("lit-html").TemplateResult<1>;
88
82
  static styles: Array<CSSResult>;
89
83
  }
@@ -10,9 +10,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
10
10
  import { html } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import { Component } from '../../models';
13
+ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
14
+ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
13
15
  import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
14
16
  import styles from './link.styles';
15
- import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
16
17
  /**
17
18
  * `mdc-link` component can be used to navigate to a different page
18
19
  * 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';
39
40
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
40
41
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
41
42
  */
42
- class Link extends DisabledMixin(Component) {
43
+ class Link extends DisabledMixin(IconNameMixin(Component)) {
43
44
  constructor() {
44
45
  super(...arguments);
45
46
  /**
@@ -135,10 +136,6 @@ class Link extends DisabledMixin(Component) {
135
136
  }
136
137
  }
137
138
  Link.styles = [...Component.styles, ...styles];
138
- __decorate([
139
- property({ type: String, attribute: 'icon-name' }),
140
- __metadata("design:type", String)
141
- ], Link.prototype, "iconName", void 0);
142
139
  __decorate([
143
140
  property({ type: Boolean, reflect: true }),
144
141
  __metadata("design:type", Boolean)