@momentum-design/components 0.36.1 → 0.36.3

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];