@momentum-design/components 0.27.5 → 0.27.6

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
@@ -70,6 +71,7 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
         this.internals = this.attachInternals();
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
+        this.id = `mdc-input-${uuidv4()}`;
     }
     /**
      * Updates the form value to reflect the current state of the checkbox.

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

@@ -32,7 +32,11 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
          * 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;
+        /** @internal */
+        this.shouldRenderLabel = false;
+        this.id = '';
         this.helpTextType = undefined;
+        this.disabled = undefined;
     }
     render() {
         var _a;
@@ -40,7 +44,7 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
       <div
         part="container"
         role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
-        aria-labelledby="${FORMFIELD_DEFAULTS.LABEL_ID}"
+        aria-labelledby="${FORMFIELD_DEFAULTS.HEADING_ID}"
         aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       >

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

@@ -36,6 +36,8 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * The help text that is displayed below the input field.
      */
     helpText?: string;
+    /** @internal */
+    protected shouldRenderLabel: Boolean;
     /**
      * creates the label element when the label property is set.
      * id is used to link the label with the input field.

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

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { v4 as uuidv4 } from 'uuid';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
@@ -32,11 +31,13 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * The unique id of the input field. It is used to link the input field with the label.
          * @default `mdc-input-${uuidv4()}`
          */
-        this.id = `mdc-input-${uuidv4()}`;
+        this.id = '';
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
          */
         this.helpTextType = DEFAULTS.VALIDATION;
+        /** @internal */
+        this.shouldRenderLabel = true;
     }
     /**
      * creates the label element when the label property is set.
@@ -47,18 +48,22 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.label) {
             return nothing;
         }
-        return html `<label id="${DEFAULTS.LABEL_ID}" for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
+        return this.shouldRenderLabel
+            ? html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`
+            : html ` <mdc-text
+          id="${DEFAULTS.HEADING_ID}"
+          tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
+          type="${MDC_TEXT_OPTIONS.HEADER_TYPE}"
+          part="label"
+          >${this.label}</mdc-text
+        >`;
     }
     renderRequiredLabel() {
         if (!this.requiredLabel) {
             return nothing;
         }
         return html `
-      <mdc-text
-        part="required-label"
-        tagname=${MDC_TEXT_OPTIONS.TAGNAME}
-        type=${MDC_TEXT_OPTIONS.TYPE}
-      >
+      <mdc-text part="required-label" tagname=${MDC_TEXT_OPTIONS.TAGNAME} type=${MDC_TEXT_OPTIONS.TYPE}>
         (${this.requiredLabel})
       </mdc-text>
     `;

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

@@ -9,10 +9,11 @@ declare const VALIDATION: {
 declare const DEFAULTS: {
     readonly VALIDATION: "default";
     readonly HELPER_TEXT_ID: "helper-text-id";
-    readonly LABEL_ID: "label-id";
+    readonly HEADING_ID: "heading-id";
 };
 declare const MDC_TEXT_OPTIONS: {
     TAGNAME: "span";
     TYPE: "body-midsize-regular";
+    HEADER_TYPE: "body-midsize-bold";
 };
 export { TAG_NAME, VALIDATION, DEFAULTS, MDC_TEXT_OPTIONS };

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

@@ -11,10 +11,11 @@ const VALIDATION = {
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
     HELPER_TEXT_ID: 'helper-text-id',
-    LABEL_ID: 'label-id',
+    HEADING_ID: 'heading-id',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,
     TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    HEADER_TYPE: TYPE.BODY_MIDSIZE_BOLD,
 };
 export { TAG_NAME, VALIDATION, DEFAULTS, MDC_TEXT_OPTIONS };

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { NameMixin } from '../../utils/mixins/NameMixin';
@@ -108,6 +109,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
         this.clearAriaLabel = '';
         /** @internal */
         this.internals = this.attachInternals();
+        this.id = `mdc-input-${uuidv4()}`;
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import styles from './radio.styles';
@@ -67,6 +68,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
         this.readonly = false;
         /** @internal */
         this.internals = this.attachInternals();
+        this.id = `mdc-input-${uuidv4()}`;
     }
     /**
      * Updates the form value to reflect the current state of the radio.
@@ -74,9 +76,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
      * If unchecked, the value is set to null.
      */
     setFormValue() {
-        if (this.checked) {
-            this.internals.setFormValue(this.value);
-        }
+        this.internals.setFormValue(this.checked ? this.value : null);
     }
     firstUpdated() {
         this.updateTabIndex();
@@ -123,6 +123,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
         if (inputElement) {
             inputElement.checked = true;
         }
+        this.updateTabIndex();
         this.dispatchChangeEvent(event);
     }
     /**
@@ -207,7 +208,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-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           />
           <span class="mdc-radio__icon"></span>

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

@@ -0,0 +1,7 @@
+import RadioGroup from './radiogroup.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-radiogroup']: RadioGroup;
+    }
+}
+export default RadioGroup;

package/dist/components/radiogroup/index.js

@@ -0,0 +1,4 @@
+import RadioGroup from './radiogroup.component';
+import { TAG_NAME } from './radiogroup.constants';
+RadioGroup.register(TAG_NAME);
+export default RadioGroup;

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

@@ -0,0 +1,23 @@
+import { CSSResult } from 'lit';
+import FormfieldGroup from '../formfieldgroup';
+declare const RadioGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & typeof FormfieldGroup;
+/**
+ * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.
+ * It can have a header text and a description. It enables users to select a single option from a set of options.
+ * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.
+ *
+ * @tagname mdc-radiogroup
+ *
+ * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
+ *
+ */
+declare class RadioGroup extends RadioGroup_base {
+    constructor();
+    /**
+     * Using name property to group the radio buttons together.
+     * If the name is not set, it will be set to the name of the radio group.
+     */
+    firstUpdated(): void;
+    static styles: Array<CSSResult>;
+}
+export default RadioGroup;

package/dist/components/radiogroup/radiogroup.component.js

@@ -0,0 +1,31 @@
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import FormfieldGroup from '../formfieldgroup';
+import { TAG_NAME as RADIO_TAGNAME } from '../radio/radio.constants';
+/**
+ * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.
+ * It can have a header text and a description. It enables users to select a single option from a set of options.
+ * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.
+ *
+ * @tagname mdc-radiogroup
+ *
+ * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
+ *
+ */
+class RadioGroup extends NameMixin(FormfieldGroup) {
+    constructor() {
+        super();
+        // This is used to set the role of the component as `radiogroup`.
+        /** @internal */
+        this.isRadio = true;
+    }
+    /**
+     * Using name property to group the radio buttons together.
+     * If the name is not set, it will be set to the name of the radio group.
+     */
+    firstUpdated() {
+        var _a, _b, _c, _d, _e;
+        (_e = (_d = (_c = (_b = Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])) === null || _b === void 0 ? void 0 : _b.flatMap((slot) => slot.assignedElements({ flatten: true }))) === null || _c === void 0 ? void 0 : _c.filter((el) => el.tagName.toLowerCase() === RADIO_TAGNAME)) === null || _d === void 0 ? void 0 : _d.filter((radio) => !radio.hasAttribute('name'))) === null || _e === void 0 ? void 0 : _e.forEach((radio) => radio.setAttribute('name', this.name));
+    }
+}
+RadioGroup.styles = [...FormfieldGroup.styles];
+export default RadioGroup;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-radiogroup";
+export { TAG_NAME };

package/dist/components/radiogroup/radiogroup.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('radiogroup');
+export { TAG_NAME };

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { v4 as uuidv4 } from 'uuid';
 import styles from './toggle.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
@@ -76,6 +77,7 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
         this.internals = this.attachInternals();
         // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
+        this.id = `mdc-input-${uuidv4()}`;
     }
     /**
      * Updates the form value to reflect the current state of the toggle.