@momentum-design/components 0.20.0 → 0.21.0

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

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

package/dist/components/radio/index.js

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

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

@@ -0,0 +1,97 @@
+import { CSSResult, PropertyValues } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * 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.
+ *
+ * A radio component contains an optional label, optional info icon and an optional helper text.
+ * @dependency mdc-formfieldwrapper
+ *
+ * @tagname mdc-radio
+ *
+ * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
+ * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
+ * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
+ * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ *
+ */
+declare class Radio extends Radio_base {
+    /**
+    * Determines whether the radio is selected or unselected.
+    *
+    * @default false
+    */
+    checked: boolean;
+    /**
+    * Determines whether the radio is read-only.
+    *
+    * @default false
+    */
+    readonly: boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+     * Updates the form value to reflect the current state of the radio.
+     * If checked, the value is set to the user-provided value.
+     * If unchecked, the value is set to null.
+     */
+    private setFormValue;
+    firstUpdated(): void;
+    /**
+     * Returns all radios within the same group (name).
+     */
+    private getAllRadiosWithinSameGroup;
+    /**
+     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+     */
+    private dispatchChangeEvent;
+    /**
+     * Handles the change event on the radio element.
+     * This will toggle the state of the radio element.
+     * Dispatches the change event.
+     */
+    private handleChange;
+    /**
+     * Updates the state of the radio button at the specified index within the enabled radios.
+     * Focuses the radio button and triggers the change event if the radio button is not read-only.
+     *
+     * @param enabledRadios - An array of enabled radio buttons within the same group.
+     * @param index - The index of the radio button to be updated within the enabled radios array.
+     * @param event - The event that triggered the update.
+     */
+    private updateRadio;
+    /**
+     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+     */
+    private handleKeyDown;
+    /**
+     * Update tab index for all radios in the same group (name)
+     * If any radio group is checked, it will have a tab index of 0
+     * If no radio group is checked, the first enabled radio will have a tab index of 0
+     */
+    private updateTabIndex;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Radio;

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

@@ -0,0 +1,229 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import styles from './radio.styles';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+/**
+ * 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.
+ *
+ * A radio component contains an optional label, optional info icon and an optional helper text.
+ * @dependency mdc-formfieldwrapper
+ *
+ * @tagname mdc-radio
+ *
+ * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
+ * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
+ * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
+ * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ *
+ */
+class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+        * Determines whether the radio is selected or unselected.
+        *
+        * @default false
+        */
+        this.checked = false;
+        /**
+        * Determines whether the radio is read-only.
+        *
+        * @default false
+        */
+        this.readonly = false;
+        /** @internal */
+        this.internals = this.attachInternals();
+    }
+    /**
+     * Updates the form value to reflect the current state of the radio.
+     * If checked, the value is set to the user-provided value.
+     * If unchecked, the value is set to null.
+     */
+    setFormValue() {
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    firstUpdated() {
+        this.updateTabIndex();
+    }
+    /**
+     * Returns all radios within the same group (name).
+     */
+    getAllRadiosWithinSameGroup() {
+        return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
+    }
+    /**
+     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+     */
+    dispatchChangeEvent(event) {
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
+    /**
+     * Handles the change event on the radio element.
+     * This will toggle the state of the radio element.
+     * Dispatches the change event.
+     */
+    handleChange(event) {
+        var _a;
+        if (this.disabled || this.readonly)
+            return;
+        const radios = this.getAllRadiosWithinSameGroup();
+        radios.forEach((radio) => {
+            var _a;
+            /**
+              *  Uncheck all radios in the same group (name)
+            */
+            const radioElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            if (radioElement) {
+                // eslint-disable-next-line no-param-reassign
+                radio.checked = false;
+                radioElement.checked = false;
+            }
+        });
+        this.checked = true;
+        const inputElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        if (inputElement) {
+            inputElement.checked = true;
+        }
+        this.dispatchChangeEvent(event);
+    }
+    /**
+     * Updates the state of the radio button at the specified index within the enabled radios.
+     * Focuses the radio button and triggers the change event if the radio button is not read-only.
+     *
+     * @param enabledRadios - An array of enabled radio buttons within the same group.
+     * @param index - The index of the radio button to be updated within the enabled radios array.
+     * @param event - The event that triggered the update.
+     */
+    updateRadio(enabledRadios, index, event) {
+        var _a, _b;
+        (_b = (_a = enabledRadios[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+        enabledRadios[index].handleChange(event);
+    }
+    /**
+     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+     */
+    handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        const radios = this.getAllRadiosWithinSameGroup();
+        const enabledRadios = radios.filter((radio) => !radio.disabled);
+        const currentIndex = enabledRadios.indexOf(this);
+        if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+            // Move focus to the next radio
+            const nextIndex = (currentIndex + 1) % enabledRadios.length;
+            this.updateRadio(enabledRadios, nextIndex, event);
+        }
+        else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+            // Move focus to the previous radio
+            const prevIndex = (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;
+            this.updateRadio(enabledRadios, prevIndex, event);
+        }
+        this.updateTabIndex();
+    }
+    /**
+     * Update tab index for all radios in the same group (name)
+     * If any radio group is checked, it will have a tab index of 0
+     * If no radio group is checked, the first enabled radio will have a tab index of 0
+     */
+    updateTabIndex() {
+        const radios = this.getAllRadiosWithinSameGroup();
+        const checked = radios.find((radio) => radio.checked);
+        const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+        radios.forEach((radio) => {
+            var _a;
+            const inputElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            if (inputElement) {
+                inputElement.tabIndex = -1;
+                if (radio === checked) {
+                    inputElement.tabIndex = 0;
+                }
+                else if (!checked && radio === firstEnabledRadio) {
+                    inputElement.tabIndex = 0;
+                }
+            }
+        });
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+    }
+    render() {
+        var _a;
+        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
+        return html `
+      <div class="mdc-radio__container">
+        <div class="mdc-radio__icon-container mdc-focus-ring">
+          <input
+            id="${this.id}"
+            type="radio"
+            role="radio"
+            name="${ifDefined(this.name)}"
+            value="${ifDefined(this.value)}"
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            ?checked=${this.checked}
+            ?readonly=${this.readonly}
+            ?disabled=${this.disabled}
+            class="mdc-radio__input"
+            aria-checked="${this.checked}"
+            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          />
+          <span class="mdc-radio__icon"></span>
+        </div>
+        <div class="mdc-radio__label-container">
+          ${this.renderLabel()}
+          ${helpTextContent}
+        </div>
+      </div>
+    `;
+    }
+}
+/** @internal */
+Radio.formAssociated = true;
+Radio.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Radio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Radio.prototype, "readonly", void 0);
+export default Radio;

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

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

package/dist/components/radio/radio.constants.js

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

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

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

package/dist/components/radio/radio.styles.js

@@ -0,0 +1,162 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+  :host{
+    --mdc-radio-inner-circle-size: 0.375rem;
+    --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-radio-normal-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-radio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-radio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
+
+    --mdc-radio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-radio-control-inactive-hover: var(--mds-color-theme-control-inactive-hover);
+    --mdc-radio-control-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
+    --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
+
+    --mdc-radio-control-active-color: var(--mds-color-theme-control-active-normal);
+    --mdc-radio-control-active-hover-color: var(--mds-color-theme-control-active-hover);
+    --mdc-radio-control-active-pressed-color: var(--mds-color-theme-control-active-pressed);
+    --mdc-radio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
+
+  }
+  :host([readonly]) .mdc-radio__input,
+  :host([disabled]) .mdc-radio__input,
+  :host([disabled]) .mdc-label,
+  :host([readonly]) .mdc-label{
+    cursor: default;
+  }
+
+  .mdc-label {
+    cursor: pointer;
+  }
+
+  :host([disabled]) .mdc-radio__label-text,
+  :host([disabled]) .mdc-radio__help-text {
+    color: var(--mdc-radio-text-disabled-color);
+  }
+
+  :host([disabled]) .mdc-radio__icon,
+  :host([disabled]) .mdc-radio__container:hover .mdc-radio__icon,
+  :host([disabled][readonly]) .mdc-radio__icon,
+  :host([disabled][readonly]) .mdc-radio__container:hover .mdc-radio__icon {
+    border-color: var(--mdc-radio-disabled-border-color);
+    background: var(--mdc-radio-control-inactive-disabled-background);
+  }
+
+  :host([disabled][checked]) .mdc-radio__icon,
+  :host([disabled][checked]) .mdc-radio__container:hover .mdc-radio__icon,
+  :host([disabled][readonly][checked]) .mdc-radio__icon,
+  :host([disabled][readonly][checked]) .mdc-radio__container:hover .mdc-radio__icon {
+    border: var(--mdc-radio-control-active-disabled-background);
+    background: var(--mdc-radio-control-active-disabled-background);
+  }
+
+  :host([disabled][checked]) .mdc-radio__icon:after,
+  :host([disabled][checked]) .mdc-radio__container:hover  .mdc-radio__icon:after,
+  :host([disabled][readonly][checked]) .mdc-radio__icon:after,
+  :host([disabled][readonly][checked]) .mdc-radio__container:hover  .mdc-radio__icon:after {
+    background: var(--mdc-radio-inner-circle-disabled-background);
+  }
+
+  :host .mdc-radio__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1rem;
+    height: 1rem;
+    border: 0.0625rem solid var(--mdc-radio-normal-border-color);
+    background-color: var(--mdc-radio-control-inactive-color);
+    border-radius: 50%;
+  }
+
+  :host([checked]) .mdc-radio__icon {
+    border-color: var(--mdc-radio-control-active-color);
+    background-color: var(--mdc-radio-control-active-color);
+  }
+
+  :host([checked]) .mdc-radio__icon:after {
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--mdc-radio-inner-circle-size);
+    height: var(--mdc-radio-inner-circle-size);
+    border-radius: 50%;
+    background: var(--mdc-radio-inner-circle-normal-background);
+  }
+
+  :host .mdc-radio__input:hover ~ .mdc-radio__icon {
+    border-color: var(--mdc-radio-normal-border-color);
+    background-color: var(--mdc-radio-control-inactive-hover);
+  }
+
+  :host([checked]) .mdc-radio__input:hover ~ .mdc-radio__icon {
+    border-color: var(--mdc-radio-control-active-hover-color);
+    background-color: var(--mdc-radio-control-active-hover-color);
+  }
+
+  :host .mdc-radio__input:active ~ .mdc-radio__icon {
+    border-color: var(--mdc-radio-normal-border-color);
+    background-color: var(--mdc-radio-control-inactive-pressed-color);
+  }
+
+  :host([checked]) .mdc-radio__input:active ~ .mdc-radio__icon {
+    border-color: var(--mdc-radio-control-active-pressed-color);
+    background-color: var(--mdc-radio-control-active-pressed-color);
+  }
+
+  :host([readonly]) .mdc-radio__icon,
+  :host([readonly]) .mdc-radio__container:hover .mdc-radio__icon {
+    border-color: var(--mdc-radio-normal-border-color);
+    background-color: var(--mdc-radio-control-inactive-color);
+  }
+
+  :host([readonly][checked]) .mdc-radio__icon {
+    border-color: var(--mdc-radio-normal-border-color);
+  }
+
+  :host([readonly][checked]) .mdc-radio__icon:after,
+  :host([readonly][checked]) .mdc-radio__container:hover .mdc-radio__icon:after,
+  :host([readonly][checked]) .mdc-radio__container:active .mdc-radio__icon:after {
+    background-color: var(--mdc-radio-text-disabled-color);
+  }
+
+  .mdc-radio__container {
+    display: flex;
+    align-items: start;
+    gap: 0.5rem;
+  }
+  .mdc-radio__icon-container {
+    display: block;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    margin: 0.125rem 0;
+    border-radius: 50%;
+  }
+
+  .mdc-radio__icon-container input{
+    position: absolute;
+    opacity: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    z-index: 2;
+  }
+  
+  .mdc-radio__icon-container .mdc-radio__icon:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  .mdc-radio__label-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+`, ...hostFocusRingStyles(true)];
+export default styles;