@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.
@@ -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 Component {
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.type}"
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;