@momentum-design/components 0.118.2 → 0.118.4
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 +263 -259
- 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/dialog/dialog.component.d.ts +7 -0
- package/dist/components/dialog/dialog.component.js +7 -0
- 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/progressspinner/progressspinner.component.d.ts +6 -0
- package/dist/components/progressspinner/progressspinner.component.js +6 -0
- 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/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 +1222 -442
- 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 +1 -1
- package/dist/react/index.js +1 -1
- 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/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
@@ -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;
|
@@ -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() {
|
@@ -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
|
/**
|
@@ -29,6 +29,7 @@ import styles from './staticchip.styles';
|
|
29
29
|
* @cssproperty --mdc-chip-border-color - The border color of the static chip.
|
30
30
|
* @cssproperty --mdc-chip-background-color - The background color of the static chip.
|
31
31
|
*
|
32
|
+
* @csspart label - The label of the static chip.
|
32
33
|
*/
|
33
34
|
class StaticChip extends IconNameMixin(Component) {
|
34
35
|
constructor() {
|
@@ -98,6 +98,11 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
|
|
98
98
|
* @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
|
99
99
|
* @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
|
100
100
|
* @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
|
101
|
+
*
|
102
|
+
* @csspart container - The container of the tab.
|
103
|
+
* @csspart icon - The icon of the tab.
|
104
|
+
* @csspart indicator - The indicator of the tab.
|
105
|
+
* @csspart text - The text of the tab.
|
101
106
|
*/
|
102
107
|
declare class Tab extends Tab_base {
|
103
108
|
/**
|
@@ -112,6 +112,11 @@ import styles from './tab.styles';
|
|
112
112
|
* @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
|
113
113
|
* @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
|
114
114
|
* @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
|
115
|
+
*
|
116
|
+
* @csspart container - The container of the tab.
|
117
|
+
* @csspart icon - The icon of the tab.
|
118
|
+
* @csspart indicator - The indicator of the tab.
|
119
|
+
* @csspart text - The text of the tab.
|
115
120
|
*/
|
116
121
|
class Tab extends IconNameMixin(Buttonsimple) {
|
117
122
|
constructor() {
|
@@ -42,7 +42,9 @@ import { Component } from '../../models';
|
|
42
42
|
*
|
43
43
|
* @cssproperty --mdc-tablist-gap - Gap between tabs
|
44
44
|
* @cssproperty --mdc-tablist-width - Width of the tablist
|
45
|
-
* @cssproperty
|
45
|
+
* @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
|
46
|
+
*
|
47
|
+
* @csspart container - The tablist container.
|
46
48
|
*/
|
47
49
|
declare class TabList extends Component {
|
48
50
|
/**
|
@@ -58,7 +58,9 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
|
|
58
58
|
*
|
59
59
|
* @cssproperty --mdc-tablist-gap - Gap between tabs
|
60
60
|
* @cssproperty --mdc-tablist-width - Width of the tablist
|
61
|
-
* @cssproperty
|
61
|
+
* @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
|
62
|
+
*
|
63
|
+
* @csspart container - The tablist container.
|
62
64
|
*/
|
63
65
|
class TabList extends Component {
|
64
66
|
/**
|
@@ -453,7 +455,7 @@ class TabList extends Component {
|
|
453
455
|
></mdc-button>`
|
454
456
|
: nothing}`;
|
455
457
|
return html ` ${arrowButton('backward')}
|
456
|
-
<div
|
458
|
+
<div part="container" role="${ROLE.TABLIST}" tabindex="-1" aria-label="${ifDefined(this.dataAriaLabel)}">
|
457
459
|
<slot></slot>
|
458
460
|
</div>
|
459
461
|
${arrowButton(ARROW_BUTTON_DIRECTION.FORWARD)}`;
|
@@ -469,7 +471,7 @@ __decorate([
|
|
469
471
|
__metadata("design:type", String)
|
470
472
|
], TabList.prototype, "dataAriaLabel", void 0);
|
471
473
|
__decorate([
|
472
|
-
query('
|
474
|
+
query('[part="container"]'),
|
473
475
|
__metadata("design:type", HTMLDivElement)
|
474
476
|
], TabList.prototype, "tabsContainer", void 0);
|
475
477
|
__decorate([
|
@@ -51,6 +51,8 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
51
51
|
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
52
52
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
53
53
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
54
|
+
*
|
55
|
+
* @csspart textarea-container - The textarea container
|
54
56
|
*/
|
55
57
|
declare class Textarea extends Textarea_base {
|
56
58
|
/**
|
@@ -66,6 +66,8 @@ import styles from './textarea.styles';
|
|
66
66
|
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
67
67
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
68
68
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
69
|
+
*
|
70
|
+
* @csspart textarea-container - The textarea container
|
69
71
|
*/
|
70
72
|
class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
|
71
73
|
constructor() {
|
@@ -281,7 +283,7 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
|
|
281
283
|
var _a;
|
282
284
|
return html `
|
283
285
|
${this.renderLabel()}
|
284
|
-
<div class="
|
286
|
+
<div class="mdc-focus-ring" part="textarea-container">
|
285
287
|
<textarea
|
286
288
|
aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
|
287
289
|
part="textarea"
|
@@ -40,6 +40,7 @@ import type { TextType, TagName, TypewriterSpeed } from './typewriter.types';
|
|
40
40
|
*
|
41
41
|
* @csspart container - Container for the text element
|
42
42
|
* @csspart text - The text element (forwarded to mdc-text)
|
43
|
+
* @csspart typewriter-hidden - The hidden typewriter text
|
43
44
|
*
|
44
45
|
* @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
|
45
46
|
* Detail: \{ finalContent: string \}
|
@@ -52,6 +52,7 @@ import { DEFAULTS, SPEED } from './typewriter.constants';
|
|
52
52
|
*
|
53
53
|
* @csspart container - Container for the text element
|
54
54
|
* @csspart text - The text element (forwarded to mdc-text)
|
55
|
+
* @csspart typewriter-hidden - The hidden typewriter text
|
55
56
|
*
|
56
57
|
* @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
|
57
58
|
* Detail: \{ finalContent: string \}
|
@@ -417,7 +418,7 @@ class Typewriter extends Component {
|
|
417
418
|
aria-label="${this.originalText}"
|
418
419
|
>${this.displayedText}</mdc-text
|
419
420
|
>
|
420
|
-
<slot @slotchange=${this.handleSlotChange}
|
421
|
+
<slot @slotchange=${this.handleSlotChange} part="${DEFAULTS.CSS_PART_HIDDEN}"></slot>
|
421
422
|
</div>
|
422
423
|
`;
|
423
424
|
}
|
@@ -11,6 +11,7 @@ declare const DEFAULTS: {
|
|
11
11
|
readonly TEXT_ELEMENT_TAGNAME: "p";
|
12
12
|
readonly CSS_PART_TEXT: "text";
|
13
13
|
readonly CSS_PART_CONTAINER: "container";
|
14
|
+
readonly CSS_PART_HIDDEN: "typewriter-hidden";
|
14
15
|
readonly CHILDREN: "";
|
15
16
|
readonly SPEED: "normal";
|
16
17
|
readonly CUSTOM_EVENT: {
|
@@ -16,6 +16,9 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
|
|
16
16
|
* @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
|
17
17
|
*
|
18
18
|
* @slot - Client side List with nested list items.
|
19
|
+
*
|
20
|
+
* @csspart container - The container of the virtualized list.
|
21
|
+
* @csspart scroll - The scrollable area of the virtualized list.
|
19
22
|
*/
|
20
23
|
declare class VirtualizedList extends Component {
|
21
24
|
/**
|
@@ -27,6 +27,9 @@ import { DEFAULTS } from './virtualizedlist.constants';
|
|
27
27
|
* @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
|
28
28
|
*
|
29
29
|
* @slot - Client side List with nested list items.
|
30
|
+
*
|
31
|
+
* @csspart container - The container of the virtualized list.
|
32
|
+
* @csspart scroll - The scrollable area of the virtualized list.
|
30
33
|
*/
|
31
34
|
class VirtualizedList extends Component {
|
32
35
|
constructor() {
|