@momentum-design/components 0.24.0 → 0.25.0

package/dist/components/checkbox/checkbox.component.d.ts

@@ -7,6 +7,8 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  *
  * A checkbox component contains an optional label and an optional helper text.
  *
+ * To create a group of checkboxes, use the FormFieldGroup component.
+ *
  * @dependency mdc-icon
  *
  * @tagname mdc-checkbox
@@ -45,8 +47,6 @@ declare class Checkbox extends Checkbox_base {
     /** @internal */
     static formAssociated: boolean;
     /** @internal */
-    static shadowRootOptions: ShadowRootInit;
-    /** @internal */
     get form(): HTMLFormElement | null;
     constructor();
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -7,13 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html, LitElement, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ICON_NAME } from './checkbox.constants';
 import styles from './checkbox.styles';
 /**
@@ -22,6 +23,8 @@ import styles from './checkbox.styles';
  *
  * A checkbox component contains an optional label and an optional helper text.
  *
+ * To create a group of checkboxes, use the FormFieldGroup component.
+ *
  * @dependency mdc-icon
  *
  * @tagname mdc-checkbox
@@ -137,6 +140,7 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
         />
@@ -151,11 +155,6 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
 }
 /** @internal */
 Checkbox.formAssociated = true;
-/** @internal */
-Checkbox.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),

package/dist/components/formfieldgroup/formfieldgroup.component.d.ts

@@ -0,0 +1,43 @@
+import type { CSSResult } from 'lit';
+import { TemplateResult } from 'lit';
+import { Component } from '../../models';
+declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof Component;
+/**
+ * `mdc-formfieldgroup` component, groups the form field components together.
+ * All passed in children will have a gap of 12px (0.75rem) each applied.
+ *
+ * This component is specifically for creating a `checkbox` group and a `toggle` group component.
+ * For the radiogroup use the RadioGroup component instead.
+ *
+ * The header text and description text are displayed above the items with accessible labels.<br/>
+ * The consumer has to provide atleast the header-text or the aria-label,
+ * like one of them <b>has</b> to be passed in always, otherwise its not accessible.
+ *
+ * The role will be set to `group`.
+ * The aria-label will be set with the data-aria-label property.
+ * The aria-labelledby will be set with the header id which contains the header text information.
+ * The aria-describedby will be set with the description id which contains the description text information.
+ *
+ * @tagname mdc-formfieldgroup
+ *
+ * @slot default - This is a default slot for checkbox or toggle components.
+ */
+declare class FormfieldGroup extends FormfieldGroup_base {
+    /**
+     * The header text of the group.
+     */
+    headerText?: string;
+    /**
+     * The description of the group.
+     */
+    descriptionText?: string;
+    /**
+     * @internal
+     * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
+     */
+    protected isRadio: boolean;
+    private renderText;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default FormfieldGroup;

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -0,0 +1,78 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { VALID_TEXT_TAGS as TEXT_TAGS, TYPE as TEXT_TYPE } from '../text/text.constants';
+import { DEFAULTS, ROLE } from './formfieldgroup.constants';
+import styles from './formfieldgroup.styles';
+/**
+ * `mdc-formfieldgroup` component, groups the form field components together.
+ * All passed in children will have a gap of 12px (0.75rem) each applied.
+ *
+ * This component is specifically for creating a `checkbox` group and a `toggle` group component.
+ * For the radiogroup use the RadioGroup component instead.
+ *
+ * The header text and description text are displayed above the items with accessible labels.<br/>
+ * The consumer has to provide atleast the header-text or the aria-label,
+ * like one of them <b>has</b> to be passed in always, otherwise its not accessible.
+ *
+ * The role will be set to `group`.
+ * The aria-label will be set with the data-aria-label property.
+ * The aria-labelledby will be set with the header id which contains the header text information.
+ * The aria-describedby will be set with the description id which contains the description text information.
+ *
+ * @tagname mdc-formfieldgroup
+ *
+ * @slot default - This is a default slot for checkbox or toggle components.
+ */
+class FormfieldGroup extends DataAriaLabelMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
+         */
+        this.isRadio = false;
+    }
+    renderText(type, id, cssPart, value) {
+        if (!value) {
+            return nothing;
+        }
+        return html `<mdc-text id="${id}" type="${type}" tagname="${TEXT_TAGS.SPAN}" part="${cssPart}">${value}</mdc-text>`;
+    }
+    render() {
+        var _a;
+        return html `
+      <div
+        part="container"
+        role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
+        aria-labelledby="${DEFAULTS.HEADER_ID}"
+        aria-describedby="${DEFAULTS.DESCRIPTION_ID}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+        ${this.renderText(TEXT_TYPE.BODY_LARGE_BOLD, DEFAULTS.HEADER_ID, 'header', this.headerText)}
+        ${this.renderText(TEXT_TYPE.BODY_LARGE_REGULAR, DEFAULTS.DESCRIPTION_ID, 'description', this.descriptionText)}
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+FormfieldGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, attribute: 'header-text', reflect: true }),
+    __metadata("design:type", String)
+], FormfieldGroup.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, attribute: 'description-text', reflect: true }),
+    __metadata("design:type", String)
+], FormfieldGroup.prototype, "descriptionText", void 0);
+export default FormfieldGroup;

package/dist/components/formfieldgroup/formfieldgroup.constants.d.ts

@@ -0,0 +1,10 @@
+declare const TAG_NAME: "mdc-formfieldgroup";
+declare const ROLE: {
+    readonly RADIOGROUP: "radiogroup";
+    readonly GROUP: "group";
+};
+declare const DEFAULTS: {
+    readonly HEADER_ID: "header-id";
+    readonly DESCRIPTION_ID: "description-id";
+};
+export { DEFAULTS, ROLE, TAG_NAME };

package/dist/components/formfieldgroup/formfieldgroup.constants.js

@@ -0,0 +1,11 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('formfieldgroup');
+const ROLE = {
+    RADIOGROUP: 'radiogroup',
+    GROUP: 'group',
+};
+const DEFAULTS = {
+    HEADER_ID: 'header-id',
+    DESCRIPTION_ID: 'description-id',
+};
+export { DEFAULTS, ROLE, TAG_NAME };

package/dist/components/{checkboxgroup/checkboxgroup.styles.js → formfieldgroup/formfieldgroup.styles.js}

@@ -1,9 +1,12 @@
 import { css } from 'lit';
 const styles = css `
-  :host {
+  :host::part(container) {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
   }
+  :host::part(description) {
+    margin-bottom: 0.25rem;
+  }
 `;
 export default [styles];

package/dist/components/formfieldgroup/index.d.ts

@@ -0,0 +1,8 @@
+import FormfieldGroup from './formfieldgroup.component';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-formfieldgroup']: FormfieldGroup;
+    }
+}
+export default FormfieldGroup;

package/dist/components/formfieldgroup/index.js

@@ -0,0 +1,5 @@
+import FormfieldGroup from './formfieldgroup.component';
+import { TAG_NAME } from './formfieldgroup.constants';
+import '../text';
+FormfieldGroup.register(TAG_NAME);
+export default FormfieldGroup;

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -8,13 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { v4 as uuidv4 } from 'uuid';
 import { property } from 'lit/decorators.js';
-import styles from './formfieldwrapper.styles';
+import { v4 as uuidv4 } from 'uuid';
 import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
+import styles from './formfieldwrapper.styles';
 import { getHelperIcon } from './formfieldwrapper.utils';
-import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
@@ -89,6 +89,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         }
         return html `
       <mdc-text
+        id="${DEFAULTS.HELPER_TEXT_ID}"
         part="help-text"
         tagname=${MDC_TEXT_OPTIONS.TAGNAME}
         type=${MDC_TEXT_OPTIONS.TYPE}

package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts

@@ -8,6 +8,7 @@ declare const VALIDATION: {
 };
 declare const DEFAULTS: {
     readonly VALIDATION: "default";
+    readonly HELPER_TEXT_ID: "helper-text-id";
 };
 declare const MDC_TEXT_OPTIONS: {
     TAGNAME: "span";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -10,6 +10,7 @@ const VALIDATION = {
 };
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
+    HELPER_TEXT_ID: 'helper-text-id',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

package/dist/components/input/input.component.js

@@ -14,6 +14,7 @@ import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 /**
@@ -313,6 +314,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             ?readonly="${this.readonly}"
             ?required="${!!this.requiredLabel}"
             type="text"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}

package/dist/components/radio/radio.component.js

@@ -15,6 +15,7 @@ import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import styles from './radio.styles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.
@@ -203,6 +204,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             ?disabled=${this.disabled}
             class="mdc-radio__input"
             aria-checked="${this.checked}"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           />
           <span class="mdc-radio__icon"></span>

package/dist/components/toggle/toggle.component.d.ts

@@ -8,6 +8,8 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * where users need to enable or disable a feature.
  * It contains an optional label and an optional helper text.
  *
+ * To create a group of toggles, use the FormFieldGroup component.
+ *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon

package/dist/components/toggle/toggle.component.js

@@ -14,6 +14,7 @@ import styles from './toggle.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import { NameMixin } from '../../utils/mixins/NameMixin';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM, TOGGLE_SIZE } from './toggle.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 /**
@@ -22,6 +23,8 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  * where users need to enable or disable a feature.
  * It contains an optional label and an optional helper text.
  *
+ * To create a group of toggles, use the FormFieldGroup component.
+ *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
@@ -134,6 +137,7 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             value="${ifDefined(this.value)}"
             .checked="${this.checked}"
             .disabled="${this.disabled}"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
             tabindex="${this.disabled ? -1 : 0}"
             @change="${this.handleChange}"