@momentum-design/components 0.22.5 → 0.22.7

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

@@ -45,6 +45,8 @@ declare class Checkbox extends Checkbox_base {
     /** @internal */
     static formAssociated: boolean;
     /** @internal */
+    static shadowRootOptions: ShadowRootInit;
+    /** @internal */
     get form(): HTMLFormElement | null;
     constructor();
     /**
@@ -61,9 +63,15 @@ declare class Checkbox extends Checkbox_base {
     private toggleState;
     /**
      * Toggles the state of the checkbox element.
-     * and dispatch the new event.
+     * and dispatch the new change event.
      */
     handleChange(event: Event): void;
+    /**
+     * Handles the keydown event on the checkbox.
+     * When the user presses Enter, the form is submitted.
+     * @param event - The keyboard event.
+     */
+    private handleKeyDown;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -7,7 +7,7 @@ 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, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
@@ -90,11 +90,23 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
     }
     /**
      * Toggles the state of the checkbox element.
-     * and dispatch the new event.
+     * and dispatch the new change event.
      */
     handleChange(event) {
         this.toggleState();
-        this.dispatchEvent(new Event(event.type, event));
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
+    /**
+     * Handles the keydown event on the checkbox.
+     * When the user presses Enter, the form is submitted.
+     * @param event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Enter') {
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -126,6 +138,7 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
           .disabled="${this.disabled}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           @change=${this.handleChange}
+          @keydown=${this.handleKeyDown}
         />
         <div class="icon-container">${checkboxIconContent}</div>
       </div>
@@ -138,6 +151,11 @@ 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/checkboxgroup/checkboxgroup.component.d.ts

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,94 @@
+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

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

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

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

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/checkboxgroup/checkboxgroup.styles.js

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+`;
+export default [styles];

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

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

package/dist/components/checkboxgroup/index.js

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