@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
@@ -8,7 +8,11 @@ import Component from '../../components/checkbox';
8
8
  *
9
9
  * To create a group of checkboxes, use the FormFieldGroup component.
10
10
  *
11
+ * @dependency mdc-button
11
12
  * @dependency mdc-icon
13
+ * @dependency mdc-staticcheckbox
14
+ * @dependency mdc-text
15
+ * @dependency mdc-toggletip
12
16
  *
13
17
  * @tagname mdc-checkbox
14
18
  *
@@ -10,7 +10,11 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
10
10
  *
11
11
  * To create a group of checkboxes, use the FormFieldGroup component.
12
12
  *
13
+ * @dependency mdc-button
13
14
  * @dependency mdc-icon
15
+ * @dependency mdc-staticcheckbox
16
+ * @dependency mdc-text
17
+ * @dependency mdc-toggletip
14
18
  *
15
19
  * @tagname mdc-checkbox
16
20
  *
@@ -17,6 +17,11 @@ import Component from '../../components/formfieldgroup';
17
17
  *
18
18
  * @tagname mdc-formfieldgroup
19
19
  *
20
+ * @dependency mdc-button
21
+ * @dependency mdc-icon
22
+ * @dependency mdc-text
23
+ * @dependency mdc-toggletip
24
+ *
20
25
  * @slot default - This is a default slot for checkbox or toggle components.
21
26
  */
22
27
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
@@ -20,6 +20,11 @@ import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constan
20
20
  *
21
21
  * @tagname mdc-formfieldgroup
22
22
  *
23
+ * @dependency mdc-button
24
+ * @dependency mdc-icon
25
+ * @dependency mdc-text
26
+ * @dependency mdc-toggletip
27
+ *
23
28
  * @slot default - This is a default slot for checkbox or toggle components.
24
29
  */
25
30
  const reactWrapper = createComponent({
@@ -6,7 +6,11 @@ import Component from '../../components/formfieldwrapper';
6
6
  *
7
7
  * @tagname mdc-formfieldwrapper
8
8
  *
9
- * @slot label-info - slot to add the label info icon
9
+ * @dependency mdc-text
10
+ * @dependency mdc-icon
11
+ * @dependency mdc-button
12
+ * @dependency mdc-toggletip
13
+ *
10
14
  *
11
15
  */
12
16
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
@@ -9,7 +9,11 @@ import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.con
9
9
  *
10
10
  * @tagname mdc-formfieldwrapper
11
11
  *
12
- * @slot label-info - slot to add the label info icon
12
+ * @dependency mdc-text
13
+ * @dependency mdc-icon
14
+ * @dependency mdc-button
15
+ * @dependency mdc-toggletip
16
+ *
13
17
  *
14
18
  */
15
19
  const reactWrapper = createComponent({
@@ -44,10 +44,10 @@ export { default as Popover } from './popover';
44
44
  export { default as Presence } from './presence';
45
45
  export { default as Progressbar } from './progressbar';
46
46
  export { default as Progressspinner } from './progressspinner';
47
- export { default as Radio } from './radio';
48
47
  export { default as RadioGroup } from './radiogroup';
49
48
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
50
49
  export { default as Searchfield } from './searchfield';
50
+ export { default as Radio } from './radio';
51
51
  export { default as Select } from './select';
52
52
  export { default as Spinner } from './spinner';
53
53
  export { default as StaticCheckbox } from './staticcheckbox';
@@ -44,10 +44,10 @@ export { default as Popover } from './popover';
44
44
  export { default as Presence } from './presence';
45
45
  export { default as Progressbar } from './progressbar';
46
46
  export { default as Progressspinner } from './progressspinner';
47
- export { default as Radio } from './radio';
48
47
  export { default as RadioGroup } from './radiogroup';
49
48
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
50
49
  export { default as Searchfield } from './searchfield';
50
+ export { default as Radio } from './radio';
51
51
  export { default as Select } from './select';
52
52
  export { default as Spinner } from './spinner';
53
53
  export { default as StaticCheckbox } from './staticcheckbox';
@@ -22,6 +22,7 @@ import Component from '../../components/input';
22
22
  * @dependency mdc-icon
23
23
  * @dependency mdc-text
24
24
  * @dependency mdc-button
25
+ * @dependency mdc-toggletip
25
26
  *
26
27
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
27
28
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
@@ -24,6 +24,7 @@ import { TAG_NAME } from '../../components/input/input.constants';
24
24
  * @dependency mdc-icon
25
25
  * @dependency mdc-text
26
26
  * @dependency mdc-button
27
+ * @dependency mdc-toggletip
27
28
  *
28
29
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
29
30
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
@@ -5,7 +5,12 @@ import Component from '../../components/radio';
5
5
  * These are often used in forms, settings, and selection in lists.
6
6
  *
7
7
  * A radio component contains an optional label, optional info icon and an optional helper text.
8
- * @dependency mdc-formfieldwrapper
8
+ *
9
+ * @dependency mdc-button
10
+ * @dependency mdc-icon
11
+ * @dependency mdc-text
12
+ * @dependency mdc-staticradio
13
+ * @dependency mdc-toggletip
9
14
  *
10
15
  * @tagname mdc-radio
11
16
  *
@@ -7,7 +7,12 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
7
7
  * These are often used in forms, settings, and selection in lists.
8
8
  *
9
9
  * A radio component contains an optional label, optional info icon and an optional helper text.
10
- * @dependency mdc-formfieldwrapper
10
+ *
11
+ * @dependency mdc-button
12
+ * @dependency mdc-icon
13
+ * @dependency mdc-text
14
+ * @dependency mdc-staticradio
15
+ * @dependency mdc-toggletip
11
16
  *
12
17
  * @tagname mdc-radio
13
18
  *
@@ -6,9 +6,11 @@ import Component from '../../components/select';
6
6
  * The component ensures accessibility and usability while handling various use cases,
7
7
  * including long text truncation with tooltip support.
8
8
  *
9
+ * @dependency mdc-button
9
10
  * @dependency mdc-icon
10
11
  * @dependency mdc-popover
11
12
  * @dependency mdc-text
13
+ * @dependency mdc-toggletip
12
14
  *
13
15
  * @tagname mdc-select
14
16
  *
@@ -8,9 +8,11 @@ import { TAG_NAME } from '../../components/select/select.constants';
8
8
  * The component ensures accessibility and usability while handling various use cases,
9
9
  * including long text truncation with tooltip support.
10
10
  *
11
+ * @dependency mdc-button
11
12
  * @dependency mdc-icon
12
13
  * @dependency mdc-popover
13
14
  * @dependency mdc-text
15
+ * @dependency mdc-toggletip
14
16
  *
15
17
  * @tagname mdc-select
16
18
  *
@@ -29,10 +29,10 @@ import Component from '../../components/textarea';
29
29
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
30
30
  * exceeds or restored.
31
31
  *
32
- *
32
+ * @dependency mdc-button
33
33
  * @dependency mdc-icon
34
34
  * @dependency mdc-text
35
- * @dependency mdc-button
35
+ * @dependency mdc-toggletip
36
36
  *
37
37
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
38
38
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
@@ -31,10 +31,10 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
31
31
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
32
32
  * exceeds or restored.
33
33
  *
34
- *
34
+ * @dependency mdc-button
35
35
  * @dependency mdc-icon
36
36
  * @dependency mdc-text
37
- * @dependency mdc-button
37
+ * @dependency mdc-toggletip
38
38
  *
39
39
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
40
40
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
@@ -10,8 +10,11 @@ import Component from '../../components/toggle';
10
10
  *
11
11
  * Note: It internally renders a checkbox styled as a toggle switch.
12
12
  *
13
+ * @dependency mdc-button
13
14
  * @dependency mdc-icon
14
15
  * @dependency mdc-statictoggle
16
+ * @dependency mdc-text
17
+ * @dependency mdc-toggletip
15
18
  *
16
19
  * @tagname mdc-toggle
17
20
  *
@@ -12,8 +12,11 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
12
12
  *
13
13
  * Note: It internally renders a checkbox styled as a toggle switch.
14
14
  *
15
+ * @dependency mdc-button
15
16
  * @dependency mdc-icon
16
17
  * @dependency mdc-statictoggle
18
+ * @dependency mdc-text
19
+ * @dependency mdc-toggletip
17
20
  *
18
21
  * @tagname mdc-toggle
19
22
  *
@@ -1,9 +1,9 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
2
  import type { Constructor } from './index.types';
3
3
  export declare class CardAndDialogFooterMixinInterface {
4
- footerLink?: Array<HTMLElement>;
5
- footerButtonPrimary?: Array<HTMLElement>;
6
- footerButtonSecondary?: Array<HTMLElement>;
4
+ protected footerLink?: Array<HTMLElement>;
5
+ protected footerButtonPrimary?: Array<HTMLElement>;
6
+ protected footerButtonSecondary?: Array<HTMLElement>;
7
7
  protected updateFooterButtonColors(variant: string): void;
8
8
  protected handleFooterSlot(tagname: string, variant?: string): void;
9
9
  protected renderFooter(): TemplateResult;
@@ -15,11 +15,11 @@ import { BUTTON_COLORS, BUTTON_VARIANTS } from '../../components/button/button.c
15
15
  export const CardAndDialogFooterMixin = (superClass) => {
16
16
  class InnerMixinClass extends superClass {
17
17
  /**
18
- * Updates the color of the footer buttons based on the variant.
19
- * If the variant is promotional, the color is promotional, else default.
20
- *
21
- * @internal
22
- */
18
+ * Updates the color of the footer buttons based on the variant.
19
+ * If the variant is promotional, the color is promotional, else default.
20
+ *
21
+ * @internal
22
+ */
23
23
  updateFooterButtonColors(variant) {
24
24
  const footerButtons = [...(this.footerButtonPrimary || []), ...(this.footerButtonSecondary || [])];
25
25
  footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach((button) => {
@@ -32,13 +32,13 @@ export const CardAndDialogFooterMixin = (superClass) => {
32
32
  });
33
33
  }
34
34
  /**
35
- * Filters and renders only the following content into the footer section and removes anything other than it
36
- * - One mdc-link element in the footer-link slot
37
- * - One secondary variant of the mdc-button element in the footer-button-secondary slot
38
- * - One primary variant of the mdc-button element in the footer-button-primary slot
39
- *
40
- * @internal
41
- */
35
+ * Filters and renders only the following content into the footer section and removes anything other than it
36
+ * - One mdc-link element in the footer-link slot
37
+ * - One secondary variant of the mdc-button element in the footer-button-secondary slot
38
+ * - One primary variant of the mdc-button element in the footer-button-primary slot
39
+ *
40
+ * @internal
41
+ */
42
42
  handleFooterSlot(tagname, variant) {
43
43
  var _a, _b, _c;
44
44
  let arrayItems = [];
@@ -78,10 +78,14 @@ export const CardAndDialogFooterMixin = (superClass) => {
78
78
  renderFooter() {
79
79
  return html `<div part="footer">
80
80
  <slot name="footer-link" @slotchange=${() => this.handleFooterSlot(DEFAULTS.LINK)}></slot>
81
- <slot name="footer-button-secondary"
82
- @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}></slot>
83
- <slot name="footer-button-primary"
84
- @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}></slot>
81
+ <slot
82
+ name="footer-button-secondary"
83
+ @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}
84
+ ></slot>
85
+ <slot
86
+ name="footer-button-primary"
87
+ @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}
88
+ ></slot>
85
89
  </div>`;
86
90
  }
87
91
  }
package/package.json CHANGED
@@ -41,5 +41,5 @@
41
41
  "lottie-web": "^5.12.2",
42
42
  "uuid": "^11.0.5"
43
43
  },
44
- "version": "0.80.0"
44
+ "version": "0.80.2"
45
45
  }
@@ -1,7 +0,0 @@
1
- import type Dialog from './dialog.component';
2
- export declare class DialogUtils {
3
- private dialog;
4
- constructor(dialog: Dialog);
5
- setupAriaAttributes(): void;
6
- createBackdrop(): void;
7
- }
@@ -1,33 +0,0 @@
1
- export class DialogUtils {
2
- constructor(dialog) {
3
- this.dialog = dialog;
4
- }
5
- setupAriaAttributes() {
6
- if (this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
7
- this.dialog.setAttribute('aria-labelledby', this.dialog.headerText);
8
- }
9
- else if (!this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
10
- this.dialog.setAttribute('aria-labelledby', this.dialog.triggerId);
11
- }
12
- }
13
- createBackdrop() {
14
- var _a;
15
- const backdrop = document.createElement('div');
16
- backdrop.classList.add('dialog-backdrop');
17
- const styleElement = document.createElement('style');
18
- styleElement.textContent = `
19
- .dialog-backdrop {
20
- position: fixed;
21
- top: 0;
22
- left: 0;
23
- width: 100%;
24
- height: 100%;
25
- background: var(--mds-color-theme-common-overlays-secondary-normal);
26
- z-index: ${this.dialog.zIndex - 1};
27
- }
28
- `;
29
- backdrop.appendChild(styleElement);
30
- (_a = this.dialog.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
31
- this.dialog.backdropElement = backdrop;
32
- }
33
- }