@momentum-design/components 0.10.3 → 0.10.5
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 +19 -19
- package/dist/browser/index.js.map +4 -4
- package/dist/components/button/button.component.js +5 -5
- package/dist/components/presence/presence.component.js +6 -32
- package/dist/components/presence/presence.utils.d.ts +2 -0
- package/dist/components/presence/presence.utils.js +34 -0
- package/dist/custom-elements.json +4 -2
- package/package.json +1 -1
@@ -259,7 +259,7 @@ class Button extends Component {
|
|
259
259
|
*/
|
260
260
|
setAriaPressed(element, active) {
|
261
261
|
if (active) {
|
262
|
-
element.setAttribute('aria-pressed', '
|
262
|
+
element.setAttribute('aria-pressed', '');
|
263
263
|
}
|
264
264
|
else {
|
265
265
|
element.removeAttribute('aria-pressed');
|
@@ -275,7 +275,7 @@ class Button extends Component {
|
|
275
275
|
*/
|
276
276
|
setSoftDisabled(element, softDisabled) {
|
277
277
|
if (softDisabled) {
|
278
|
-
element.setAttribute('aria-disabled', '
|
278
|
+
element.setAttribute('aria-disabled', '');
|
279
279
|
}
|
280
280
|
else {
|
281
281
|
element.removeAttribute('aria-disabled');
|
@@ -292,7 +292,7 @@ class Button extends Component {
|
|
292
292
|
*/
|
293
293
|
setDisabled(element, disabled) {
|
294
294
|
if (disabled) {
|
295
|
-
element.setAttribute('aria-disabled', '
|
295
|
+
element.setAttribute('aria-disabled', '');
|
296
296
|
this.prevTabindex = this.tabIndex;
|
297
297
|
this.tabIndex = -1;
|
298
298
|
}
|
@@ -396,11 +396,11 @@ __decorate([
|
|
396
396
|
__metadata("design:type", Object)
|
397
397
|
], Button.prototype, "softDisabled", void 0);
|
398
398
|
__decorate([
|
399
|
-
property({ type: String, attribute: 'prefix-icon' }),
|
399
|
+
property({ type: String, attribute: 'prefix-icon', reflect: true }),
|
400
400
|
__metadata("design:type", String)
|
401
401
|
], Button.prototype, "prefixIcon", void 0);
|
402
402
|
__decorate([
|
403
|
-
property({ type: String, attribute: 'postfix-icon' }),
|
403
|
+
property({ type: String, attribute: 'postfix-icon', reflect: true }),
|
404
404
|
__metadata("design:type", String)
|
405
405
|
], Button.prototype, "postfixIcon", void 0);
|
406
406
|
__decorate([
|
@@ -10,8 +10,9 @@ 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 { DEFAULTS, SIZE
|
13
|
+
import { DEFAULTS, SIZE } from './presence.constants';
|
14
14
|
import styles from './presence.styles';
|
15
|
+
import { getIconValue } from './presence.utils';
|
15
16
|
/**
|
16
17
|
* The `mdc-presence` component is a versatile UI element used to
|
17
18
|
* display the presence status of a user or entity within an avatar component.
|
@@ -86,38 +87,11 @@ class Presence extends Component {
|
|
86
87
|
* Get the icon name based on the presence type
|
87
88
|
*/
|
88
89
|
get icon() {
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
case TYPE.AWAY_CALLING:
|
93
|
-
return 'away-calling-presence-filled';
|
94
|
-
case TYPE.BUSY:
|
95
|
-
return 'busy-presence-bold';
|
96
|
-
case TYPE.DND:
|
97
|
-
return 'dnd-presence-badge-filled';
|
98
|
-
case TYPE.MEETING:
|
99
|
-
return 'camera-filled';
|
100
|
-
case TYPE.ON_CALL:
|
101
|
-
return 'handset-filled';
|
102
|
-
case TYPE.ON_DEVICE:
|
103
|
-
return 'generic-device-video-badge-filled';
|
104
|
-
case TYPE.ON_MOBILE:
|
105
|
-
return 'phone-badge-filled';
|
106
|
-
case TYPE.PAUSE:
|
107
|
-
return 'pause-badge-filled';
|
108
|
-
case TYPE.PTO:
|
109
|
-
return 'pto-presence-filled';
|
110
|
-
case TYPE.PRESENTING:
|
111
|
-
return 'share-screen-badge-filled';
|
112
|
-
case TYPE.QUIET:
|
113
|
-
return 'quiet-hours-presence-filled';
|
114
|
-
case TYPE.SCHEDULED:
|
115
|
-
return 'meetings-presence-badge-filled';
|
116
|
-
case TYPE.ACTIVE:
|
117
|
-
default:
|
118
|
-
this.type = DEFAULTS.TYPE;
|
119
|
-
return 'active-presence-small-filled';
|
90
|
+
const iconName = getIconValue(this.type);
|
91
|
+
if (iconName === 'active-presence-small-filled') {
|
92
|
+
this.type = DEFAULTS.TYPE;
|
120
93
|
}
|
94
|
+
return iconName;
|
121
95
|
}
|
122
96
|
render() {
|
123
97
|
return html `
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import type { PresenceType } from './presence.types';
|
2
|
+
export declare const getIconValue: (type: PresenceType) => "active-presence-small-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "dnd-presence-badge-filled" | "generic-device-video-badge-filled" | "handset-filled" | "meetings-presence-badge-filled" | "pause-badge-filled" | "phone-badge-filled" | "pto-presence-filled" | "quiet-hours-presence-filled" | "recents-presence-badge-filled" | "share-screen-badge-filled";
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import { TYPE } from './presence.constants';
|
2
|
+
export const getIconValue = (type) => {
|
3
|
+
switch (type) {
|
4
|
+
case TYPE.AWAY:
|
5
|
+
return 'recents-presence-badge-filled';
|
6
|
+
case TYPE.AWAY_CALLING:
|
7
|
+
return 'away-calling-presence-filled';
|
8
|
+
case TYPE.BUSY:
|
9
|
+
return 'busy-presence-bold';
|
10
|
+
case TYPE.DND:
|
11
|
+
return 'dnd-presence-badge-filled';
|
12
|
+
case TYPE.MEETING:
|
13
|
+
return 'camera-filled';
|
14
|
+
case TYPE.ON_CALL:
|
15
|
+
return 'handset-filled';
|
16
|
+
case TYPE.ON_DEVICE:
|
17
|
+
return 'generic-device-video-badge-filled';
|
18
|
+
case TYPE.ON_MOBILE:
|
19
|
+
return 'phone-badge-filled';
|
20
|
+
case TYPE.PAUSE:
|
21
|
+
return 'pause-badge-filled';
|
22
|
+
case TYPE.PTO:
|
23
|
+
return 'pto-presence-filled';
|
24
|
+
case TYPE.PRESENTING:
|
25
|
+
return 'share-screen-badge-filled';
|
26
|
+
case TYPE.QUIET:
|
27
|
+
return 'quiet-hours-presence-filled';
|
28
|
+
case TYPE.SCHEDULED:
|
29
|
+
return 'meetings-presence-badge-filled';
|
30
|
+
case TYPE.ACTIVE:
|
31
|
+
default:
|
32
|
+
return 'active-presence-small-filled';
|
33
|
+
}
|
34
|
+
};
|
@@ -498,7 +498,8 @@
|
|
498
498
|
"text": "string | undefined"
|
499
499
|
},
|
500
500
|
"description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
|
501
|
-
"attribute": "prefix-icon"
|
501
|
+
"attribute": "prefix-icon",
|
502
|
+
"reflects": true
|
502
503
|
},
|
503
504
|
{
|
504
505
|
"kind": "field",
|
@@ -507,7 +508,8 @@
|
|
507
508
|
"text": "string | undefined"
|
508
509
|
},
|
509
510
|
"description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
|
510
|
-
"attribute": "postfix-icon"
|
511
|
+
"attribute": "postfix-icon",
|
512
|
+
"reflects": true
|
511
513
|
},
|
512
514
|
{
|
513
515
|
"kind": "field",
|
package/package.json
CHANGED