@momentum-design/components 0.24.1 → 0.25.0

package/dist/index.d.ts

@@ -14,10 +14,10 @@ import Input from './components/input';
 import Link from './components/link';
 import Toggle from './components/toggle';
 import Checkbox from './components/checkbox';
-import CheckboxGroup from './components/checkboxgroup';
 import Radio from './components/radio';
 import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
+import FormfieldGroup from './components/formfieldgroup';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, CheckboxGroup, Radio, VirtualizedList, Tab, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
 export type { TextType, };

package/dist/index.js

@@ -14,8 +14,8 @@ import Input from './components/input';
 import Link from './components/link';
 import Toggle from './components/toggle';
 import Checkbox from './components/checkbox';
-import CheckboxGroup from './components/checkboxgroup';
 import Radio from './components/radio';
 import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, CheckboxGroup, Radio, VirtualizedList, Tab, };
+import FormfieldGroup from './components/formfieldgroup';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };

package/dist/react/checkbox/index.d.ts

@@ -5,6 +5,8 @@ import Component from '../../components/checkbox';
  *
  * 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

package/dist/react/checkbox/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  *
  * 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

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

@@ -0,0 +1,23 @@
+import Component from '../../components/formfieldgroup';
+/**
+ * `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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/formfieldgroup/index.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/formfieldgroup';
+import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constants';
+/**
+ * `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.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'FormfieldGroup',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -5,19 +5,19 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
-export { default as Checkboxgroup } from './checkboxgroup';
 export { default as Divider } from './divider';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
-export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
+export { default as Marker } from './marker';
+export { default as Tab } from './tab';
 export { default as Radio } from './radio';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
-export { default as Tab } from './tab';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -5,19 +5,19 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
-export { default as Checkboxgroup } from './checkboxgroup';
 export { default as Divider } from './divider';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
-export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
+export { default as Marker } from './marker';
+export { default as Tab } from './tab';
 export { default as Radio } from './radio';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
-export { default as Tab } from './tab';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/toggle/index.d.ts

@@ -5,6 +5,8 @@ import Component from '../../components/toggle';
  * 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/react/toggle/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * 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/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.24.1"
+  "version": "0.25.0"
 }

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

@@ -1,43 +0,0 @@
-import { CSSResult } from 'lit';
-import { Component } from '../../models';
-/**
- * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
- * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
- *
- * A checkbox group typically consists of multiple checkboxes grouped together,
- * each representing a selectable option. You can check or uncheck options based on their preferences.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-checkboxgroup
- *
- * @slot help-text - This is a help text slot.
- * @slot default - This is a default slot for children.
- */
-declare class Checkboxgroup extends Component {
-    /**
-     * The header text of the checkboxgroup.
-     */
-    headerText?: string;
-    /** @internal */
-    role: string;
-    /** @internal */
-    private get checkboxList();
-    constructor();
-    /**
-     * Handles the keydown event on the parent checkbox in the checkboxgroup.
-     * When the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.
-     * When the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup.
-     * @param event - The KeyboardEvent
-     */
-    private handleKeyDown;
-    /**
-     * Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction.
-     * @param origin - The element that triggered the event.
-     * @param direction - The direction of navigation, either -1 or 1.
-     */
-    private navigate;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: Array<CSSResult>;
-}
-export default Checkboxgroup;

package/dist/components/checkboxgroup/checkboxgroup.component.js

@@ -1,94 +0,0 @@
-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 { TAG_NAME as CHECKBOX_TAGNAME } from '../checkbox/checkbox.constants';
-import { TYPE as TEXT_TYPE, VALID_TEXT_TAGS as TEXT_TAGS } from '../text/text.constants';
-import styles from './checkboxgroup.styles';
-/**
- * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
- * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
- *
- * A checkbox group typically consists of multiple checkboxes grouped together,
- * each representing a selectable option. You can check or uncheck options based on their preferences.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-checkboxgroup
- *
- * @slot help-text - This is a help text slot.
- * @slot default - This is a default slot for children.
- */
-class Checkboxgroup extends Component {
-    /** @internal */
-    get checkboxList() {
-        var _a, _b, _c;
-        const allSlots = Array.from((_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) !== null && _b !== void 0 ? _b : []);
-        const assignedElements = ((_c = allSlots === null || allSlots === void 0 ? void 0 : allSlots.filter((eachSlot) => eachSlot.name !== 'help-text')[0]) === null || _c === void 0 ? void 0 : _c.assignedElements()) || [];
-        return assignedElements.filter((element) => element.tagName.toLowerCase() === CHECKBOX_TAGNAME);
-    }
-    constructor() {
-        super();
-        /** @internal */
-        this.role = 'group';
-        this.addEventListener('keydown', this.handleKeyDown);
-    }
-    /**
-     * Handles the keydown event on the parent checkbox in the checkboxgroup.
-     * When the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.
-     * When the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup.
-     * @param event - The KeyboardEvent
-     */
-    handleKeyDown(event) {
-        if (event.key === 'ArrowDown') {
-            this.navigate(event.target, 1);
-        }
-        if (event.key === 'ArrowUp') {
-            this.navigate(event.target, -1);
-        }
-    }
-    /**
-     * Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction.
-     * @param origin - The element that triggered the event.
-     * @param direction - The direction of navigation, either -1 or 1.
-     */
-    navigate(origin, direction) {
-        const getAllCheckboxIds = this.checkboxList.map((checkbox) => checkbox.id);
-        const currentIdIndex = getAllCheckboxIds.indexOf(origin.id);
-        // Negative modulo doesn't work directly with JS.
-        // https://stackoverflow.com/a/71167019/4745480
-        const futureIndex = (((currentIdIndex + direction) % getAllCheckboxIds.length)
-            + getAllCheckboxIds.length) % getAllCheckboxIds.length;
-        this.children[futureIndex].focus();
-    }
-    render() {
-        const header = this.headerText
-            ? html `<mdc-text class="header-text" tagname="${TEXT_TAGS.SPAN}" type="${TEXT_TYPE.BODY_LARGE_BOLD}">
-          ${this.headerText}
-        </mdc-text>`
-            : nothing;
-        return html `
-      ${header}
-      <slot name="help-text"></slot>
-      <slot></slot>
-    `;
-    }
-}
-Checkboxgroup.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: String, attribute: 'header-text' }),
-    __metadata("design:type", String)
-], Checkboxgroup.prototype, "headerText", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], Checkboxgroup.prototype, "role", void 0);
-export default Checkboxgroup;

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

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

package/dist/components/checkboxgroup/checkboxgroup.constants.js

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

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

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

package/dist/components/checkboxgroup/index.js

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

package/dist/react/checkboxgroup/index.d.ts

@@ -1,17 +0,0 @@
-import Component from '../../components/checkboxgroup';
-/**
- * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
- * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
- *
- * A checkbox group typically consists of multiple checkboxes grouped together,
- * each representing a selectable option. You can check or uncheck options based on their preferences.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-checkboxgroup
- *
- * @slot help-text - This is a help text slot.
- * @slot default - This is a default slot for children.
- */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
-export default reactWrapper;

package/dist/react/checkboxgroup/index.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Component from '../../components/checkboxgroup';
-import { TAG_NAME } from '../../components/checkboxgroup/checkboxgroup.constants';
-/**
- * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
- * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
- *
- * A checkbox group typically consists of multiple checkboxes grouped together,
- * each representing a selectable option. You can check or uncheck options based on their preferences.
- *
- * @dependency mdc-text
- *
- * @tagname mdc-checkboxgroup
- *
- * @slot help-text - This is a help text slot.
- * @slot default - This is a default slot for children.
- */
-const reactWrapper = createComponent({
-    tagName: TAG_NAME,
-    elementClass: Component,
-    react: React,
-    events: {},
-    displayName: 'Checkboxgroup',
-});
-export default reactWrapper;