@momentum-design/components 0.18.5 → 0.18.6

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

@@ -1,10 +1,10 @@
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
+    readonly DEFAULT: "default";
     readonly ERROR: "error";
-    readonly WARNING: "warning";
-    readonly SUCCESS: "success";
     readonly PRIORITY: "priority";
-    readonly DEFAULT: "default";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
 };
 declare const DEFAULTS: {
     readonly VALIDATION: "default";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -2,11 +2,11 @@ import utils from '../../utils/tag-name';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
 const VALIDATION = {
+    DEFAULT: 'default',
     ERROR: 'error',
-    WARNING: 'warning',
-    SUCCESS: 'success',
     PRIORITY: 'priority',
-    DEFAULT: 'default',
+    SUCCESS: 'success',
+    WARNING: 'warning',
 };
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,

package/dist/components/formfieldwrapper/formfieldwrapper.utils.js

@@ -1,10 +1,10 @@
 import { VALIDATION } from './formfieldwrapper.constants';
 const getHelperIcon = (type) => {
     const helperIconSizeMap = {
-        [VALIDATION.ERROR]: 'error-legacy-filled',
-        [VALIDATION.WARNING]: 'warning-filled',
-        [VALIDATION.SUCCESS]: 'check-circle-filled',
-        [VALIDATION.PRIORITY]: 'priority-circle-filled',
+        [VALIDATION.ERROR]: 'error-legacy-badge-filled',
+        [VALIDATION.WARNING]: 'warning-badge-filled',
+        [VALIDATION.SUCCESS]: 'check-circle-badge-filled',
+        [VALIDATION.PRIORITY]: 'priority-badge-filled',
         [VALIDATION.DEFAULT]: '',
     };
     return helperIconSizeMap[type] || '';

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

@@ -0,0 +1,10 @@
+import Input from './input.component';
+import '../button';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-input']: Input;
+    }
+}
+export default Input;

package/dist/components/input/index.js

@@ -0,0 +1,7 @@
+import Input from './input.component';
+import { TAG_NAME } from './input.constants';
+import '../button';
+import '../icon';
+import '../text';
+Input.register(TAG_NAME);
+export default Input;

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

@@ -0,0 +1,208 @@
+import { CSSResult, nothing, PropertyValueMap } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper';
+import type { IconNames } from '../icon/icon.types';
+import type { AutoCapitalizeType } from './input.types';
+declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & typeof FormfieldWrapper;
+/**
+ * mdc-input is a component that allows users to input text.
+ *  It contains:
+ * - label field - describe the input field.
+ * - input field - contains the value
+ * - help text or validation message - displayed below the input field.
+ * - trailing button - it displays a clear the input field.
+ * - prefix text - displayed before the input field.
+ * - leading icon - displayed before the input field.
+ * - clear-aria-label - aria label for the trailing button.
+ * - all the attributes of the input field.
+ *
+ * @tagname mdc-input
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
+ *
+ */
+declare class Input extends Input_base {
+    /**
+     * The placeholder text that is displayed when the input field is empty.
+     */
+    placeholder: string;
+    /**
+     * required attribute of the input field.
+     * If true, the consumer should indicate it on the label that the input field is required.
+     */
+    required: boolean;
+    /**
+     * readonly attribute of the input field. If true, the input field is read-only.
+     */
+    readonly: boolean;
+    /**
+     * The prefix text that is displayed before the input field. It has a max length of 10 characters.
+     * When the prefix text is set, make sure to set the 'data-aria-label'
+     * attribute with the appropriate value for accessibility.
+     */
+    prefixText?: string;
+    /**
+     * The leading icon that is displayed before the input field.
+     */
+    leadingIcon?: IconNames;
+    /**
+     * The trailing button when set to true, shows a clear button that clears the input field.
+     * @default false
+     */
+    trailingButton: boolean;
+    /**
+     * The maximum number of characters that the input field can accept.
+     */
+    maxlength?: number;
+    /**
+     * The minimum number of characters that the input field can accept.
+     */
+    minlength?: number;
+    /**
+     * The autocapitalize attribute of the input field.
+     * @default 'off'
+     */
+    autocapitalize: AutoCapitalizeType;
+    /**
+     * The autocomplete attribute of the input field.
+     * @default 'off'
+     */
+    autocomplete: any;
+    /**
+     * If true, the input field is focused when the component is rendered.
+     * @default false
+     */
+    autofocus: boolean;
+    /**
+     * Specifies the name of the directionality of text for submission purposes (e.g., "rtl" for right-to-left).
+     */
+    dirname?: string;
+    /**
+     * The pattern attribute of the input field.
+     * Specifies a regular expression that the input value must match for validation purposes.
+     */
+    pattern?: string;
+    /**
+     * The list attribute of the input field.
+     * Identifies a list of pre-defined options to suggest to the user.
+     */
+    list?: string;
+    /**
+     * The size attribute of the input field.
+     * Specifies the width of the input field.
+     * @default undefined
+     */
+    size?: number | undefined;
+    /**
+     * Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.
+     * @default ''
+     */
+    clearAriaLabel: string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+   * @internal
+   * The input element
+   */
+    private inputElement;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+   * Handles the value change of the input field.
+   * Sets the form value and updates the validity of the input field.
+   * @returns void
+   */
+    handleValueChange(): void;
+    /**
+   * This function is called when the attribute changes.
+   * It updates the validity of the input field based on the input field's validity.
+   *
+   * @param name - attribute name
+   * @param old - old value
+   * @param value - new value
+   */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+   * Sets the validity of the input field based on the input field's validity.
+   * @returns void
+   */
+    private setValidityFromInput;
+    /**
+   * Updates the value of the input field.
+   * Sets the form value.
+   * @returns void
+   */
+    private updateValue;
+    /**
+   * Handles the input event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   */
+    private onInput;
+    /**
+   * Handles the change event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   * 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
+   *
+   * @param event - Event which contains information about the value change.
+   */
+    private onChange;
+    /**
+   * Renders the leading icon before the input field.
+   * If the leading icon is not set, it will not be displayed.
+   *
+   * @returns void
+   */
+    protected renderLeadingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+   * Renders the prefix text before the input field.
+   * If the prefix text is more than 10 characters,
+   * - it will not be displayed.
+   * - the validation messsage will be displayed.
+   *
+   *  Note: We are setting aria-hidden so that the screen reader does not read the prefix text.
+   *  The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.
+   * @returns void
+   */
+    protected renderPrefixText(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+   * Clears the input field.
+   */
+    private clearInputText;
+    /**
+   * Renders the trailing button to clear the input field if the trailingButton is set to true.
+   * @returns void
+   */
+    protected renderTrailingButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Input;

package/dist/components/input/input.component.js

@@ -0,0 +1,401 @@
+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, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './input.styles';
+import FormfieldWrapper from '../formfieldwrapper';
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
+import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+/**
+ * mdc-input is a component that allows users to input text.
+ *  It contains:
+ * - label field - describe the input field.
+ * - input field - contains the value
+ * - help text or validation message - displayed below the input field.
+ * - trailing button - it displays a clear the input field.
+ * - prefix text - displayed before the input field.
+ * - leading icon - displayed before the input field.
+ * - clear-aria-label - aria label for the trailing button.
+ * - all the attributes of the input field.
+ *
+ * @tagname mdc-input
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
+ *
+ */
+class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper))) {
+    checkValidity() {
+        this.setValidityFromInput();
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        this.setValidityFromInput();
+        return this.internals.reportValidity();
+    }
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * The placeholder text that is displayed when the input field is empty.
+         */
+        this.placeholder = '';
+        /**
+         * required attribute of the input field.
+         * If true, the consumer should indicate it on the label that the input field is required.
+         */
+        this.required = false;
+        /**
+         * readonly attribute of the input field. If true, the input field is read-only.
+         */
+        this.readonly = false;
+        /**
+         * The trailing button when set to true, shows a clear button that clears the input field.
+         * @default false
+         */
+        this.trailingButton = false;
+        /**
+         * The autocapitalize attribute of the input field.
+         * @default 'off'
+         */
+        this.autocapitalize = AUTO_CAPITALIZE.OFF;
+        /**
+         * The autocomplete attribute of the input field.
+         * @default 'off'
+         */
+        this.autocomplete = 'off';
+        /**
+         * If true, the input field is focused when the component is rendered.
+         * @default false
+         */
+        this.autofocus = false;
+        /**
+         * Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.
+         * @default ''
+         */
+        this.clearAriaLabel = '';
+        /** @internal */
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            if (this.inputElement) {
+                this.inputElement.checkValidity();
+                this.setValidityFromInput();
+                this.internals.setFormValue(this.inputElement.value);
+            }
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.handleValueChange();
+        }
+    }
+    /**
+   * Handles the value change of the input field.
+   * Sets the form value and updates the validity of the input field.
+   * @returns void
+   */
+    handleValueChange() {
+        this.internals.setFormValue(this.value);
+        this.updateComplete.then(() => {
+            this.setValidityFromInput();
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    /**
+   * This function is called when the attribute changes.
+   * It updates the validity of the input field based on the input field's validity.
+   *
+   * @param name - attribute name
+   * @param old - old value
+   * @param value - new value
+   */
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        const validationRelatedAttributes = [
+            'maxlength',
+            'minlength',
+            'pattern',
+            'required',
+        ];
+        if (validationRelatedAttributes.includes(name)) {
+            this.updateComplete.then(() => {
+                this.setValidityFromInput();
+            }).catch((error) => {
+                if (this.onerror) {
+                    this.onerror(error);
+                }
+            });
+        }
+    }
+    /**
+   * Sets the validity of the input field based on the input field's validity.
+   * @returns void
+   */
+    setValidityFromInput() {
+        if (this.inputElement) {
+            this.internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage, this.inputElement);
+        }
+    }
+    /**
+   * Updates the value of the input field.
+   * Sets the form value.
+   * @returns void
+   */
+    updateValue() {
+        this.value = this.inputElement.value;
+        this.internals.setFormValue(this.inputElement.value);
+    }
+    /**
+   * Handles the input event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   */
+    onInput() {
+        this.updateValue();
+        this.setValidityFromInput();
+    }
+    /**
+   * Handles the change event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   * 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
+   *
+   * @param event - Event which contains information about the value change.
+   */
+    onChange(event) {
+        this.updateValue();
+        this.setValidityFromInput();
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
+    /**
+   * Renders the leading icon before the input field.
+   * If the leading icon is not set, it will not be displayed.
+   *
+   * @returns void
+   */
+    renderLeadingIcon() {
+        if (!this.leadingIcon) {
+            return nothing;
+        }
+        return html `
+      <mdc-icon 
+        class="leading-icon" 
+        part="leading-icon"
+        name=${this.leadingIcon} 
+        size="${DEFAULTS.ICON_SIZE_VALUE}" 
+        length-unit="${DEFAULTS.ICON_SIZE_UNIT}">
+      </mdc-icon>
+    `;
+    }
+    /**
+   * Renders the prefix text before the input field.
+   * If the prefix text is more than 10 characters,
+   * - it will not be displayed.
+   * - the validation messsage will be displayed.
+   *
+   *  Note: We are setting aria-hidden so that the screen reader does not read the prefix text.
+   *  The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.
+   * @returns void
+   */
+    renderPrefixText() {
+        if (!this.prefixText) {
+            return nothing;
+        }
+        return html `
+      <mdc-text 
+        class="prefix-text" 
+        tagname="${DEFAULTS.PREFIX_TEXT_TAG}" 
+        type="${DEFAULTS.PREFIX_TEXT_TYPE}"
+        aria-hidden="true"
+      >
+        ${this.prefixText.slice(0, PREFIX_TEXT_OPTIONS.MAX_LENGTH)}
+      </mdc-text>
+    `;
+    }
+    /**
+   * Clears the input field.
+   */
+    clearInputText() {
+        var _a;
+        this.value = '';
+        // focus the input field after clearing the text
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+   * Renders the trailing button to clear the input field if the trailingButton is set to true.
+   * @returns void
+   */
+    renderTrailingButton() {
+        if (!this.trailingButton) {
+            return nothing;
+        }
+        return html `
+      <mdc-button 
+        class='${!this.value ? 'hidden' : ''}'
+        prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
+        variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
+        size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
+        aria-label="${this.clearAriaLabel}"
+        @click=${this.clearInputText}
+        ?disabled=${this.disabled || this.readonly || !this.value}
+      ></mdc-button>
+    `;
+    }
+    render() {
+        var _a;
+        return html `
+      ${this.renderLabel()}
+      <div class="input-container mdc-focus-ring" part="input-container">
+        <slot name="input-leading-icon">${this.renderLeadingIcon()}</slot>
+       <div class="input-section" part="input-section">
+       <slot name="input-prefix-text">${this.renderPrefixText()}</slot>
+        <slot name="input">
+          <input 
+            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+            class='input'
+            part='input'
+            id="${this.id}"
+            name="${this.name}"
+            .value="${this.value}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            ?required="${this.required}"
+            type="text"
+            placeholder=${ifDefined(this.placeholder)}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            autocapitalize=${this.autocapitalize}
+            autocomplete=${this.autocomplete}
+            ?autofocus="${this.autofocus}"
+            dirname=${ifDefined(this.dirname)}
+            pattern=${ifDefined(this.pattern)}
+            list=${ifDefined(this.list)}
+            size=${ifDefined(this.size)}
+            @input=${this.onInput}
+            @change=${this.onChange}
+          />
+        </slot>
+       </div>
+        <slot name="trailing-button">${this.renderTrailingButton()}</slot>
+      </div>
+      ${this.helpText ? this.renderHelperText() : nothing}
+    `;
+    }
+}
+/** @internal */
+Input.formAssociated = true;
+Input.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Input.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Input.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Input.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefix-text' }),
+    __metadata("design:type", String)
+], Input.prototype, "prefixText", void 0);
+__decorate([
+    property({ type: String, attribute: 'leading-icon' }),
+    __metadata("design:type", String)
+], Input.prototype, "leadingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'trailing-button' }),
+    __metadata("design:type", Object)
+], Input.prototype, "trailingButton", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Input.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Input.prototype, "minlength", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Input.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Input.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Input.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Input.prototype, "dirname", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Input.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Input.prototype, "list", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Input.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'clear-aria-label' }),
+    __metadata("design:type", Object)
+], Input.prototype, "clearAriaLabel", void 0);
+__decorate([
+    query('input'),
+    __metadata("design:type", HTMLInputElement)
+], Input.prototype, "inputElement", void 0);
+export default Input;