@momentum-design/components 0.118.3 → 0.118.5
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 +325 -325
- package/dist/browser/index.js.map +4 -4
- package/dist/components/accordion/accordion.component.d.ts +1 -1
- package/dist/components/accordion/accordion.component.js +1 -1
- package/dist/components/accordionbutton/accordionbutton.component.d.ts +2 -2
- package/dist/components/accordionbutton/accordionbutton.component.js +2 -2
- package/dist/components/badge/badge.component.d.ts +13 -4
- package/dist/components/badge/badge.component.js +16 -10
- package/dist/components/badge/badge.styles.js +13 -13
- package/dist/components/buttongroup/buttongroup.component.d.ts +2 -0
- package/dist/components/buttongroup/buttongroup.component.js +2 -0
- package/dist/components/checkbox/checkbox.component.js +2 -2
- package/dist/components/checkbox/checkbox.styles.js +13 -8
- package/dist/components/combobox/combobox.component.js +1 -1
- package/dist/components/dialog/dialog.component.d.ts +7 -0
- package/dist/components/dialog/dialog.component.js +7 -0
- package/dist/components/formfieldgroup/formfieldgroup.styles.js +0 -4
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +2 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +5 -7
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +22 -16
- package/dist/components/listheader/listheader.component.d.ts +4 -0
- package/dist/components/listheader/listheader.component.js +4 -0
- package/dist/components/listitem/listitem.component.d.ts +5 -0
- package/dist/components/listitem/listitem.component.js +5 -0
- package/dist/components/menuitem/menuitem.component.d.ts +7 -0
- package/dist/components/menuitem/menuitem.component.js +7 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +10 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +10 -0
- package/dist/components/menuitemradio/menuitemradio.component.d.ts +10 -0
- package/dist/components/menuitemradio/menuitemradio.component.js +10 -0
- package/dist/components/menupopover/menupopover.component.d.ts +4 -0
- package/dist/components/menupopover/menupopover.component.js +4 -0
- package/dist/components/menusection/menusection.component.d.ts +5 -0
- package/dist/components/menusection/menusection.component.js +5 -0
- package/dist/components/navmenuitem/navmenuitem.component.d.ts +6 -0
- package/dist/components/navmenuitem/navmenuitem.component.js +12 -4
- package/dist/components/navmenuitem/navmenuitem.styles.js +4 -4
- package/dist/components/optgroup/optgroup.component.d.ts +2 -0
- package/dist/components/optgroup/optgroup.component.js +4 -1
- package/dist/components/option/option.component.d.ts +8 -0
- package/dist/components/option/option.component.js +8 -0
- package/dist/components/popover/popover.component.d.ts +3 -0
- package/dist/components/popover/popover.component.js +5 -2
- package/dist/components/popover/popover.styles.js +4 -4
- package/dist/components/presence/presence.component.d.ts +17 -0
- package/dist/components/presence/presence.component.js +18 -1
- package/dist/components/presence/presence.styles.js +15 -15
- package/dist/components/progressbar/progressbar.component.d.ts +8 -0
- package/dist/components/progressbar/progressbar.component.js +11 -3
- package/dist/components/progressbar/progressbar.styles.js +3 -5
- package/dist/components/progressspinner/progressspinner.component.d.ts +6 -0
- package/dist/components/progressspinner/progressspinner.component.js +6 -0
- package/dist/components/radio/radio.component.js +2 -2
- package/dist/components/radio/radio.styles.js +8 -12
- package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +1 -0
- package/dist/components/staticcheckbox/staticcheckbox.component.js +1 -0
- package/dist/components/staticchip/staticchip.component.d.ts +1 -0
- package/dist/components/staticchip/staticchip.component.js +1 -0
- package/dist/components/tab/tab.component.d.ts +5 -0
- package/dist/components/tab/tab.component.js +5 -0
- package/dist/components/tablist/tablist.component.d.ts +3 -1
- package/dist/components/tablist/tablist.component.js +5 -3
- package/dist/components/tablist/tablist.styles.js +1 -1
- package/dist/components/textarea/textarea.component.d.ts +2 -0
- package/dist/components/textarea/textarea.component.js +3 -1
- package/dist/components/toggle/toggle.component.d.ts +0 -3
- package/dist/components/toggle/toggle.component.js +0 -3
- package/dist/components/toggle/toggle.styles.js +11 -14
- package/dist/components/typewriter/typewriter.component.d.ts +1 -0
- package/dist/components/typewriter/typewriter.component.js +2 -1
- package/dist/components/typewriter/typewriter.constants.d.ts +1 -0
- package/dist/components/typewriter/typewriter.constants.js +1 -0
- package/dist/components/typewriter/typewriter.styles.js +2 -2
- package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +3 -0
- package/dist/components/virtualizedlist/virtualizedlist.component.js +3 -0
- package/dist/custom-elements.json +2638 -1870
- package/dist/react/accordion/index.d.ts +1 -1
- package/dist/react/accordion/index.js +1 -1
- package/dist/react/accordionbutton/index.d.ts +2 -2
- package/dist/react/accordionbutton/index.js +2 -2
- package/dist/react/badge/index.d.ts +10 -0
- package/dist/react/badge/index.js +10 -0
- package/dist/react/buttongroup/index.d.ts +2 -0
- package/dist/react/buttongroup/index.js +2 -0
- package/dist/react/dialog/index.d.ts +7 -0
- package/dist/react/dialog/index.js +7 -0
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/react/listheader/index.d.ts +4 -0
- package/dist/react/listheader/index.js +4 -0
- package/dist/react/listitem/index.d.ts +5 -0
- package/dist/react/listitem/index.js +5 -0
- package/dist/react/menuitem/index.d.ts +7 -0
- package/dist/react/menuitem/index.js +7 -0
- package/dist/react/menuitemcheckbox/index.d.ts +10 -0
- package/dist/react/menuitemcheckbox/index.js +10 -0
- package/dist/react/menuitemradio/index.d.ts +10 -0
- package/dist/react/menuitemradio/index.js +10 -0
- package/dist/react/menupopover/index.d.ts +4 -0
- package/dist/react/menupopover/index.js +4 -0
- package/dist/react/menusection/index.d.ts +5 -0
- package/dist/react/menusection/index.js +5 -0
- package/dist/react/navmenuitem/index.d.ts +6 -0
- package/dist/react/navmenuitem/index.js +6 -0
- package/dist/react/optgroup/index.d.ts +2 -0
- package/dist/react/optgroup/index.js +2 -0
- package/dist/react/option/index.d.ts +8 -0
- package/dist/react/option/index.js +8 -0
- package/dist/react/popover/index.d.ts +3 -0
- package/dist/react/popover/index.js +3 -0
- package/dist/react/presence/index.d.ts +17 -0
- package/dist/react/presence/index.js +17 -0
- package/dist/react/progressbar/index.d.ts +8 -0
- package/dist/react/progressbar/index.js +8 -0
- package/dist/react/progressspinner/index.d.ts +6 -0
- package/dist/react/progressspinner/index.js +6 -0
- package/dist/react/staticcheckbox/index.d.ts +1 -0
- package/dist/react/staticcheckbox/index.js +1 -0
- package/dist/react/staticchip/index.d.ts +1 -0
- package/dist/react/staticchip/index.js +1 -0
- package/dist/react/tab/index.d.ts +5 -0
- package/dist/react/tab/index.js +5 -0
- package/dist/react/tablist/index.d.ts +3 -1
- package/dist/react/tablist/index.js +3 -1
- package/dist/react/textarea/index.d.ts +2 -0
- package/dist/react/textarea/index.js +2 -0
- package/dist/react/toggle/index.d.ts +0 -3
- package/dist/react/toggle/index.js +0 -3
- package/dist/react/typewriter/index.d.ts +1 -0
- package/dist/react/typewriter/index.js +1 -0
- package/dist/react/virtualizedlist/index.d.ts +3 -0
- package/dist/react/virtualizedlist/index.js +3 -0
- package/package.json +1 -1
@@ -45,6 +45,16 @@ import { Indicator } from './menuitemradio.types';
|
|
45
45
|
* @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
|
46
46
|
* @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
|
47
47
|
* @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
|
48
|
+
*
|
49
|
+
* @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemradio.
|
50
|
+
*
|
51
|
+
* @csspart checkmark-icon - Allows customization of the checkmark icon.
|
52
|
+
* @csspart leading - Allows customization of the leading part.
|
53
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
54
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
55
|
+
* @csspart trailing - Allows customization of the trailing part.
|
56
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
57
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
48
58
|
*/
|
49
59
|
declare class MenuItemRadio extends MenuItem {
|
50
60
|
/**
|
@@ -61,6 +61,16 @@ import styles from './menuitemradio.styles';
|
|
61
61
|
* @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
|
62
62
|
* @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
|
63
63
|
* @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
|
64
|
+
*
|
65
|
+
* @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemradio.
|
66
|
+
*
|
67
|
+
* @csspart checkmark-icon - Allows customization of the checkmark icon.
|
68
|
+
* @csspart leading - Allows customization of the leading part.
|
69
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
70
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
71
|
+
* @csspart trailing - Allows customization of the trailing part.
|
72
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
73
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
64
74
|
*/
|
65
75
|
class MenuItemRadio extends MenuItem {
|
66
76
|
constructor() {
|
@@ -44,6 +44,10 @@ import type { PopoverPlacement } from '../popover/popover.types';
|
|
44
44
|
* @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.
|
45
45
|
*
|
46
46
|
* @slot default - Contains the menu items to be displayed in the popover
|
47
|
+
*
|
48
|
+
* @csspart popover-close - The close button of the menupopover.
|
49
|
+
* @csspart popover-content - The content of the menupopover.
|
50
|
+
* @csspart popover-hover-bridge - The hover bridge of the menupopover.
|
47
51
|
*/
|
48
52
|
declare class MenuPopover extends Popover {
|
49
53
|
/**
|
@@ -64,6 +64,10 @@ import { isValidMenuItem, isValidMenuPopover } from './menupopover.utils';
|
|
64
64
|
* @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.
|
65
65
|
*
|
66
66
|
* @slot default - Contains the menu items to be displayed in the popover
|
67
|
+
*
|
68
|
+
* @csspart popover-close - The close button of the menupopover.
|
69
|
+
* @csspart popover-content - The content of the menupopover.
|
70
|
+
* @csspart popover-hover-bridge - The hover bridge of the menupopover.
|
67
71
|
*/
|
68
72
|
class MenuPopover extends Popover {
|
69
73
|
constructor() {
|
@@ -16,6 +16,11 @@ import type { IconNames } from '../icon/icon.types';
|
|
16
16
|
*
|
17
17
|
* @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
|
18
18
|
* @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
|
19
|
+
*
|
20
|
+
* @csspart header - The header of the menusection.
|
21
|
+
* @csspart align-header - The header of the menusection when it is aligned to the start.
|
22
|
+
* @csspart container - The container of the menusection.
|
23
|
+
* @csspart divider - The divider of the menusection.
|
19
24
|
*/
|
20
25
|
declare class MenuSection extends Component {
|
21
26
|
/**
|
@@ -31,6 +31,11 @@ import { DEFAULTS } from './menusection.constants';
|
|
31
31
|
*
|
32
32
|
* @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
|
33
33
|
* @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
|
34
|
+
*
|
35
|
+
* @csspart header - The header of the menusection.
|
36
|
+
* @csspart align-header - The header of the menusection when it is aligned to the start.
|
37
|
+
* @csspart container - The container of the menusection.
|
38
|
+
* @csspart divider - The divider of the menusection.
|
34
39
|
*/
|
35
40
|
class MenuSection extends Component {
|
36
41
|
constructor() {
|
@@ -36,6 +36,12 @@ declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constru
|
|
36
36
|
* @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
|
37
37
|
* @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
|
38
38
|
* @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
|
39
|
+
*
|
40
|
+
* @csspart arrow - The arrow of the navmenuitem.
|
41
|
+
* @csspart badge - The badge of the navmenuitem.
|
42
|
+
* @csspart icon-container - The container of the icon.
|
43
|
+
* @csspart text-container - The container of the text.
|
44
|
+
* @csspart trailing-arrow - The trailing arrow of the navmenuitem.
|
39
45
|
*/
|
40
46
|
declare class NavMenuItem extends NavMenuItem_base {
|
41
47
|
/**
|
@@ -55,6 +55,12 @@ import styles from './navmenuitem.styles';
|
|
55
55
|
* @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
|
56
56
|
* @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
|
57
57
|
* @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
|
58
|
+
*
|
59
|
+
* @csspart arrow - The arrow of the navmenuitem.
|
60
|
+
* @csspart badge - The badge of the navmenuitem.
|
61
|
+
* @csspart icon-container - The container of the icon.
|
62
|
+
* @csspart text-container - The container of the text.
|
63
|
+
* @csspart trailing-arrow - The trailing arrow of the navmenuitem.
|
58
64
|
*/
|
59
65
|
class NavMenuItem extends IconNameMixin(MenuItem) {
|
60
66
|
constructor() {
|
@@ -211,20 +217,22 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
|
|
211
217
|
`;
|
212
218
|
}
|
213
219
|
renderArrowIcon(showLabel) {
|
214
|
-
const arrowClass = showLabel ? '' : 'arrow';
|
215
220
|
return html `
|
216
|
-
<mdc-icon
|
221
|
+
<mdc-icon
|
222
|
+
name=${ICON_NAME.RIGHT_ARROW}
|
223
|
+
length-unit="rem"
|
224
|
+
part="trailing-arrow ${showLabel ? '' : 'arrow'}"
|
225
|
+
></mdc-icon>
|
217
226
|
`;
|
218
227
|
}
|
219
228
|
renderBadge(showLabel) {
|
220
|
-
const badgeClass = showLabel ? '' : 'badge';
|
221
229
|
const isValidBadgeType = Object.values(ALLOWED_BADGE_TYPES).includes(this.badgeType);
|
222
230
|
if (!isValidBadgeType) {
|
223
231
|
return nothing;
|
224
232
|
}
|
225
233
|
return html `
|
226
234
|
<mdc-badge
|
227
|
-
|
235
|
+
part="${showLabel ? '' : 'badge'}"
|
228
236
|
type="${ifDefined(this.badgeType)}"
|
229
237
|
counter="${ifDefined(this.counter)}"
|
230
238
|
max-counter="${this.maxCounter}"
|
@@ -115,13 +115,13 @@ const styles = [
|
|
115
115
|
position: relative;
|
116
116
|
}
|
117
117
|
|
118
|
-
:host(:dir(ltr))
|
118
|
+
:host(:dir(ltr))::part(badge) {
|
119
119
|
position: absolute;
|
120
120
|
right: -0.375rem;
|
121
121
|
top: -0.375rem;
|
122
122
|
}
|
123
123
|
|
124
|
-
:host(:dir(rtl))
|
124
|
+
:host(:dir(rtl))::part(badge) {
|
125
125
|
position: absolute;
|
126
126
|
left: -0.375rem;
|
127
127
|
top: -0.375rem;
|
@@ -136,13 +136,13 @@ const styles = [
|
|
136
136
|
flex-shrink: 0;
|
137
137
|
}
|
138
138
|
|
139
|
-
:host(:dir(ltr))
|
139
|
+
:host(:dir(ltr))::part(arrow) {
|
140
140
|
position: absolute;
|
141
141
|
right: -0.75rem;
|
142
142
|
top: 0.875rem;
|
143
143
|
}
|
144
144
|
|
145
|
-
:host(:dir(rtl))
|
145
|
+
:host(:dir(rtl))::part(arrow) {
|
146
146
|
position: absolute;
|
147
147
|
left: -0.75rem;
|
148
148
|
top: 0.875rem;
|
@@ -12,6 +12,8 @@ declare const OptGroup_base: import("../../utils/mixins/index.types").Constructo
|
|
12
12
|
* @slot default - This is a default slot for mdc-option elements.
|
13
13
|
*
|
14
14
|
* @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
|
15
|
+
*
|
16
|
+
* @csspart header-text - The header text of the optgroup.
|
15
17
|
*/
|
16
18
|
declare class OptGroup extends OptGroup_base {
|
17
19
|
/**
|
@@ -14,6 +14,7 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
|
|
14
14
|
import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
|
15
15
|
import { ROLE } from '../../utils/roles';
|
16
16
|
import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
|
17
|
+
import { TAG_NAME as OPTION_TAGNAME } from '../option/option.constants';
|
17
18
|
import { HEADER_ID } from './optgroup.constants';
|
18
19
|
import styles from './optgroup.styles';
|
19
20
|
/**
|
@@ -26,6 +27,8 @@ import styles from './optgroup.styles';
|
|
26
27
|
* @slot default - This is a default slot for mdc-option elements.
|
27
28
|
*
|
28
29
|
* @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
|
30
|
+
*
|
31
|
+
* @csspart header-text - The header text of the optgroup.
|
29
32
|
*/
|
30
33
|
class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
|
31
34
|
setDisabledForAllOptions() {
|
@@ -75,7 +78,7 @@ __decorate([
|
|
75
78
|
__metadata("design:type", String)
|
76
79
|
], OptGroup.prototype, "label", void 0);
|
77
80
|
__decorate([
|
78
|
-
queryAssignedElements({ selector:
|
81
|
+
queryAssignedElements({ selector: OPTION_TAGNAME }),
|
79
82
|
__metadata("design:type", Array)
|
80
83
|
], OptGroup.prototype, "options", void 0);
|
81
84
|
export default OptGroup;
|
@@ -26,6 +26,14 @@ declare const Option_base: import("../../utils/mixins/index.types").Constructor<
|
|
26
26
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
|
27
27
|
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
|
28
28
|
* @event focus - (React: onFocus) This event is dispatched when the option receives focus.
|
29
|
+
*
|
30
|
+
* @cssproperty --mdc-listitem-column-gap - gap between columns in the option
|
31
|
+
* @cssproperty --mdc-option-icon-width - width of the icon in the option
|
32
|
+
*
|
33
|
+
* @csspart leading - Allows customization of the leading part.
|
34
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
35
|
+
* @csspart trailing - Allows customization of the trailing part.
|
36
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
29
37
|
*/
|
30
38
|
declare class Option extends Option_base {
|
31
39
|
/**
|
@@ -41,6 +41,14 @@ import styles from './option.styles';
|
|
41
41
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
|
42
42
|
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
|
43
43
|
* @event focus - (React: onFocus) This event is dispatched when the option receives focus.
|
44
|
+
*
|
45
|
+
* @cssproperty --mdc-listitem-column-gap - gap between columns in the option
|
46
|
+
* @cssproperty --mdc-option-icon-width - width of the icon in the option
|
47
|
+
*
|
48
|
+
* @csspart leading - Allows customization of the leading part.
|
49
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
50
|
+
* @csspart trailing - Allows customization of the trailing part.
|
51
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
44
52
|
*/
|
45
53
|
class Option extends FormInternalsMixin(ListItem) {
|
46
54
|
constructor() {
|
@@ -36,6 +36,9 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
|
|
36
36
|
*
|
37
37
|
* @slot - Default slot for the popover content
|
38
38
|
*
|
39
|
+
* @csspart popover-close - The close button of the popover.
|
40
|
+
* @csspart popover-content - The content of the popover.
|
41
|
+
* @csspart popover-hover-bridge - The hover bridge of the popover.
|
39
42
|
*/
|
40
43
|
declare class Popover extends Popover_base {
|
41
44
|
/**
|
@@ -55,6 +55,9 @@ import { PopoverUtils } from './popover.utils';
|
|
55
55
|
*
|
56
56
|
* @slot - Default slot for the popover content
|
57
57
|
*
|
58
|
+
* @csspart popover-close - The close button of the popover.
|
59
|
+
* @csspart popover-content - The content of the popover.
|
60
|
+
* @csspart popover-hover-bridge - The hover bridge of the popover.
|
58
61
|
*/
|
59
62
|
class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
|
60
63
|
/** @internal */
|
@@ -817,10 +820,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
|
|
817
820
|
}
|
818
821
|
render() {
|
819
822
|
return html `
|
820
|
-
<div
|
823
|
+
<div part="popover-hover-bridge"></div>
|
821
824
|
${this.closeButton
|
822
825
|
? html ` <mdc-button
|
823
|
-
|
826
|
+
part="popover-close"
|
824
827
|
prefix-icon="cancel-bold"
|
825
828
|
variant="tertiary"
|
826
829
|
size="20"
|
@@ -51,7 +51,7 @@ const styles = css `
|
|
51
51
|
border-color: var(--mdc-popover-inverted-border-color);
|
52
52
|
}
|
53
53
|
|
54
|
-
:host([color='contrast'])
|
54
|
+
:host([color='contrast'])::part(popover-close) {
|
55
55
|
color: var(--mdc-popover-inverted-text-color);
|
56
56
|
}
|
57
57
|
|
@@ -63,7 +63,7 @@ const styles = css `
|
|
63
63
|
max-height: var(--mdc-popover-max-height);
|
64
64
|
}
|
65
65
|
|
66
|
-
|
66
|
+
:host::part(popover-hover-bridge) {
|
67
67
|
position: absolute;
|
68
68
|
transform: translateX(-50%);
|
69
69
|
background: transparent;
|
@@ -80,7 +80,7 @@ const styles = css `
|
|
80
80
|
border: var(--mdc-popover-arrow-border);
|
81
81
|
}
|
82
82
|
|
83
|
-
|
83
|
+
:host::part(popover-close) {
|
84
84
|
box-sizing: border-box;
|
85
85
|
position: absolute;
|
86
86
|
right: 0.75rem;
|
@@ -89,7 +89,7 @@ const styles = css `
|
|
89
89
|
z-index: 9999;
|
90
90
|
}
|
91
91
|
|
92
|
-
:host(:dir(rtl))
|
92
|
+
:host(:dir(rtl))::part(popover-close) {
|
93
93
|
right: auto;
|
94
94
|
left: 0.75rem;
|
95
95
|
}
|
@@ -27,6 +27,23 @@ import type { PresenceType, PresenceSize } from './presence.types';
|
|
27
27
|
* @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
|
28
28
|
* @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
|
29
29
|
* @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
|
30
|
+
*
|
31
|
+
* @csspart presence-content - The presence content.
|
32
|
+
* @csspart mdc-presence-icon - The presence icon.
|
33
|
+
* @csspart mdc-presence-icon__active - The presence icon for active.
|
34
|
+
* @csspart mdc-presence-icon__away - The presence icon for away.
|
35
|
+
* @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.
|
36
|
+
* @csspart mdc-presence-icon__busy - The presence icon for busy.
|
37
|
+
* @csspart mdc-presence-icon__dnd - The presence icon for dnd.
|
38
|
+
* @csspart mdc-presence-icon__meeting - The presence icon for meeting.
|
39
|
+
* @csspart mdc-presence-icon__on-call - The presence icon for on-call.
|
40
|
+
* @csspart mdc-presence-icon__on-device - The presence icon for on-device.
|
41
|
+
* @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.
|
42
|
+
* @csspart mdc-presence-icon__pause - The presence icon for pause.
|
43
|
+
* @csspart mdc-presence-icon__pto - The presence icon for pto.
|
44
|
+
* @csspart mdc-presence-icon__presenting - The presence icon for presenting.
|
45
|
+
* @csspart mdc-presence-icon__quiet - The presence icon for quiet.
|
46
|
+
* @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.
|
30
47
|
*/
|
31
48
|
declare class Presence extends Component {
|
32
49
|
/**
|
@@ -39,6 +39,23 @@ import { getIconValue, getPresenceIconSize } from './presence.utils';
|
|
39
39
|
* @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
|
40
40
|
* @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
|
41
41
|
* @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
|
42
|
+
*
|
43
|
+
* @csspart presence-content - The presence content.
|
44
|
+
* @csspart mdc-presence-icon - The presence icon.
|
45
|
+
* @csspart mdc-presence-icon__active - The presence icon for active.
|
46
|
+
* @csspart mdc-presence-icon__away - The presence icon for away.
|
47
|
+
* @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.
|
48
|
+
* @csspart mdc-presence-icon__busy - The presence icon for busy.
|
49
|
+
* @csspart mdc-presence-icon__dnd - The presence icon for dnd.
|
50
|
+
* @csspart mdc-presence-icon__meeting - The presence icon for meeting.
|
51
|
+
* @csspart mdc-presence-icon__on-call - The presence icon for on-call.
|
52
|
+
* @csspart mdc-presence-icon__on-device - The presence icon for on-device.
|
53
|
+
* @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.
|
54
|
+
* @csspart mdc-presence-icon__pause - The presence icon for pause.
|
55
|
+
* @csspart mdc-presence-icon__pto - The presence icon for pto.
|
56
|
+
* @csspart mdc-presence-icon__presenting - The presence icon for presenting.
|
57
|
+
* @csspart mdc-presence-icon__quiet - The presence icon for quiet.
|
58
|
+
* @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.
|
42
59
|
*/
|
43
60
|
class Presence extends Component {
|
44
61
|
constructor() {
|
@@ -121,7 +138,7 @@ class Presence extends Component {
|
|
121
138
|
return html `
|
122
139
|
<div part="presence-content">
|
123
140
|
<mdc-icon
|
124
|
-
|
141
|
+
part="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
|
125
142
|
name="${this.icon}"
|
126
143
|
size="${getPresenceIconSize(this.size)}"
|
127
144
|
@load="${this.handleOnLoad}"
|
@@ -51,49 +51,49 @@ const styles = [
|
|
51
51
|
height: 2.75rem;
|
52
52
|
}
|
53
53
|
|
54
|
-
|
54
|
+
:host::part(mdc-presence-icon) {
|
55
55
|
border-radius: 50%;
|
56
56
|
}
|
57
|
-
|
57
|
+
:host::part(mdc-presence-icon__active) {
|
58
58
|
color: var(--mdc-presence-active-background-color);
|
59
59
|
}
|
60
|
-
|
60
|
+
:host::part(mdc-presence-icon__away) {
|
61
61
|
color: var(--mdc-presence-away-background-color);
|
62
62
|
}
|
63
|
-
|
63
|
+
:host::part(mdc-presence-icon__away-calling) {
|
64
64
|
color: var(--mdc-presence-away-calling-background-color);
|
65
65
|
}
|
66
|
-
|
66
|
+
:host::part(mdc-presence-icon__busy) {
|
67
67
|
color: var(--mdc-presence-busy-background-color);
|
68
68
|
}
|
69
|
-
|
69
|
+
:host::part(mdc-presence-icon__dnd) {
|
70
70
|
color: var(--mdc-presence-dnd-background-color);
|
71
71
|
}
|
72
|
-
|
72
|
+
:host::part(mdc-presence-icon__meeting) {
|
73
73
|
color: var(--mdc-presence-meeting-background-color);
|
74
74
|
}
|
75
|
-
|
75
|
+
:host::part(mdc-presence-icon__on-call) {
|
76
76
|
color: var(--mdc-presence-on-call-background-color);
|
77
77
|
}
|
78
|
-
|
78
|
+
:host::part(mdc-presence-icon__on-device) {
|
79
79
|
color: var(--mdc-presence-on-device-background-color);
|
80
80
|
}
|
81
|
-
|
81
|
+
:host::part(mdc-presence-icon__on-mobile) {
|
82
82
|
color: var(--mdc-presence-on-mobile-background-color);
|
83
83
|
}
|
84
|
-
|
84
|
+
:host::part(mdc-presence-icon__pause) {
|
85
85
|
color: var(--mdc-presence-pause-background-color);
|
86
86
|
}
|
87
|
-
|
87
|
+
:host::part(mdc-presence-icon__pto) {
|
88
88
|
color: var(--mdc-presence-pto-background-color);
|
89
89
|
}
|
90
|
-
|
90
|
+
:host::part(mdc-presence-icon__presenting) {
|
91
91
|
color: var(--mdc-presence-presenting-background-color);
|
92
92
|
}
|
93
|
-
|
93
|
+
:host::part(mdc-presence-icon__quiet) {
|
94
94
|
color: var(--mdc-presence-quiet-background-color);
|
95
95
|
}
|
96
|
-
|
96
|
+
:host::part(mdc-presence-icon__scheduled) {
|
97
97
|
color: var(--mdc-presence-scheduled-background-color);
|
98
98
|
}
|
99
99
|
`,
|
@@ -28,6 +28,14 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
|
|
28
28
|
* @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
|
29
29
|
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
30
30
|
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
31
|
+
*
|
32
|
+
* @csspart gap - The gap between the label and the progressbar.
|
33
|
+
* @csspart inline-label-container - The container of the label in inline variant.
|
34
|
+
* @csspart label-container - The container of the label in inline variant.
|
35
|
+
* @csspart percentage - The container of the label in inline variant.
|
36
|
+
* @csspart progress-bar - The container of the label in inline variant.
|
37
|
+
* @csspart progress-container - The container of the label in inline variant.
|
38
|
+
* @csspart remaining - The container of the remaining progressbar portion.
|
31
39
|
*/
|
32
40
|
declare class Progressbar extends Progressbar_base {
|
33
41
|
/**
|
@@ -14,7 +14,7 @@ import FormfieldWrapper from '../formfieldwrapper';
|
|
14
14
|
import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
|
15
15
|
import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
|
16
16
|
import { ROLE } from '../../utils/roles';
|
17
|
-
import { DEFAULTS, VARIANT } from './progressbar.constants';
|
17
|
+
import { DEFAULTS, VARIANT, TAG_NAME as PROGRESSBAR_TAGNAME } from './progressbar.constants';
|
18
18
|
import styles from './progressbar.styles';
|
19
19
|
/**
|
20
20
|
* mdc-progressbar component visually represents a progress indicator, typically used to show
|
@@ -42,6 +42,14 @@ import styles from './progressbar.styles';
|
|
42
42
|
* @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
|
43
43
|
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
44
44
|
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
45
|
+
*
|
46
|
+
* @csspart gap - The gap between the label and the progressbar.
|
47
|
+
* @csspart inline-label-container - The container of the label in inline variant.
|
48
|
+
* @csspart label-container - The container of the label in inline variant.
|
49
|
+
* @csspart percentage - The container of the label in inline variant.
|
50
|
+
* @csspart progress-bar - The container of the label in inline variant.
|
51
|
+
* @csspart progress-container - The container of the label in inline variant.
|
52
|
+
* @csspart remaining - The container of the remaining progressbar portion.
|
45
53
|
*/
|
46
54
|
class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
|
47
55
|
constructor() {
|
@@ -94,7 +102,7 @@ class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
|
|
94
102
|
}
|
95
103
|
connectedCallback() {
|
96
104
|
super.connectedCallback();
|
97
|
-
this.id =
|
105
|
+
this.id = `${PROGRESSBAR_TAGNAME}-${uuidv4()}`;
|
98
106
|
this.disabled = undefined;
|
99
107
|
this.toggletipText = undefined;
|
100
108
|
this.toggletipPlacement = undefined;
|
@@ -156,7 +164,7 @@ __decorate([
|
|
156
164
|
__metadata("design:type", String)
|
157
165
|
], Progressbar.prototype, "value", void 0);
|
158
166
|
__decorate([
|
159
|
-
property({ type: Boolean
|
167
|
+
property({ type: Boolean }),
|
160
168
|
__metadata("design:type", Object)
|
161
169
|
], Progressbar.prototype, "error", void 0);
|
162
170
|
export default Progressbar;
|
@@ -13,9 +13,9 @@ const styles = [
|
|
13
13
|
--mdc-progressbar-border-radius: var(--mdc-progressbar-height);
|
14
14
|
|
15
15
|
--mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
|
16
|
-
--mdc-progressbar-label-line-height: var(--mds-font-
|
17
|
-
--mdc-progressbar-label-font-size: var(--mds-font-
|
18
|
-
--mdc-progressbar-label-font-weight: var(--mds-font-
|
16
|
+
--mdc-progressbar-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
17
|
+
--mdc-progressbar-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
18
|
+
--mdc-progressbar-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
19
19
|
--mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
|
20
20
|
|
21
21
|
width: 100%;
|
@@ -71,8 +71,6 @@ const styles = [
|
|
71
71
|
border-radius: var(--mdc-progressbar-border-radius);
|
72
72
|
}
|
73
73
|
|
74
|
-
:host::part(label-text),
|
75
|
-
:host::part(help-text),
|
76
74
|
:host::part(percentage) {
|
77
75
|
font-size: var(--mdc-progressbar-label-font-size);
|
78
76
|
font-weight: var(--mdc-progressbar-label-font-weight);
|
@@ -26,6 +26,12 @@ import Progressbar from '../progressbar/progressbar.component';
|
|
26
26
|
* @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
|
27
27
|
* @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
|
28
28
|
*
|
29
|
+
* @csspart error-icon - The error icon of the progressspinner.
|
30
|
+
* @csspart spinner-base - The base of the progressspinner.
|
31
|
+
* @csspart spinner-container - The container of the progressspinner.
|
32
|
+
* @csspart spinner-progress - The progress of the progressspinner.
|
33
|
+
* @csspart spinner-track - The track of the progressspinner.
|
34
|
+
* @csspart success-icon - The success icon of the progressspinner.
|
29
35
|
*/
|
30
36
|
declare class Progressspinner extends Progressbar {
|
31
37
|
connectedCallback(): void;
|
@@ -31,6 +31,12 @@ import styles from './progressspinner.styles';
|
|
31
31
|
* @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
|
32
32
|
* @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
|
33
33
|
*
|
34
|
+
* @csspart error-icon - The error icon of the progressspinner.
|
35
|
+
* @csspart spinner-base - The base of the progressspinner.
|
36
|
+
* @csspart spinner-container - The container of the progressspinner.
|
37
|
+
* @csspart spinner-progress - The progress of the progressspinner.
|
38
|
+
* @csspart spinner-track - The track of the progressspinner.
|
39
|
+
* @csspart success-icon - The success icon of the progressspinner.
|
34
40
|
*/
|
35
41
|
class Progressspinner extends Progressbar {
|
36
42
|
connectedCallback() {
|
@@ -64,7 +64,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
|
|
64
64
|
this.renderLabelAndHelperText = () => {
|
65
65
|
if (!this.label)
|
66
66
|
return nothing;
|
67
|
-
return html `<div
|
67
|
+
return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
|
68
68
|
};
|
69
69
|
}
|
70
70
|
connectedCallback() {
|
@@ -279,6 +279,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
|
|
279
279
|
>
|
280
280
|
<input
|
281
281
|
id="${this.inputId}"
|
282
|
+
part="radio-input"
|
282
283
|
type="radio"
|
283
284
|
role="${ROLE.RADIO}"
|
284
285
|
?autofocus="${this.autofocus}"
|
@@ -290,7 +291,6 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
|
|
290
291
|
?checked=${this.checked}
|
291
292
|
?readonly=${this.readonly}
|
292
293
|
?disabled=${this.disabled}
|
293
|
-
class="mdc-radio__input"
|
294
294
|
aria-checked="${this.checked}"
|
295
295
|
aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
|
296
296
|
aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
|
@@ -52,25 +52,21 @@ const styles = [
|
|
52
52
|
background-color: var(--mdc-radio-control-active-disabled-background);
|
53
53
|
}
|
54
54
|
|
55
|
-
:host([readonly])
|
56
|
-
:host([
|
57
|
-
:host([disabled]) .mdc-label,
|
58
|
-
:host([readonly]) .mdc-label {
|
55
|
+
:host([readonly])::part(radio-input) :host([disabled])::part(radio-input) :host([disabled])::part(label),
|
56
|
+
:host([readonly])::part(label) {
|
59
57
|
cursor: default;
|
60
58
|
}
|
61
59
|
|
62
|
-
|
60
|
+
:host::part(label) {
|
63
61
|
cursor: pointer;
|
64
62
|
word-break: break-word;
|
65
63
|
white-space: normal;
|
64
|
+
font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
65
|
+
font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
66
|
+
line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
66
67
|
}
|
67
68
|
|
68
|
-
:host(
|
69
|
-
:host([disabled]) .mdc-radio__help-text {
|
70
|
-
color: var(--mdc-radio-text-disabled-color);
|
71
|
-
}
|
72
|
-
|
73
|
-
.mdc-radio__input {
|
69
|
+
:host::part(radio-input) {
|
74
70
|
position: absolute;
|
75
71
|
opacity: 0;
|
76
72
|
margin: 0;
|
@@ -80,7 +76,7 @@ const styles = [
|
|
80
76
|
z-index: 2;
|
81
77
|
}
|
82
78
|
|
83
|
-
|
79
|
+
:host::part(text-container) {
|
84
80
|
display: flex;
|
85
81
|
flex-direction: column;
|
86
82
|
justify-content: center;
|
@@ -22,6 +22,7 @@ declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Cons
|
|
22
22
|
* @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
|
23
23
|
* @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
|
24
24
|
*
|
25
|
+
* @csspart icon-container - The container for the checkbox icon.
|
25
26
|
*/
|
26
27
|
declare class StaticCheckbox extends StaticCheckbox_base {
|
27
28
|
/**
|
@@ -34,6 +34,7 @@ import { ICON_NAME } from './staticcheckbox.constants';
|
|
34
34
|
* @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
|
35
35
|
* @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
|
36
36
|
*
|
37
|
+
* @csspart icon-container - The container for the checkbox icon.
|
37
38
|
*/
|
38
39
|
class StaticCheckbox extends DisabledMixin(Component) {
|
39
40
|
constructor() {
|
@@ -18,6 +18,7 @@ declare const StaticChip_base: import("../../utils/mixins/index.types").Construc
|
|
18
18
|
* @cssproperty --mdc-chip-border-color - The border color of the static chip.
|
19
19
|
* @cssproperty --mdc-chip-background-color - The background color of the static chip.
|
20
20
|
*
|
21
|
+
* @csspart label - The label of the static chip.
|
21
22
|
*/
|
22
23
|
declare class StaticChip extends StaticChip_base {
|
23
24
|
/**
|