@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.
- package/dist/browser/index.js +114 -114
- package/dist/browser/index.js.map +4 -4
- package/dist/components/avatar/avatar.component.d.ts +2 -2
- package/dist/components/avatar/avatar.component.js +2 -1
- package/dist/components/avatarbutton/avatarbutton.component.d.ts +4 -3
- package/dist/components/avatarbutton/avatarbutton.component.js +2 -1
- package/dist/components/badge/badge.component.d.ts +5 -10
- package/dist/components/badge/badge.component.js +3 -6
- package/dist/components/button/button.component.d.ts +4 -3
- package/dist/components/button/button.component.js +2 -2
- package/dist/components/buttonsimple/buttonsimple.component.d.ts +4 -4
- package/dist/components/buttonsimple/buttonsimple.component.js +2 -3
- package/dist/components/divider/divider.component.d.ts +4 -3
- package/dist/components/divider/divider.component.js +1 -1
- package/dist/components/formfieldwrapper/formfieldwrapper.types.d.ts +3 -1
- package/dist/components/formfieldwrapper/formfieldwrapper.utils.d.ts +2 -3
- package/dist/components/link/link.component.d.ts +5 -11
- package/dist/components/link/link.component.js +3 -6
- package/dist/custom-elements.json +168 -101
- package/dist/react/buttonsimple/index.d.ts +0 -1
- package/dist/react/buttonsimple/index.js +0 -1
- package/dist/utils/mixins/AvatarComponentMixin.d.ts +0 -2
- package/dist/utils/mixins/AvatarComponentMixin.js +0 -4
- package/dist/utils/mixins/IconNameMixin.d.ts +7 -0
- package/dist/utils/mixins/IconNameMixin.js +20 -0
- package/package.json +1 -1
@@ -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 {
|
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:
|
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 {
|
1
|
+
import type { PropertyValues, TemplateResult } from 'lit';
|
2
|
+
import { CSSResult } from 'lit';
|
2
3
|
import { Component } from '../../models';
|
3
|
-
import type {
|
4
|
-
|
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
|
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 {
|
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 {
|
2
|
-
import
|
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:
|
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
|
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 {
|
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:
|
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 {
|
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:
|
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
|
-
|
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 {
|
2
|
-
|
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 {
|
1
|
+
import type { PropertyValues } from 'lit';
|
2
|
+
import { CSSResult } from 'lit';
|
2
3
|
import { Component } from '../../models';
|
3
|
-
import { LinkSize } from './link.types';
|
4
|
-
|
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:
|
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)
|