@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.
- package/dist/browser/index.js +420 -398
- package/dist/browser/index.js.map +4 -4
- package/dist/components/checkbox/checkbox.component.d.ts +4 -0
- package/dist/components/checkbox/checkbox.component.js +4 -0
- package/dist/components/checkbox/index.d.ts +4 -1
- package/dist/components/checkbox/index.js +5 -2
- package/dist/components/dialog/dialog.component.d.ts +25 -8
- package/dist/components/dialog/dialog.component.js +50 -19
- package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +5 -0
- package/dist/components/formfieldgroup/formfieldgroup.component.js +5 -0
- package/dist/components/formfieldgroup/index.d.ts +4 -2
- package/dist/components/formfieldgroup/index.js +4 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +21 -1
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +40 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts +3 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.constants.js +3 -0
- package/dist/components/formfieldwrapper/index.d.ts +3 -1
- package/dist/components/formfieldwrapper/index.js +4 -2
- package/dist/components/input/index.d.ts +2 -1
- package/dist/components/input/index.js +3 -2
- package/dist/components/input/input.component.d.ts +1 -0
- package/dist/components/input/input.component.js +1 -0
- package/dist/components/input/input.constants.d.ts +1 -1
- package/dist/components/popover/popover.component.d.ts +1 -1
- package/dist/components/popover/popover.component.js +2 -6
- package/dist/components/progressbar/progressbar.component.js +2 -0
- package/dist/components/radio/index.d.ts +5 -1
- package/dist/components/radio/index.js +5 -1
- package/dist/components/radio/radio.component.d.ts +6 -1
- package/dist/components/radio/radio.component.js +6 -1
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.js +2 -0
- package/dist/components/select/select.component.d.ts +2 -1
- package/dist/components/select/select.component.js +7 -6
- package/dist/components/textarea/index.d.ts +1 -0
- package/dist/components/textarea/index.js +1 -0
- package/dist/components/textarea/textarea.component.d.ts +2 -2
- package/dist/components/textarea/textarea.component.js +2 -2
- package/dist/components/toggle/index.d.ts +3 -0
- package/dist/components/toggle/index.js +3 -0
- package/dist/components/toggle/toggle.component.d.ts +3 -0
- package/dist/components/toggle/toggle.component.js +3 -0
- package/dist/components/toggletip/toggletip.component.d.ts +1 -1
- package/dist/components/toggletip/toggletip.component.js +5 -12
- package/dist/components/toggletip/toggletip.styles.js +2 -2
- package/dist/custom-elements.json +2328 -1498
- package/dist/react/checkbox/index.d.ts +4 -0
- package/dist/react/checkbox/index.js +4 -0
- package/dist/react/formfieldgroup/index.d.ts +5 -0
- package/dist/react/formfieldgroup/index.js +5 -0
- package/dist/react/formfieldwrapper/index.d.ts +5 -1
- package/dist/react/formfieldwrapper/index.js +5 -1
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/input/index.d.ts +1 -0
- package/dist/react/input/index.js +1 -0
- package/dist/react/radio/index.d.ts +6 -1
- package/dist/react/radio/index.js +6 -1
- package/dist/react/select/index.d.ts +2 -0
- package/dist/react/select/index.js +2 -0
- package/dist/react/textarea/index.d.ts +2 -2
- package/dist/react/textarea/index.js +2 -2
- package/dist/react/toggle/index.d.ts +3 -0
- package/dist/react/toggle/index.js +3 -0
- package/dist/utils/mixins/CardAndDialogFooterMixin.d.ts +3 -3
- package/dist/utils/mixins/CardAndDialogFooterMixin.js +20 -16
- package/package.json +1 -1
- package/dist/components/dialog/dialog.utils.d.ts +0 -7
- 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
|
-
* @
|
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
|
-
* @
|
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({
|
package/dist/react/index.d.ts
CHANGED
@@ -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';
|
package/dist/react/index.js
CHANGED
@@ -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
|
-
*
|
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
|
-
*
|
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-
|
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-
|
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
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
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
|
82
|
-
|
83
|
-
|
84
|
-
|
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
@@ -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
|
-
}
|