@momentum-design/components 0.66.3 → 0.67.0

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -0,0 +1,70 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ROLE } from '../../utils/roles';
+import MenuItem from '../menuitem/menuitem.component';
+import { TYPE } from '../text/text.constants';
+import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
+/**
+ * A menuitemradio component is a checkable menuitem that is used in a menu.
+ * A menuitemradio should be checked only one at a time. <br/>
+ * There should be no focusable descendants inside this menuitemradio component.
+ *
+ * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ *
+ * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
+ *
+ * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
+ *
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitemradio
+ *
+ * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
+ * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
+ */
+class MenuItemRadio extends MenuItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
+         * @default 'false'
+         */
+        this.ariaChecked = ARIA_CHECKED_STATES.FALSE;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.MENUITEMRADIO;
+    }
+    render() {
+        return html `
+      <div part="leading-controls">
+        <mdc-staticradio
+          slot="leading-controls"
+          ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticradio>
+      </div>
+      <div part="leading-text">
+        ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+        ${this.getText('leading-text-secondary-label', TYPE.BODY_MIDSIZE_REGULAR, this.secondaryLabel)}
+      </div>
+    `;
+    }
+}
+MenuItemRadio.styles = [...MenuItem.styles];
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' }),
+    __metadata("design:type", String)
+], MenuItemRadio.prototype, "ariaChecked", void 0);
+export default MenuItemRadio;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-menuitemradio";
+declare const ARIA_CHECKED_STATES: {
+    readonly TRUE: "true";
+    readonly FALSE: "false";
+};
+export { TAG_NAME, ARIA_CHECKED_STATES };

package/dist/components/menuitemradio/menuitemradio.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menuitemradio');
+const ARIA_CHECKED_STATES = {
+    TRUE: 'true',
+    FALSE: 'false',
+};
+export { TAG_NAME, ARIA_CHECKED_STATES };

package/dist/components/menuitemradio/menuitemradio.types.d.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '../../utils/types';
+import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
+type AriaChecked = ValueOf<typeof ARIA_CHECKED_STATES>;
+interface Events {
+    onChangeEvent: Event;
+    onClickEvent: MouseEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { Events, AriaChecked };

package/dist/components/menuitemradio/menuitemradio.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/popover/popover.styles.js

@@ -81,6 +81,11 @@ const styles = css `
     z-index: 9999;
   }
 
+  :host(:dir(rtl)) .popover-close {
+    right: auto;
+    left: 0.75rem;
+  }
+
   .popover-arrow[data-side='top'] {
     border-top: none;
     border-left: none;

package/dist/components/toggletip/toggletip.styles.js

@@ -21,5 +21,13 @@ const styles = css `
   :host([color='contrast'])::part(popover-content) {
     color: var(--mdc-toggletip-text-color-contrast);
   }
+
+  :host(:dir(ltr))::part(popover-content) {
+    margin-right: 2rem;
+  }
+
+  :host(:dir(rtl))::part(popover-content) {
+    margin-left: 2rem;
+  }
 `;
 export default [styles];