@momentum-design/components 0.36.0 → 0.36.2

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

@@ -1,6 +1,7 @@
 import type { CSSResult, PropertyValues } from 'lit';
-import { TemplateResult } from 'lit';
+import { nothing, TemplateResult } from 'lit';
 import { Component } from '../../models';
+import type { TextType } from '../text/text.types';
 import type { ListItemVariants } from './listitem.types';
 declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
@@ -84,7 +85,7 @@ declare class ListItem extends ListItem_base {
      * @param content - The text content to be displayed within the slot.
      * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
      */
-    private getText;
+    protected getText(slotName: string, type: TextType, content?: string): TemplateResult | typeof nothing;
     /**
      * Disable or enable all slotted elements in the leading and trailing slots.
      * This is useful when the list item is disabled, to prevent the user from interacting with the controls.

package/dist/components/listitem/listitem.component.js

@@ -61,7 +61,7 @@ class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component)
          * @default 'full-width'
          */
         this.variant = DEFAULTS.VARIANT;
-        this.role = 'listitem';
+        this.role = this.role || 'listitem';
     }
     /**
      * Generates a template for a text slot with the specified content.

package/dist/components/listitem/listitem.styles.js

@@ -25,11 +25,14 @@ const styles = css `
     border-radius: 3.125rem;
   }
   :host([disabled]),
+  :host([disabled]:hover),
+  :host([disabled]:active),
   :host([disabled])::part(leading-text-secondary-label),
   :host([disabled])::part(leading-text-tertiary-label),
   :host([disabled])::part(leading-text-primary-label),
   :host([disabled])::part(trailing-text-side-header),
   :host([disabled])::part(trailing-text-subline) {
+    background-color: unset;
     color: var(--mdc-listitem-disabled-color);
     cursor: default;
   }

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

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

package/dist/components/optgroup/index.js

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

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

@@ -0,0 +1,28 @@
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+declare const OptGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+declare class OptGroup extends OptGroup_base {
+    /**
+     * The header text to be displayed on the top of the options list.
+     */
+    label?: string;
+    /** @internal */
+    options: Array<HTMLElement>;
+    private setDisabledForAllOptions;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default OptGroup;

package/dist/components/optgroup/optgroup.component.js

@@ -0,0 +1,77 @@
+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, queryAssignedElements } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { HEADER_ID } from './optgroup.constants';
+import styles from './optgroup.styles';
+/**
+ * optgroup component, which creates a grouping of mdc-option within a listbox element.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-optgroup
+ *
+ * @slot default - This is a default slot for mdc-option elements.
+ *
+ * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.
+ */
+class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
+    setDisabledForAllOptions() {
+        this.options.forEach((element) => {
+            if (this.disabled) {
+                element.setAttribute('disabled', '');
+            }
+            else {
+                element.removeAttribute('disabled');
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setDisabledForAllOptions();
+        }
+    }
+    render() {
+        var _a;
+        const headerText = this.label ? html `
+      <mdc-text
+        id="${HEADER_ID}"
+        part="header-text"
+        type="${TYPE.BODY_MIDSIZE_BOLD}"
+        tagname="${VALID_TEXT_TAGS.SPAN}"
+      >${this.label}</mdc-text>
+    ` : nothing;
+        return html `
+      <div
+        role="group"
+        aria-labelledby="${this.label ? HEADER_ID : ''}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+        ${headerText}
+        <slot role="presentation"></slot>
+      </div>
+    `;
+    }
+}
+OptGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], OptGroup.prototype, "label", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdc-option' }),
+    __metadata("design:type", Array)
+], OptGroup.prototype, "options", void 0);
+export default OptGroup;

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

@@ -0,0 +1,3 @@
+declare const TAG_NAME: "mdc-optgroup";
+declare const HEADER_ID = "header-id";
+export { TAG_NAME, HEADER_ID };

package/dist/components/optgroup/optgroup.constants.js

@@ -0,0 +1,4 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('optgroup');
+const HEADER_ID = 'header-id';
+export { TAG_NAME, HEADER_ID };

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

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

package/dist/components/optgroup/optgroup.styles.js

@@ -0,0 +1,16 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-optgroup-disabled-color: var(--mds-color-theme-text-primary-disabled);
+  }
+  :host::part(header-text) {
+    padding: 0.5rem 0.75rem;
+    height: 2.25rem;
+  }
+  :host([disabled]),
+  :host([disabled])::part(header-text) {
+    color: var(--mdc-optgroup-disabled-color);
+    cursor: default;
+  }
+`;
+export default [styles];

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

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

package/dist/components/option/index.js

@@ -0,0 +1,5 @@
+import '../icon';
+import Option from './option.component';
+import { TAG_NAME } from './option.constants';
+Option.register(TAG_NAME);
+export default Option;

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

@@ -0,0 +1,46 @@
+import { CSSResult, PropertyValues } from 'lit';
+import type { IconNames } from '../icon/icon.types';
+import ListItem from '../listitem/listitem.component';
+declare const Option_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof ListItem;
+/**
+ * option component, which is used as a list item in a select component.<br/>
+ * We can pass an icon which will be displayed in leading position of the option label text.
+ *
+ * @tagname mdc-option
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @event click - (React: onClick) This event is dispatched when the option is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
+ * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
+ */
+declare class Option extends Option_base {
+    /**
+     * The selected attribute is used to indicate that the option is selected.
+     */
+    selected: boolean;
+    /**
+     * The prefix icon attribute is used to display the icon name on the left of the option label.
+     */
+    prefixIcon?: IconNames;
+    /**
+     * Any additional description can be provided here for screen readers.
+     */
+    ariaLabel: string | null;
+    constructor();
+    /**
+     * Listens to changes in the default slot and updates the label of the option accordingly.
+     * This is used to set the label of the option when it is not explicitly set.
+     * It is called internally when the slot is changed.
+     */
+    private handleDefaultSlotChange;
+    /**
+     * Updates the attribute of the option to reflect the current state.
+     */
+    private updateAttribute;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Option;

package/dist/components/option/option.component.js

@@ -0,0 +1,115 @@
+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 { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import ListItem from '../listitem/listitem.component';
+import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
+import { TYPE } from '../text/text.constants';
+import { SELECTED_ICON_NAME } from './option.constants';
+import styles from './option.styles';
+/**
+ * option component, which is used as a list item in a select component.<br/>
+ * We can pass an icon which will be displayed in leading position of the option label text.
+ *
+ * @tagname mdc-option
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @event click - (React: onClick) This event is dispatched when the option is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
+ * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
+ */
+class Option extends FormInternalsMixin(ListItem) {
+    constructor() {
+        super();
+        /**
+         * The selected attribute is used to indicate that the option is selected.
+         */
+        this.selected = false;
+        /**
+         * Any additional description can be provided here for screen readers.
+         */
+        this.ariaLabel = null;
+        this.role = 'option';
+        this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
+        this.updateAttribute('aria-selected', `${this.selected}`);
+        this.updateAttribute('aria-disabled', `${this.disabled}`);
+        // Option will not contain below fields
+        this.name = undefined;
+        this.secondaryLabel = undefined;
+        this.sideHeaderText = undefined;
+        this.sublineText = undefined;
+        this.dataAriaLabel = undefined;
+    }
+    /**
+     * Listens to changes in the default slot and updates the label of the option accordingly.
+     * This is used to set the label of the option when it is not explicitly set.
+     * It is called internally when the slot is changed.
+     */
+    handleDefaultSlotChange() {
+        var _a, _b, _c;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot && !this.label) {
+            this.label = (_c = (_b = slot.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+        }
+    }
+    /**
+     * Updates the attribute of the option to reflect the current state.
+     */
+    updateAttribute(attributeName, value) {
+        this.setAttribute(attributeName, value);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.updateAttribute('aria-disabled', `${this.disabled}`);
+        }
+        if (changedProperties.has('selected')) {
+            this.updateAttribute('aria-selected', `${this.selected}`);
+        }
+    }
+    render() {
+        const selectedIcon = this.selected ? html `
+      <mdc-icon slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
+    ` : nothing;
+        const prefixIcon = this.prefixIcon ? html `
+      <mdc-icon slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
+    ` : nothing;
+        return html `
+      <div part="leading">
+        ${prefixIcon}
+        <div part="leading-text">
+          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+        </div>
+      </div>
+      <div part="trailing">
+        ${selectedIcon}
+      </div>
+      <slot part="default-slot" @slotchange="${this.handleDefaultSlotChange}"></slot>
+    `;
+    }
+}
+Option.styles = [...ListItem.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Option.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], Option.prototype, "prefixIcon", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Option.prototype, "ariaLabel", void 0);
+export default Option;

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

@@ -0,0 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
+declare const SELECTED_ICON_NAME: Extract<IconNames, 'check-bold'>;
+declare const TAG_NAME: "mdc-option";
+export { SELECTED_ICON_NAME, TAG_NAME };

package/dist/components/option/option.constants.js

@@ -0,0 +1,4 @@
+import utils from '../../utils/tag-name';
+const SELECTED_ICON_NAME = 'check-bold';
+const TAG_NAME = utils.constructTagName('option');
+export { SELECTED_ICON_NAME, TAG_NAME };

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

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

package/dist/components/option/option.styles.js

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+const styles = css `
+  :host::part(list-item) {
+    height: 2.25rem;
+  }
+  :host::part(default-slot) {
+    display: none; 
+  }
+`;
+export default [styles];

package/dist/components/popover/popover.component.js

@@ -578,11 +578,11 @@ class Popover extends FocusTrapMixin(Component) {
 }
 Popover.styles = [...Component.styles, ...styles];
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Popover.prototype, "id", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Popover.prototype, "triggerID", void 0);
 __decorate([