@momentum-design/components 0.16.1 → 0.16.3
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 +41 -39
- package/dist/browser/index.js.map +4 -4
- package/dist/components/button/button.component.d.ts +0 -5
- package/dist/components/button/button.component.js +0 -9
- package/dist/components/buttonsimple/buttonsimple.component.d.ts +2 -12
- package/dist/components/buttonsimple/buttonsimple.component.js +3 -20
- package/dist/components/presence/presence.component.d.ts +14 -0
- package/dist/components/presence/presence.component.js +28 -2
- package/dist/custom-elements.json +603 -550
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/utils/mixins/DisabledMixin.js +5 -0
- package/dist/utils/mixins/TabIndexMixin.js +5 -1
- package/package.json +1 -1
@@ -65,11 +65,6 @@ declare class Button extends Buttonsimple {
|
|
65
65
|
* @default default
|
66
66
|
*/
|
67
67
|
color: ButtonColor;
|
68
|
-
/**
|
69
|
-
* The tabindex of the button.
|
70
|
-
* @default 0
|
71
|
-
*/
|
72
|
-
tabIndex: number;
|
73
68
|
/**
|
74
69
|
* This property defines the ARIA role for the element. By default, it is set to 'button'.
|
75
70
|
* Consumers should override this role when:
|
@@ -69,11 +69,6 @@ class Button extends Buttonsimple {
|
|
69
69
|
* @default default
|
70
70
|
*/
|
71
71
|
this.color = DEFAULTS.COLOR;
|
72
|
-
/**
|
73
|
-
* The tabindex of the button.
|
74
|
-
* @default 0
|
75
|
-
*/
|
76
|
-
this.tabIndex = 0;
|
77
72
|
/**
|
78
73
|
* This property defines the ARIA role for the element. By default, it is set to 'button'.
|
79
74
|
* Consumers should override this role when:
|
@@ -238,10 +233,6 @@ __decorate([
|
|
238
233
|
property({ type: String }),
|
239
234
|
__metadata("design:type", String)
|
240
235
|
], Button.prototype, "color", void 0);
|
241
|
-
__decorate([
|
242
|
-
property({ type: Number, reflect: true }),
|
243
|
-
__metadata("design:type", Object)
|
244
|
-
], Button.prototype, "tabIndex", void 0);
|
245
236
|
__decorate([
|
246
237
|
property({ type: String, reflect: true }),
|
247
238
|
__metadata("design:type", Object)
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { CSSResult, PropertyValueMap } from 'lit';
|
2
2
|
import { Component } from '../../models';
|
3
3
|
import { ButtonSize, ButtonType } from './buttonsimple.types';
|
4
|
+
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;
|
4
5
|
/**
|
5
6
|
* `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
|
6
7
|
* 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';
|
|
9
10
|
* @tagname mdc-buttonsimple
|
10
11
|
*
|
11
12
|
*/
|
12
|
-
declare class Buttonsimple extends
|
13
|
+
declare class Buttonsimple extends Buttonsimple_base {
|
13
14
|
/**
|
14
15
|
* The button's active state indicates whether it is currently toggled on (active) or off (inactive).
|
15
16
|
* 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 {
|
|
17
18
|
* @default false
|
18
19
|
*/
|
19
20
|
active: boolean;
|
20
|
-
/**
|
21
|
-
* Indicates whether the button is disabled.
|
22
|
-
* When the button is disabled for user interaction; it is not focusable or clickable.
|
23
|
-
* @default false
|
24
|
-
*/
|
25
|
-
disabled: boolean;
|
26
21
|
/**
|
27
22
|
* Indicates whether the button is soft disabled.
|
28
23
|
* When set to `true`, the button appears visually disabled but still allows
|
@@ -39,11 +34,6 @@ declare class Buttonsimple extends Component {
|
|
39
34
|
* @default 32
|
40
35
|
*/
|
41
36
|
size: ButtonSize;
|
42
|
-
/**
|
43
|
-
* The tabindex of the button.
|
44
|
-
* @default 0
|
45
|
-
*/
|
46
|
-
tabIndex: number;
|
47
37
|
/**
|
48
38
|
* This property defines the ARIA role for the element. By default, it is set to 'button'.
|
49
39
|
* Consumers should override this role when:
|
@@ -12,6 +12,8 @@ import { property } from 'lit/decorators.js';
|
|
12
12
|
import styles from './buttonsimple.styles';
|
13
13
|
import { Component } from '../../models';
|
14
14
|
import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
|
15
|
+
import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
|
16
|
+
import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
|
15
17
|
/**
|
16
18
|
* `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
|
17
19
|
* 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';
|
|
20
22
|
* @tagname mdc-buttonsimple
|
21
23
|
*
|
22
24
|
*/
|
23
|
-
class Buttonsimple extends Component {
|
25
|
+
class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
|
24
26
|
/** @internal */
|
25
27
|
get form() {
|
26
28
|
return this.internals.form;
|
@@ -34,12 +36,6 @@ class Buttonsimple extends Component {
|
|
34
36
|
* @default false
|
35
37
|
*/
|
36
38
|
this.active = false;
|
37
|
-
/**
|
38
|
-
* Indicates whether the button is disabled.
|
39
|
-
* When the button is disabled for user interaction; it is not focusable or clickable.
|
40
|
-
* @default false
|
41
|
-
*/
|
42
|
-
this.disabled = false;
|
43
39
|
/**
|
44
40
|
* Indicates whether the button is soft disabled.
|
45
41
|
* When set to `true`, the button appears visually disabled but still allows
|
@@ -56,11 +52,6 @@ class Buttonsimple extends Component {
|
|
56
52
|
* @default 32
|
57
53
|
*/
|
58
54
|
this.size = DEFAULTS.SIZE;
|
59
|
-
/**
|
60
|
-
* The tabindex of the button.
|
61
|
-
* @default 0
|
62
|
-
*/
|
63
|
-
this.tabIndex = 0;
|
64
55
|
/**
|
65
56
|
* This property defines the ARIA role for the element. By default, it is set to 'button'.
|
66
57
|
* Consumers should override this role when:
|
@@ -210,10 +201,6 @@ __decorate([
|
|
210
201
|
property({ type: Boolean }),
|
211
202
|
__metadata("design:type", Object)
|
212
203
|
], Buttonsimple.prototype, "active", void 0);
|
213
|
-
__decorate([
|
214
|
-
property({ type: Boolean }),
|
215
|
-
__metadata("design:type", Object)
|
216
|
-
], Buttonsimple.prototype, "disabled", void 0);
|
217
204
|
__decorate([
|
218
205
|
property({ type: Boolean, attribute: 'soft-disabled' }),
|
219
206
|
__metadata("design:type", Object)
|
@@ -222,10 +209,6 @@ __decorate([
|
|
222
209
|
property({ type: Number, reflect: true }),
|
223
210
|
__metadata("design:type", Number)
|
224
211
|
], Buttonsimple.prototype, "size", void 0);
|
225
|
-
__decorate([
|
226
|
-
property({ type: Number, reflect: true }),
|
227
|
-
__metadata("design:type", Object)
|
228
|
-
], Buttonsimple.prototype, "tabIndex", void 0);
|
229
212
|
__decorate([
|
230
213
|
property({ type: String, reflect: true }),
|
231
214
|
__metadata("design:type", Object)
|
@@ -47,6 +47,11 @@ declare class Presence extends Component {
|
|
47
47
|
* @default small
|
48
48
|
*/
|
49
49
|
size: PresenceSize;
|
50
|
+
/**
|
51
|
+
* @internal
|
52
|
+
* State to track the current icon type (previous type until the new icon is loaded)
|
53
|
+
*/
|
54
|
+
private currentIconType;
|
50
55
|
/**
|
51
56
|
* Get the size of the presence icon based on the given size type
|
52
57
|
*/
|
@@ -55,6 +60,15 @@ declare class Presence extends Component {
|
|
55
60
|
* Get the icon name based on the presence type
|
56
61
|
*/
|
57
62
|
private get icon();
|
63
|
+
/**
|
64
|
+
* Handles the successful load of an icon.
|
65
|
+
* Sets the `currentIconType` property to match the `type` property.
|
66
|
+
*/
|
67
|
+
private handleOnLoad;
|
68
|
+
/**
|
69
|
+
* Handles an error that occurs when loading an icon.
|
70
|
+
*/
|
71
|
+
private handleOnError;
|
58
72
|
render(): import("lit-html").TemplateResult<1>;
|
59
73
|
static styles: Array<CSSResult>;
|
60
74
|
}
|
@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
9
|
};
|
10
10
|
import { html } from 'lit';
|
11
|
-
import { property } from 'lit/decorators.js';
|
11
|
+
import { property, state } from 'lit/decorators.js';
|
12
12
|
import { Component } from '../../models';
|
13
13
|
import { DEFAULTS, SIZE } from './presence.constants';
|
14
14
|
import styles from './presence.styles';
|
@@ -61,6 +61,11 @@ class Presence extends Component {
|
|
61
61
|
* @default small
|
62
62
|
*/
|
63
63
|
this.size = DEFAULTS.SIZE;
|
64
|
+
/**
|
65
|
+
* @internal
|
66
|
+
* State to track the current icon type (previous type until the new icon is loaded)
|
67
|
+
*/
|
68
|
+
this.currentIconType = DEFAULTS.TYPE;
|
64
69
|
}
|
65
70
|
/**
|
66
71
|
* Get the size of the presence icon based on the given size type
|
@@ -93,13 +98,30 @@ class Presence extends Component {
|
|
93
98
|
}
|
94
99
|
return iconName;
|
95
100
|
}
|
101
|
+
/**
|
102
|
+
* Handles the successful load of an icon.
|
103
|
+
* Sets the `currentIconType` property to match the `type` property.
|
104
|
+
*/
|
105
|
+
handleOnLoad() {
|
106
|
+
this.currentIconType = this.type;
|
107
|
+
}
|
108
|
+
/**
|
109
|
+
* Handles an error that occurs when loading an icon.
|
110
|
+
*/
|
111
|
+
handleOnError() {
|
112
|
+
if (this.onerror) {
|
113
|
+
this.onerror('There was a problem while fetching the icon. Please check the icon name and try again.');
|
114
|
+
}
|
115
|
+
}
|
96
116
|
render() {
|
97
117
|
return html `
|
98
118
|
<div class="mdc-presence mdc-presence__${this.size}">
|
99
119
|
<mdc-icon
|
100
|
-
class="mdc-presence-icon mdc-presence-icon__${this.
|
120
|
+
class="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
|
101
121
|
name="${this.icon}"
|
102
122
|
size="${this.iconSize}"
|
123
|
+
@load="${this.handleOnLoad}"
|
124
|
+
@error="${this.handleOnError}"
|
103
125
|
></mdc-icon>
|
104
126
|
</div>
|
105
127
|
`;
|
@@ -114,4 +136,8 @@ __decorate([
|
|
114
136
|
property({ type: String, reflect: true }),
|
115
137
|
__metadata("design:type", String)
|
116
138
|
], Presence.prototype, "size", void 0);
|
139
|
+
__decorate([
|
140
|
+
state(),
|
141
|
+
__metadata("design:type", String)
|
142
|
+
], Presence.prototype, "currentIconType", void 0);
|
117
143
|
export default Presence;
|