@momentum-design/components 0.118.3 → 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 +2520 -1740
- 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/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
@@ -43,11 +43,11 @@ import AccordionButton from '../accordionbutton/accordionbutton.component';
|
|
43
43
|
* @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
|
44
44
|
* @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
|
45
45
|
*
|
46
|
+
* @csspart body-section - The body section of the accordion.
|
46
47
|
* @csspart header-section - The header section of the accordion.
|
47
48
|
* @csspart leading-header - The leading header of the accordion.
|
48
49
|
* @csspart trailing-header - The trailing header of the accordion.
|
49
50
|
* @csspart trailing-header__button - The trailing header button of the accordion.
|
50
|
-
* @csspart body-section - The body section of the accordion.
|
51
51
|
*/
|
52
52
|
declare class Accordion extends AccordionButton {
|
53
53
|
/** @internal */
|
@@ -57,11 +57,11 @@ import styles from './accordion.styles';
|
|
57
57
|
* @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
|
58
58
|
* @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
|
59
59
|
*
|
60
|
+
* @csspart body-section - The body section of the accordion.
|
60
61
|
* @csspart header-section - The header section of the accordion.
|
61
62
|
* @csspart leading-header - The leading header of the accordion.
|
62
63
|
* @csspart trailing-header - The trailing header of the accordion.
|
63
64
|
* @csspart trailing-header__button - The trailing header button of the accordion.
|
64
|
-
* @csspart body-section - The body section of the accordion.
|
65
65
|
*/
|
66
66
|
class Accordion extends AccordionButton {
|
67
67
|
/**
|
@@ -44,12 +44,12 @@ declare const AccordionButton_base: import("../../utils/mixins/index.types").Con
|
|
44
44
|
* @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
|
45
45
|
* @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
|
46
46
|
*
|
47
|
-
* @csspart
|
47
|
+
* @csspart body-section - The body section of the accordion button.
|
48
48
|
* @csspart header-button-section - The header button section of the accordion button.
|
49
|
+
* @csspart header-section - The header section of the accordion button.
|
49
50
|
* @csspart leading-header - The leading header of the accordion button.
|
50
51
|
* @csspart trailing-header - The trailing header of the accordion button.
|
51
52
|
* @csspart trailing-header__icon - The trailing header icon of the accordion button.
|
52
|
-
* @csspart body-section - The body section of the accordion button.
|
53
53
|
*/
|
54
54
|
declare class AccordionButton extends AccordionButton_base {
|
55
55
|
/**
|
@@ -56,12 +56,12 @@ import styles from './accordionbutton.styles';
|
|
56
56
|
* @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
|
57
57
|
* @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
|
58
58
|
*
|
59
|
-
* @csspart
|
59
|
+
* @csspart body-section - The body section of the accordion button.
|
60
60
|
* @csspart header-button-section - The header button section of the accordion button.
|
61
|
+
* @csspart header-section - The header section of the accordion button.
|
61
62
|
* @csspart leading-header - The leading header of the accordion button.
|
62
63
|
* @csspart trailing-header - The trailing header of the accordion button.
|
63
64
|
* @csspart trailing-header__icon - The trailing header icon of the accordion button.
|
64
|
-
* @csspart body-section - The body section of the accordion button.
|
65
65
|
*/
|
66
66
|
class AccordionButton extends DisabledMixin(Component) {
|
67
67
|
constructor() {
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import type { PropertyValues, TemplateResult } from 'lit';
|
2
|
-
import { CSSResult } from 'lit';
|
1
|
+
import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
|
3
2
|
import { Component } from '../../models';
|
4
3
|
import type { BadgeType, IconVariant } from './badge.types';
|
5
4
|
declare const Badge_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
|
@@ -36,6 +35,16 @@ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<i
|
|
36
35
|
* @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
|
37
36
|
* @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
|
38
37
|
* @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
|
38
|
+
*
|
39
|
+
* @csspart badge-dot - The dot notification badge.
|
40
|
+
* @csspart badge-icon - The icon badge.
|
41
|
+
* @csspart badge-icon__error - The error icon badge.
|
42
|
+
* @csspart badge-icon__primary - The primary icon badge.
|
43
|
+
* @csspart badge-icon__secondary - The secondary icon badge.
|
44
|
+
* @csspart badge-icon__success - The success icon badge.
|
45
|
+
* @csspart badge-icon__warning - The warning icon badge.
|
46
|
+
* @csspart badge-overlay - The overlay badge.
|
47
|
+
* @csspart badge-text - The text badge.
|
39
48
|
*/
|
40
49
|
declare class Badge extends Badge_base {
|
41
50
|
/**
|
@@ -84,13 +93,13 @@ declare class Badge extends Badge_base {
|
|
84
93
|
/**
|
85
94
|
* Method to generate the badge icon.
|
86
95
|
* @param iconName - the name of the icon from the icon set
|
87
|
-
* @param
|
96
|
+
* @param backgroundPartPostfix - postfix for the part to style the badge icon.
|
88
97
|
* @returns the template result of the icon.
|
89
98
|
*/
|
90
99
|
private getBadgeIcon;
|
91
100
|
/**
|
92
101
|
* Method to generate the badge dot template.
|
93
|
-
* @returns the template result of the dot with
|
102
|
+
* @returns the template result of the dot with badge-dot part.
|
94
103
|
*/
|
95
104
|
private getBadgeDot;
|
96
105
|
/**
|
@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
9
|
};
|
10
10
|
import { html } from 'lit';
|
11
|
-
import { classMap } from 'lit-html/directives/class-map.js';
|
12
11
|
import { property } from 'lit/decorators.js';
|
13
12
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
14
13
|
import { Component } from '../../models';
|
@@ -50,6 +49,16 @@ import styles from './badge.styles';
|
|
50
49
|
* @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
|
51
50
|
* @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
|
52
51
|
* @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
|
52
|
+
*
|
53
|
+
* @csspart badge-dot - The dot notification badge.
|
54
|
+
* @csspart badge-icon - The icon badge.
|
55
|
+
* @csspart badge-icon__error - The error icon badge.
|
56
|
+
* @csspart badge-icon__primary - The primary icon badge.
|
57
|
+
* @csspart badge-icon__secondary - The secondary icon badge.
|
58
|
+
* @csspart badge-icon__success - The success icon badge.
|
59
|
+
* @csspart badge-icon__warning - The warning icon badge.
|
60
|
+
* @csspart badge-overlay - The overlay badge.
|
61
|
+
* @csspart badge-text - The text badge.
|
53
62
|
*/
|
54
63
|
class Badge extends IconNameMixin(Component) {
|
55
64
|
constructor() {
|
@@ -104,16 +113,13 @@ class Badge extends IconNameMixin(Component) {
|
|
104
113
|
/**
|
105
114
|
* Method to generate the badge icon.
|
106
115
|
* @param iconName - the name of the icon from the icon set
|
107
|
-
* @param
|
116
|
+
* @param backgroundPartPostfix - postfix for the part to style the badge icon.
|
108
117
|
* @returns the template result of the icon.
|
109
118
|
*/
|
110
|
-
getBadgeIcon(iconName,
|
119
|
+
getBadgeIcon(iconName, backgroundPartPostfix) {
|
111
120
|
return html `
|
112
121
|
<mdc-icon
|
113
|
-
|
114
|
-
'mdc-badge-overlay': this.overlay,
|
115
|
-
[`mdc-badge-icon__${backgroundClassPostfix}`]: true,
|
116
|
-
})}"
|
122
|
+
part="badge-icon ${this.overlay ? 'badge-overlay' : ''} badge-icon__${backgroundPartPostfix}"
|
117
123
|
name="${ifDefined(iconName)}"
|
118
124
|
size="${DEFAULTS.ICON_SIZE}"
|
119
125
|
></mdc-icon>
|
@@ -121,10 +127,10 @@ class Badge extends IconNameMixin(Component) {
|
|
121
127
|
}
|
122
128
|
/**
|
123
129
|
* Method to generate the badge dot template.
|
124
|
-
* @returns the template result of the dot with
|
130
|
+
* @returns the template result of the dot with badge-dot part.
|
125
131
|
*/
|
126
132
|
getBadgeDot() {
|
127
|
-
return html `<div
|
133
|
+
return html `<div part="badge-dot ${this.overlay ? 'badge-overlay' : ''}"></div>`;
|
128
134
|
}
|
129
135
|
/**
|
130
136
|
* Method to generate the badge text and counter template.
|
@@ -135,7 +141,7 @@ class Badge extends IconNameMixin(Component) {
|
|
135
141
|
<mdc-text
|
136
142
|
type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
|
137
143
|
tagname="${VALID_TEXT_TAGS.DIV}"
|
138
|
-
|
144
|
+
part="badge-text ${this.overlay ? 'badge-overlay' : ''}"
|
139
145
|
>
|
140
146
|
${this.getCounterText(this.maxCounter, this.counter)}
|
141
147
|
</mdc-text>
|
@@ -23,10 +23,10 @@ const styles = [
|
|
23
23
|
|
24
24
|
color: var(--mdc-badge-primary-foreground-color);
|
25
25
|
}
|
26
|
-
|
26
|
+
:host::part(badge-overlay) {
|
27
27
|
outline: 0.0625rem solid var(--mdc-badge-overlay-background-color);
|
28
28
|
}
|
29
|
-
|
29
|
+
:host::part(badge-text) {
|
30
30
|
padding: 0 0.25rem;
|
31
31
|
border-radius: 6.25rem;
|
32
32
|
min-width: 1rem;
|
@@ -34,46 +34,46 @@ const styles = [
|
|
34
34
|
justify-content: center;
|
35
35
|
background-color: var(--mdc-badge-primary-background-color);
|
36
36
|
}
|
37
|
-
|
37
|
+
:host::part(badge-dot) {
|
38
38
|
width: 0.75rem;
|
39
39
|
height: 0.75rem;
|
40
40
|
border-radius: 50%;
|
41
41
|
background-color: var(--mdc-badge-primary-background-color);
|
42
42
|
}
|
43
|
-
|
43
|
+
:host::part(badge-icon) {
|
44
44
|
padding: 2px;
|
45
45
|
border-radius: 50%;
|
46
46
|
}
|
47
|
-
|
47
|
+
:host::part(badge-icon__primary) {
|
48
48
|
background-color: var(--mdc-badge-primary-background-color);
|
49
49
|
color: var(--mdc-badge-primary-foreground-color);
|
50
50
|
}
|
51
|
-
|
51
|
+
:host::part(badge-icon__success) {
|
52
52
|
background-color: var(--mdc-badge-success-background-color);
|
53
53
|
color: var(--mdc-badge-success-foreground-color);
|
54
54
|
}
|
55
|
-
|
55
|
+
:host::part(badge-icon__warning) {
|
56
56
|
background-color: var(--mdc-badge-warning-background-color);
|
57
57
|
color: var(--mdc-badge-warning-foreground-color);
|
58
58
|
}
|
59
|
-
|
59
|
+
:host::part(badge-icon__error) {
|
60
60
|
background-color: var(--mdc-badge-error-background-color);
|
61
61
|
color: var(--mdc-badge-error-foreground-color);
|
62
62
|
}
|
63
|
-
|
63
|
+
:host::part(badge-icon__secondary) {
|
64
64
|
background-color: var(--mdc-badge-secondary-background-color);
|
65
65
|
color: var(--mdc-badge-secondary-foreground-color);
|
66
66
|
}
|
67
67
|
|
68
68
|
/* High Contrast Mode */
|
69
69
|
@media (forced-colors: active) {
|
70
|
-
|
71
|
-
|
72
|
-
|
70
|
+
:host::part(badge-dot),
|
71
|
+
:host::part(badge-icon),
|
72
|
+
:host::part(badge-text) {
|
73
73
|
outline: 0.125rem solid;
|
74
74
|
}
|
75
75
|
|
76
|
-
|
76
|
+
:host::part(badge-dot) {
|
77
77
|
background-color: ButtonText;
|
78
78
|
outline: none;
|
79
79
|
}
|
@@ -13,6 +13,8 @@ import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from
|
|
13
13
|
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
14
14
|
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
15
15
|
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
16
|
+
*
|
17
|
+
* @csspart container - The container of the buttongroup.
|
16
18
|
*/
|
17
19
|
declare class ButtonGroup extends Component {
|
18
20
|
/**
|
@@ -24,6 +24,8 @@ import styles from './buttongroup.styles';
|
|
24
24
|
* @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
|
25
25
|
* @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
|
26
26
|
* @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
|
27
|
+
*
|
28
|
+
* @csspart container - The container of the buttongroup.
|
27
29
|
*/
|
28
30
|
class ButtonGroup extends Component {
|
29
31
|
constructor() {
|
@@ -48,6 +48,13 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
|
|
48
48
|
* @cssproperty --mdc-dialog-width - width of the dialog
|
49
49
|
* @cssproperty --mdc-dialog-height - height of the dialog
|
50
50
|
*
|
51
|
+
* @csspart body - The body section of the dialog.
|
52
|
+
* @csspart description-text - The description text of the dialog.
|
53
|
+
* @csspart dialog-close-btn - The close button of the dialog.
|
54
|
+
* @csspart header - The header of the dialog.
|
55
|
+
* @csspart header-section - The header section of the dialog.
|
56
|
+
* @csspart header-text - The header text of the dialog.
|
57
|
+
*
|
51
58
|
* @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
|
52
59
|
* @slot dialog-body - Slot for the dialog body content
|
53
60
|
* @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
|
@@ -66,6 +66,13 @@ import styles from './dialog.styles';
|
|
66
66
|
* @cssproperty --mdc-dialog-width - width of the dialog
|
67
67
|
* @cssproperty --mdc-dialog-height - height of the dialog
|
68
68
|
*
|
69
|
+
* @csspart body - The body section of the dialog.
|
70
|
+
* @csspart description-text - The description text of the dialog.
|
71
|
+
* @csspart dialog-close-btn - The close button of the dialog.
|
72
|
+
* @csspart header - The header of the dialog.
|
73
|
+
* @csspart header-section - The header section of the dialog.
|
74
|
+
* @csspart header-text - The header text of the dialog.
|
75
|
+
*
|
69
76
|
* @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
|
70
77
|
* @slot dialog-body - Slot for the dialog body content
|
71
78
|
* @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
|
@@ -12,6 +12,10 @@ import type { IconNames } from '../icon/icon.types';
|
|
12
12
|
* @cssproperty --mdc-listheader-height - height of the header
|
13
13
|
* @cssproperty --mdc-listheader-padding - padding around the header content
|
14
14
|
* @cssproperty --mdc-listheader-gap - gap between content
|
15
|
+
*
|
16
|
+
* @csspart header-text - The header text of list header
|
17
|
+
* @csspart postfix-icon - The postfix icon of list header
|
18
|
+
* @csspart prefix-icon - The prefix icon of list header
|
15
19
|
*/
|
16
20
|
declare class Listheader extends Component {
|
17
21
|
/**
|
@@ -22,6 +22,10 @@ import styles from './listheader.styles';
|
|
22
22
|
* @cssproperty --mdc-listheader-height - height of the header
|
23
23
|
* @cssproperty --mdc-listheader-padding - padding around the header content
|
24
24
|
* @cssproperty --mdc-listheader-gap - gap between content
|
25
|
+
*
|
26
|
+
* @csspart header-text - The header text of list header
|
27
|
+
* @csspart postfix-icon - The postfix icon of list header
|
28
|
+
* @csspart prefix-icon - The prefix icon of list header
|
25
29
|
*/
|
26
30
|
class Listheader extends Component {
|
27
31
|
constructor() {
|
@@ -46,6 +46,11 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
|
|
46
46
|
* @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
|
47
47
|
* @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
|
48
48
|
*
|
49
|
+
* @csspart leading - Allows customization of the leading part.
|
50
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
51
|
+
* @csspart trailing - Allows customization of the trailing part.
|
52
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
53
|
+
*
|
49
54
|
* @event click - (React: onClick) This event is dispatched when the listitem is clicked.
|
50
55
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
|
51
56
|
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
|
@@ -62,6 +62,11 @@ import styles from './listitem.styles';
|
|
62
62
|
* @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
|
63
63
|
* @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
|
64
64
|
*
|
65
|
+
* @csspart leading - Allows customization of the leading part.
|
66
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
67
|
+
* @csspart trailing - Allows customization of the trailing part.
|
68
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
69
|
+
*
|
65
70
|
* @event click - (React: onClick) This event is dispatched when the listitem is clicked.
|
66
71
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
|
67
72
|
* @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
|
@@ -37,6 +37,13 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
|
|
37
37
|
* @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
|
38
38
|
* @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
|
39
39
|
* @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
|
40
|
+
*
|
41
|
+
* @csspart leading - Allows customization of the leading part.
|
42
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
43
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
44
|
+
* @csspart trailing - Allows customization of the trailing part.
|
45
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
46
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
40
47
|
*/
|
41
48
|
declare class MenuItem extends ListItem {
|
42
49
|
/**
|
@@ -51,6 +51,13 @@ import styles from './menuitem.styles';
|
|
51
51
|
* @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
|
52
52
|
* @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
|
53
53
|
* @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
|
54
|
+
*
|
55
|
+
* @csspart leading - Allows customization of the leading part.
|
56
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
57
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
58
|
+
* @csspart trailing - Allows customization of the trailing part.
|
59
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
60
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
54
61
|
*/
|
55
62
|
class MenuItem extends ListItem {
|
56
63
|
constructor() {
|
@@ -44,6 +44,16 @@ declare const MenuItemCheckbox_base: import("../../utils/mixins/index.types").Co
|
|
44
44
|
* @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
|
45
45
|
* @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
|
46
46
|
* @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
|
47
|
+
*
|
48
|
+
* @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.
|
49
|
+
*
|
50
|
+
* @csspart checkmark-icon - Allows customization of the checkmark icon.
|
51
|
+
* @csspart leading - Allows customization of the leading part.
|
52
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
53
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
54
|
+
* @csspart trailing - Allows customization of the trailing part.
|
55
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
56
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
47
57
|
*/
|
48
58
|
declare class MenuItemCheckbox extends MenuItemCheckbox_base {
|
49
59
|
/**
|
@@ -59,6 +59,16 @@ import styles from './menuitemcheckbox.styles';
|
|
59
59
|
* @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
|
60
60
|
* @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
|
61
61
|
* @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
|
62
|
+
*
|
63
|
+
* @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.
|
64
|
+
*
|
65
|
+
* @csspart checkmark-icon - Allows customization of the checkmark icon.
|
66
|
+
* @csspart leading - Allows customization of the leading part.
|
67
|
+
* @csspart leading-arrow - Allows customization of leading arrow icon.
|
68
|
+
* @csspart leading-text - Allows customization of the leading text part.
|
69
|
+
* @csspart trailing - Allows customization of the trailing part.
|
70
|
+
* @csspart trailing-arrow - Allows customization of trailing arrow icon.
|
71
|
+
* @csspart trailing-text - Allows customization of the trailing text part.
|
62
72
|
*/
|
63
73
|
class MenuItemCheckbox extends ControlledMixin(MenuItem) {
|
64
74
|
constructor() {
|
@@ -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
|
/**
|