@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.
@@ -1,7 +1,6 @@
1
1
  import type { CSSResult } from 'lit';
2
- import { TemplateResult } from 'lit';
3
- import { Component } from '../../models';
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
- private renderText;
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
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
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 { VALID_TEXT_TAGS as TEXT_TAGS, TYPE as TEXT_TYPE } from '../text/text.constants';
15
- import { DEFAULTS, ROLE } from './formfieldgroup.constants';
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(Component) {
27
+ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
38
28
  constructor() {
39
- super(...arguments);
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="${DEFAULTS.HEADER_ID}"
59
- aria-describedby="${DEFAULTS.DESCRIPTION_ID}"
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
- ${this.renderText(TEXT_TYPE.BODY_LARGE_BOLD, DEFAULTS.HEADER_ID, 'header', this.headerText)}
63
- ${this.renderText(TEXT_TYPE.BODY_LARGE_REGULAR, DEFAULTS.DESCRIPTION_ID, 'description', this.descriptionText)}
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 = [...Component.styles, ...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
- declare const DEFAULTS: {
7
- readonly HEADER_ID: "header-id";
8
- readonly DESCRIPTION_ID: "description-id";
9
- };
10
- export { DEFAULTS, ROLE, TAG_NAME };
6
+ export { ROLE, TAG_NAME };
@@ -4,8 +4,4 @@ const ROLE = {
4
4
  RADIOGROUP: 'radiogroup',
5
5
  GROUP: 'group',
6
6
  };
7
- const DEFAULTS = {
8
- HEADER_ID: 'header-id',
9
- DESCRIPTION_ID: 'description-id',
10
- };
11
- export { DEFAULTS, ROLE, TAG_NAME };
7
+ 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
- :host::part(description) {
9
- margin-bottom: 0.25rem;
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>
@@ -9,6 +9,7 @@ declare const VALIDATION: {
9
9
  declare const DEFAULTS: {
10
10
  readonly VALIDATION: "default";
11
11
  readonly HELPER_TEXT_ID: "helper-text-id";
12
+ readonly LABEL_ID: "label-id";
12
13
  };
13
14
  declare const MDC_TEXT_OPTIONS: {
14
15
  TAGNAME: "span";
@@ -11,6 +11,7 @@ const VALIDATION = {
11
11
  const DEFAULTS = {
12
12
  VALIDATION: VALIDATION.DEFAULT,
13
13
  HELPER_TEXT_ID: 'helper-text-id',
14
+ LABEL_ID: 'label-id',
14
15
  };
15
16
  const MDC_TEXT_OPTIONS = {
16
17
  TAGNAME: VALID_TEXT_TAGS.SPAN,