@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
@@ -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 = (
|
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>`
|
@@ -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-
|
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-
|
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
|
@@ -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
|
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",
|
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
|
`;
|