@momentum-design/components 0.80.0 → 0.80.2

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.
Files changed (69) hide show
  1. package/dist/browser/index.js +420 -398
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/checkbox/checkbox.component.d.ts +4 -0
  4. package/dist/components/checkbox/checkbox.component.js +4 -0
  5. package/dist/components/checkbox/index.d.ts +4 -1
  6. package/dist/components/checkbox/index.js +5 -2
  7. package/dist/components/dialog/dialog.component.d.ts +25 -8
  8. package/dist/components/dialog/dialog.component.js +50 -19
  9. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +5 -0
  10. package/dist/components/formfieldgroup/formfieldgroup.component.js +5 -0
  11. package/dist/components/formfieldgroup/index.d.ts +4 -2
  12. package/dist/components/formfieldgroup/index.js +4 -2
  13. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +21 -1
  14. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +40 -2
  15. package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts +3 -0
  16. package/dist/components/formfieldwrapper/formfieldwrapper.constants.js +3 -0
  17. package/dist/components/formfieldwrapper/index.d.ts +3 -1
  18. package/dist/components/formfieldwrapper/index.js +4 -2
  19. package/dist/components/input/index.d.ts +2 -1
  20. package/dist/components/input/index.js +3 -2
  21. package/dist/components/input/input.component.d.ts +1 -0
  22. package/dist/components/input/input.component.js +1 -0
  23. package/dist/components/input/input.constants.d.ts +1 -1
  24. package/dist/components/popover/popover.component.d.ts +1 -1
  25. package/dist/components/popover/popover.component.js +2 -6
  26. package/dist/components/progressbar/progressbar.component.js +2 -0
  27. package/dist/components/radio/index.d.ts +5 -1
  28. package/dist/components/radio/index.js +5 -1
  29. package/dist/components/radio/radio.component.d.ts +6 -1
  30. package/dist/components/radio/radio.component.js +6 -1
  31. package/dist/components/select/index.d.ts +2 -0
  32. package/dist/components/select/index.js +2 -0
  33. package/dist/components/select/select.component.d.ts +2 -1
  34. package/dist/components/select/select.component.js +7 -6
  35. package/dist/components/textarea/index.d.ts +1 -0
  36. package/dist/components/textarea/index.js +1 -0
  37. package/dist/components/textarea/textarea.component.d.ts +2 -2
  38. package/dist/components/textarea/textarea.component.js +2 -2
  39. package/dist/components/toggle/index.d.ts +3 -0
  40. package/dist/components/toggle/index.js +3 -0
  41. package/dist/components/toggle/toggle.component.d.ts +3 -0
  42. package/dist/components/toggle/toggle.component.js +3 -0
  43. package/dist/components/toggletip/toggletip.component.d.ts +1 -1
  44. package/dist/components/toggletip/toggletip.component.js +5 -12
  45. package/dist/components/toggletip/toggletip.styles.js +2 -2
  46. package/dist/custom-elements.json +2328 -1498
  47. package/dist/react/checkbox/index.d.ts +4 -0
  48. package/dist/react/checkbox/index.js +4 -0
  49. package/dist/react/formfieldgroup/index.d.ts +5 -0
  50. package/dist/react/formfieldgroup/index.js +5 -0
  51. package/dist/react/formfieldwrapper/index.d.ts +5 -1
  52. package/dist/react/formfieldwrapper/index.js +5 -1
  53. package/dist/react/index.d.ts +1 -1
  54. package/dist/react/index.js +1 -1
  55. package/dist/react/input/index.d.ts +1 -0
  56. package/dist/react/input/index.js +1 -0
  57. package/dist/react/radio/index.d.ts +6 -1
  58. package/dist/react/radio/index.js +6 -1
  59. package/dist/react/select/index.d.ts +2 -0
  60. package/dist/react/select/index.js +2 -0
  61. package/dist/react/textarea/index.d.ts +2 -2
  62. package/dist/react/textarea/index.js +2 -2
  63. package/dist/react/toggle/index.d.ts +3 -0
  64. package/dist/react/toggle/index.js +3 -0
  65. package/dist/utils/mixins/CardAndDialogFooterMixin.d.ts +3 -3
  66. package/dist/utils/mixins/CardAndDialogFooterMixin.js +20 -16
  67. package/package.json +1 -1
  68. package/dist/components/dialog/dialog.utils.d.ts +0 -7
  69. package/dist/components/dialog/dialog.utils.js +0 -33
@@ -26,9 +26,11 @@ import styles from './select.styles';
26
26
  * The component ensures accessibility and usability while handling various use cases,
27
27
  * including long text truncation with tooltip support.
28
28
  *
29
+ * @dependency mdc-button
29
30
  * @dependency mdc-icon
30
31
  * @dependency mdc-popover
31
32
  * @dependency mdc-text
33
+ * @dependency mdc-toggletip
32
34
  *
33
35
  * @tagname mdc-select
34
36
  *
@@ -68,11 +70,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
68
70
  super.connectedCallback();
69
71
  // select will only contain name and value will be defined in the options.
70
72
  this.value = undefined;
71
- this.addEventListener('keydown', this.handleKeydown);
72
- }
73
- disconnectedCallback() {
74
- super.disconnectedCallback();
75
- this.removeEventListener('keydown', this.handleKeydown);
76
73
  }
77
74
  /**
78
75
  * A helper function which returns a flattened array of all valid options from the assigned slot.
@@ -94,6 +91,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
94
91
  handlePopoverOpen() {
95
92
  this.displayPopover = true;
96
93
  this.baseIconName = ARROW_ICON.ARROW_UP;
94
+ this.updateActivedescendant();
97
95
  }
98
96
  handlePopoverClose() {
99
97
  this.displayPopover = false;
@@ -343,7 +341,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
343
341
  updateActivedescendant(target) {
344
342
  var _a, _b;
345
343
  const currentIndex = this.getAllValidOptions().findIndex((option) => option === target);
346
- this.activeDescendant = (_b = (_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
344
+ this.activeDescendant = ((_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.getAllValidOptions()[0]) === null || _b === void 0 ? void 0 : _b.id);
347
345
  }
348
346
  resetActivedescendant() {
349
347
  this.activeDescendant = '';
@@ -452,6 +450,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
452
450
  <mdc-popover
453
451
  id="options-popover"
454
452
  triggerid="select-base-triggerid"
453
+ @keydown="${this.handleKeydown}"
455
454
  interactive
456
455
  ?visible="${this.displayPopover}"
457
456
  hide-on-outside-click
@@ -482,6 +481,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
482
481
  <div
483
482
  id="select-base-triggerid"
484
483
  part="base-container"
484
+ @keydown="${this.handleKeydown}"
485
485
  tabindex="${this.disabled ? '-1' : '0'}"
486
486
  class="${this.disabled ? '' : 'mdc-focus-ring'}"
487
487
  role="combobox"
@@ -490,6 +490,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
490
490
  aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
491
491
  aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
492
492
  aria-expanded="${this.displayPopover ? 'true' : 'false'}"
493
+ aria-controls="options-popover"
493
494
  >
494
495
  ${this.selectedIcon
495
496
  ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
@@ -2,6 +2,7 @@ import Textarea from './textarea.component';
2
2
  import '../button';
3
3
  import '../icon';
4
4
  import '../text';
5
+ import '../toggletip';
5
6
  declare global {
6
7
  interface HTMLElementTagNameMap {
7
8
  ['mdc-textarea']: Textarea;
@@ -3,5 +3,6 @@ import { TAG_NAME } from './textarea.constants';
3
3
  import '../button';
4
4
  import '../icon';
5
5
  import '../text';
6
+ import '../toggletip';
6
7
  Textarea.register(TAG_NAME);
7
8
  export default Textarea;
@@ -32,10 +32,10 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
32
32
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
33
33
  * exceeds or restored.
34
34
  *
35
- *
35
+ * @dependency mdc-button
36
36
  * @dependency mdc-icon
37
37
  * @dependency mdc-text
38
- * @dependency mdc-button
38
+ * @dependency mdc-toggletip
39
39
  *
40
40
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
41
41
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
@@ -46,10 +46,10 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
46
46
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
47
47
  * exceeds or restored.
48
48
  *
49
- *
49
+ * @dependency mdc-button
50
50
  * @dependency mdc-icon
51
51
  * @dependency mdc-text
52
- * @dependency mdc-button
52
+ * @dependency mdc-toggletip
53
53
  *
54
54
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
55
55
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
@@ -1,5 +1,8 @@
1
+ import '../button';
1
2
  import '../icon';
2
3
  import '../statictoggle';
4
+ import '../text';
5
+ import '../toggletip';
3
6
  import Toggle from './toggle.component';
4
7
  declare global {
5
8
  interface HTMLElementTagNameMap {
@@ -1,5 +1,8 @@
1
+ import '../button';
1
2
  import '../icon';
2
3
  import '../statictoggle';
4
+ import '../text';
5
+ import '../toggletip';
3
6
  import Toggle from './toggle.component';
4
7
  import { TAG_NAME } from './toggle.constants';
5
8
  Toggle.register(TAG_NAME);
@@ -13,8 +13,11 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
13
13
  *
14
14
  * Note: It internally renders a checkbox styled as a toggle switch.
15
15
  *
16
+ * @dependency mdc-button
16
17
  * @dependency mdc-icon
17
18
  * @dependency mdc-statictoggle
19
+ * @dependency mdc-text
20
+ * @dependency mdc-toggletip
18
21
  *
19
22
  * @tagname mdc-toggle
20
23
  *
@@ -26,8 +26,11 @@ import styles from './toggle.styles';
26
26
  *
27
27
  * Note: It internally renders a checkbox styled as a toggle switch.
28
28
  *
29
+ * @dependency mdc-button
29
30
  * @dependency mdc-icon
30
31
  * @dependency mdc-statictoggle
32
+ * @dependency mdc-text
33
+ * @dependency mdc-toggletip
31
34
  *
32
35
  * @tagname mdc-toggle
33
36
  *
@@ -47,7 +47,7 @@ declare class ToggleTip extends Popover {
47
47
  *
48
48
  * Please refer to the `mdc-screenreaderannouncer` component for more details.
49
49
  */
50
- screenreaderAnnouncerIdentity: string;
50
+ screenreaderAnnouncerIdentity?: string;
51
51
  connectedCallback(): void;
52
52
  /**
53
53
  * @returns The text content of all the nodes in the default slot, joined by a space.
@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  };
10
10
  import { html } from 'lit';
11
11
  import { property, queryAssignedNodes, state } from 'lit/decorators.js';
12
+ import { ifDefined } from 'lit/directives/if-defined.js';
12
13
  import Popover from '../popover/popover.component';
13
14
  import { POPOVER_PLACEMENT } from '../popover/popover.constants';
14
15
  import { DEFAULTS } from './toggletip.constants';
@@ -53,19 +54,11 @@ class ToggleTip extends Popover {
53
54
  super(...arguments);
54
55
  /** @internal */
55
56
  this.currentAnnouncement = '';
56
- /**
57
- * Set this attribute with the id of the element in the DOM, to which announcement
58
- * elements will be appended.
59
- * If an id is provided, the announcement elements will be appended to this element.
60
- * If id is not provided, a visually hidden div element will be created in the DOM.
61
- *
62
- * Please refer to the `mdc-screenreaderannouncer` component for more details.
63
- */
64
- this.screenreaderAnnouncerIdentity = '';
65
57
  }
66
58
  connectedCallback() {
59
+ var _a;
67
60
  super.connectedCallback();
68
- this.closeButton = DEFAULTS.CLOSE_BUTTON;
61
+ this.closeButton = (_a = this.closeButton) !== null && _a !== void 0 ? _a : DEFAULTS.CLOSE_BUTTON;
69
62
  this.closeButtonAriaLabel = DEFAULTS.CLOSE_BUTTON_ARIA_LABEL;
70
63
  this.placement = DEFAULTS.PLACEMENT;
71
64
  this.trigger = DEFAULTS.CLICK;
@@ -108,7 +101,7 @@ class ToggleTip extends Popover {
108
101
  return html `
109
102
  ${super.render()}
110
103
  <mdc-screenreaderannouncer
111
- identity="${this.screenreaderAnnouncerIdentity}"
104
+ identity="${ifDefined(this.screenreaderAnnouncerIdentity)}"
112
105
  announcement="${this.currentAnnouncement}"
113
106
  delay="300">
114
107
  </mdc-screenreaderannouncer>
@@ -126,6 +119,6 @@ __decorate([
126
119
  ], ToggleTip.prototype, "currentAnnouncement", void 0);
127
120
  __decorate([
128
121
  property({ type: String, reflect: true, attribute: 'screenreader-announcer-identity' }),
129
- __metadata("design:type", Object)
122
+ __metadata("design:type", String)
130
123
  ], ToggleTip.prototype, "screenreaderAnnouncerIdentity", void 0);
131
124
  export default ToggleTip;
@@ -22,11 +22,11 @@ const styles = css `
22
22
  color: var(--mdc-toggletip-text-color-contrast);
23
23
  }
24
24
 
25
- :host(:dir(ltr))::part(popover-content) {
25
+ :host([close-button]:dir(ltr))::part(popover-content) {
26
26
  margin-right: 2rem;
27
27
  }
28
28
 
29
- :host(:dir(rtl))::part(popover-content) {
29
+ :host([close-button]:dir(rtl))::part(popover-content) {
30
30
  margin-left: 2rem;
31
31
  }
32
32
  `;