@momentum-design/components 0.10.3 → 0.10.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -259,7 +259,7 @@ class Button extends Component {
259
259
  */
260
260
  setAriaPressed(element, active) {
261
261
  if (active) {
262
- element.setAttribute('aria-pressed', 'true');
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', 'true');
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', 'true');
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, TYPE } from './presence.constants';
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
- switch (this.type) {
90
- case TYPE.AWAY:
91
- return 'recents-presence-badge-filled';
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
@@ -35,5 +35,5 @@
35
35
  "@momentum-design/tokens": "*",
36
36
  "lit": "^3.2.0"
37
37
  },
38
- "version": "0.10.3"
38
+ "version": "0.10.5"
39
39
  }