@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.
@@ -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
  }