@momentum-design/components 0.25.0 → 0.25.1
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 +86 -76
- package/dist/browser/index.js.map +3 -3
- package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +4 -13
- package/dist/components/formfieldgroup/formfieldgroup.component.js +14 -35
- package/dist/components/formfieldgroup/formfieldgroup.constants.d.ts +1 -5
- package/dist/components/formfieldgroup/formfieldgroup.constants.js +1 -5
- package/dist/components/formfieldgroup/formfieldgroup.styles.js +10 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +1 -1
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +4 -1
- package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts +1 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.constants.js +1 -0
- package/dist/custom-elements.json +1502 -1329
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -1,7 +1,6 @@
|
|
1
1
|
import type { CSSResult } from 'lit';
|
2
|
-
import
|
3
|
-
|
4
|
-
declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof Component;
|
2
|
+
import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
|
3
|
+
declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
|
5
4
|
/**
|
6
5
|
* `mdc-formfieldgroup` component, groups the form field components together.
|
7
6
|
* All passed in children will have a gap of 12px (0.75rem) each applied.
|
@@ -23,21 +22,13 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
|
|
23
22
|
* @slot default - This is a default slot for checkbox or toggle components.
|
24
23
|
*/
|
25
24
|
declare class FormfieldGroup extends FormfieldGroup_base {
|
26
|
-
/**
|
27
|
-
* The header text of the group.
|
28
|
-
*/
|
29
|
-
headerText?: string;
|
30
|
-
/**
|
31
|
-
* The description of the group.
|
32
|
-
*/
|
33
|
-
descriptionText?: string;
|
34
25
|
/**
|
35
26
|
* @internal
|
36
27
|
* This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
|
37
28
|
*/
|
38
29
|
protected isRadio: boolean;
|
39
|
-
|
40
|
-
render(): TemplateResult<1>;
|
30
|
+
constructor();
|
31
|
+
render(): import("lit-html").TemplateResult<1>;
|
41
32
|
static styles: Array<CSSResult>;
|
42
33
|
}
|
43
34
|
export default FormfieldGroup;
|
@@ -1,18 +1,8 @@
|
|
1
|
-
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
-
};
|
7
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
|
-
};
|
10
|
-
import { html, nothing } from 'lit';
|
11
|
-
import { property } from 'lit/decorators.js';
|
12
|
-
import { Component } from '../../models';
|
1
|
+
import { html } from 'lit';
|
13
2
|
import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
|
14
|
-
import
|
15
|
-
import {
|
3
|
+
import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
|
4
|
+
import { ROLE } from './formfieldgroup.constants';
|
5
|
+
import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
|
16
6
|
import styles from './formfieldgroup.styles';
|
17
7
|
/**
|
18
8
|
* `mdc-formfieldgroup` component, groups the form field components together.
|
@@ -34,20 +24,15 @@ import styles from './formfieldgroup.styles';
|
|
34
24
|
*
|
35
25
|
* @slot default - This is a default slot for checkbox or toggle components.
|
36
26
|
*/
|
37
|
-
class FormfieldGroup extends DataAriaLabelMixin(
|
27
|
+
class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
|
38
28
|
constructor() {
|
39
|
-
super(
|
29
|
+
super();
|
40
30
|
/**
|
41
31
|
* @internal
|
42
32
|
* This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
|
43
33
|
*/
|
44
34
|
this.isRadio = false;
|
45
|
-
|
46
|
-
renderText(type, id, cssPart, value) {
|
47
|
-
if (!value) {
|
48
|
-
return nothing;
|
49
|
-
}
|
50
|
-
return html `<mdc-text id="${id}" type="${type}" tagname="${TEXT_TAGS.SPAN}" part="${cssPart}">${value}</mdc-text>`;
|
35
|
+
this.helpTextType = undefined;
|
51
36
|
}
|
52
37
|
render() {
|
53
38
|
var _a;
|
@@ -55,24 +40,18 @@ class FormfieldGroup extends DataAriaLabelMixin(Component) {
|
|
55
40
|
<div
|
56
41
|
part="container"
|
57
42
|
role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
|
58
|
-
aria-labelledby="${
|
59
|
-
aria-describedby="${
|
43
|
+
aria-labelledby="${FORMFIELD_DEFAULTS.LABEL_ID}"
|
44
|
+
aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
|
60
45
|
aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
|
61
46
|
>
|
62
|
-
|
63
|
-
|
47
|
+
<div part="group-header">
|
48
|
+
${this.renderLabel()}
|
49
|
+
${this.renderHelperText()}
|
50
|
+
</div>
|
64
51
|
<slot></slot>
|
65
52
|
</div>
|
66
53
|
`;
|
67
54
|
}
|
68
55
|
}
|
69
|
-
FormfieldGroup.styles = [...
|
70
|
-
__decorate([
|
71
|
-
property({ type: String, attribute: 'header-text', reflect: true }),
|
72
|
-
__metadata("design:type", String)
|
73
|
-
], FormfieldGroup.prototype, "headerText", void 0);
|
74
|
-
__decorate([
|
75
|
-
property({ type: String, attribute: 'description-text', reflect: true }),
|
76
|
-
__metadata("design:type", String)
|
77
|
-
], FormfieldGroup.prototype, "descriptionText", void 0);
|
56
|
+
FormfieldGroup.styles = [...FormfieldWrapper.styles, ...styles];
|
78
57
|
export default FormfieldGroup;
|
@@ -3,8 +3,4 @@ declare const ROLE: {
|
|
3
3
|
readonly RADIOGROUP: "radiogroup";
|
4
4
|
readonly GROUP: "group";
|
5
5
|
};
|
6
|
-
|
7
|
-
readonly HEADER_ID: "header-id";
|
8
|
-
readonly DESCRIPTION_ID: "description-id";
|
9
|
-
};
|
10
|
-
export { DEFAULTS, ROLE, TAG_NAME };
|
6
|
+
export { ROLE, TAG_NAME };
|
@@ -1,12 +1,20 @@
|
|
1
1
|
import { css } from 'lit';
|
2
2
|
const styles = css `
|
3
|
+
|
3
4
|
:host::part(container) {
|
4
5
|
display: flex;
|
5
6
|
flex-direction: column;
|
6
7
|
gap: 0.75rem;
|
7
8
|
}
|
8
|
-
|
9
|
-
|
9
|
+
|
10
|
+
:host::part(group-header) {
|
11
|
+
display: flex;
|
12
|
+
flex-direction: column;
|
13
|
+
gap: 0.25rem;
|
14
|
+
}
|
15
|
+
|
16
|
+
:host::part(label-text){
|
17
|
+
font-weight: bold;
|
10
18
|
}
|
11
19
|
`;
|
12
20
|
export default [styles];
|
@@ -64,7 +64,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
|
|
64
64
|
* renders the mdc-help-text container that contains the helpertext icon and helpertext.
|
65
65
|
* @returns void
|
66
66
|
*/
|
67
|
-
protected renderHelperText(): import("lit-html").TemplateResult<1
|
67
|
+
protected renderHelperText(): import("lit-html").TemplateResult<1> | typeof nothing;
|
68
68
|
static styles: Array<CSSResult>;
|
69
69
|
}
|
70
70
|
export default FormfieldWrapper;
|
@@ -47,7 +47,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
|
|
47
47
|
if (!this.label) {
|
48
48
|
return nothing;
|
49
49
|
}
|
50
|
-
return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
|
50
|
+
return html `<label id="${DEFAULTS.LABEL_ID}" for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
|
51
51
|
}
|
52
52
|
renderRequiredLabel() {
|
53
53
|
if (!this.requiredLabel) {
|
@@ -114,6 +114,9 @@ class FormfieldWrapper extends DisabledMixin(Component) {
|
|
114
114
|
* @returns void
|
115
115
|
*/
|
116
116
|
renderHelperText() {
|
117
|
+
if (!this.helpText) {
|
118
|
+
return nothing;
|
119
|
+
}
|
117
120
|
return html `<div class="mdc-help-text" part="mdc-help-text">
|
118
121
|
<slot name="help-icon">${this.renderHelpTextIcon()}</slot>
|
119
122
|
<slot name="help-text">${this.renderHelpText()}</slot>
|