@momentum-design/components 0.32.0 → 0.33.0

package/dist/components/textarea/textarea.component.js

@@ -0,0 +1,432 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import styles from './textarea.styles';
+import FormfieldWrapper from '../formfieldwrapper';
+import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
+import { AUTO_CAPITALIZE } from '../input/input.constants';
+import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+/**
+ * mdc-textarea component, which is used to get the multi-line text input from the user.
+ * It contains:
+ * - label: It is the title of the textarea field.
+ * - required-label: A string depicting that the textarea field is required.
+ * - Textarea: It is the multi-line text input field.
+ * - helper-text: It is the text that provides additional information about the textarea field.
+ * - max-character-limit: It is the text that shows the character count of the textarea field.
+ * - clear-button: A boolean value when marked to true represents a button that can
+ *   clear the text value within the textarea field.
+ * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information
+ *   about the textarea field based on the validation state.
+ * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.
+ *   This event exposes 3 properties:
+ *   - currentCharacterCount - the current number of characters in the textarea field,
+ *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,
+ *   - value - the current value of the textarea field,
+ *
+ * **Note**: Consumers must set the help-text-type with 'error' and
+ * help-text attribute with the error message using limitexceeded event.
+ * The same help-text value will be used for the validation message to be displayed.
+ *
+ * @tagname mdc-textarea
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.
+ * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
+ * exceeds or restored.
+ *
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
+ * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled
+ * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled
+ * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
+ * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
+ * @cssproperty --mdc-textarea-border-color - Border color for the textarea field
+ * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
+ * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
+ * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
+ * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
+ * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
+ * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
+ * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
+ * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
+ */
+class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+    get textarea() {
+        return this.inputElement;
+    }
+    constructor() {
+        var _a;
+        super();
+        /**
+         * readonly attribute of the textarea field. If true, the textarea field is read-only.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * The rows attribute specifies the visible number of lines in a text area.
+         * @default 5
+         */
+        this.rows = DEFAULTS.ROWS;
+        /**
+         * The cols attribute specifies the visible number of lines in a text area.
+         * @default 40
+         */
+        this.cols = DEFAULTS.COLS;
+        /**
+         * The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
+         * @default 'soft'
+         */
+        this.wrap = WRAP.SOFT;
+        /**
+         * The autocapitalize attribute of the textarea field.
+         * @default 'off'
+         */
+        this.autocapitalize = AUTO_CAPITALIZE.OFF;
+        /**
+         * The autocomplete attribute of the textarea field.
+         * @default 'off'
+         */
+        this.autocomplete = AUTO_COMPLETE.OFF;
+        /**
+         * If true, the textarea field is focused when the component is rendered.
+         * @default false
+         */
+        this.autofocus = false;
+        /**
+         * The clear button when set to true, shows a clear button that clears the textarea field.
+         * @default false
+         */
+        this.clearButton = false;
+        /**
+         * Aria label for the clear button. If clear button is set to true, this label is used for the clear button.
+         * @default ''
+         */
+        this.clearAriaLabel = '';
+        this.characterLimitExceedingFired = false;
+        // Set the default value to the textarea field if the value is set through the text content directly
+        this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            if (this.textarea) {
+                this.textarea.checkValidity();
+                this.setTextareaValidity();
+                this.internals.setFormValue(this.textarea.value);
+            }
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    setTextareaValidity() {
+        if (this.requiredLabel && this.validationMessage && this.value === '') {
+            this.textarea.setCustomValidity(this.validationMessage);
+        }
+        else if (this.maxCharacterLimit
+            && this.value.length > this.maxCharacterLimit
+            && this.helpTextType === VALIDATION.ERROR
+            && this.helpText) {
+            // Set custom validity if the character limit is exceeded to stop form submission
+            // helptext and helptexttype will be set by the consumers.
+            this.textarea.setCustomValidity(this.helpText);
+        }
+        else {
+            this.textarea.setCustomValidity('');
+        }
+        this.setValidity();
+    }
+    /** @internal */
+    formResetCallback() {
+        this.value = '';
+        this.requestUpdate();
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    /**
+   * Handles the value change of the textarea field.
+   * Sets the form value and updates the validity of the textarea field.
+   * @returns void
+   */
+    handleValueChange() {
+        this.updateComplete.then(() => {
+            this.setTextareaValidity();
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.handleValueChange();
+            this.handleCharacterOverflowStateChange();
+        }
+    }
+    /**
+   * This function is called when the attribute changes.
+   * It updates the validity of the textarea field based on the textarea 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',
+            'required',
+        ];
+        if (validationRelatedAttributes.includes(name)) {
+            this.updateComplete.then(() => {
+                this.setTextareaValidity();
+            }).catch((error) => {
+                if (this.onerror) {
+                    this.onerror(error);
+                }
+            });
+        }
+    }
+    /**
+   * Dispatches the character overflow state change event.
+   * @returns void
+   */
+    dispatchCharacterOverflowStateChangeEvent() {
+        this.dispatchEvent(new CustomEvent('limitexceeded', {
+            detail: {
+                currentCharacterCount: this.value.length,
+                maxCharacterLimit: this.maxCharacterLimit,
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Handles the character overflow state change.
+     * Dispatches the character overflow state change event if the character limit is exceeded or restored.
+     * @returns void
+    */
+    handleCharacterOverflowStateChange() {
+        if (this.maxCharacterLimit) {
+            if (this.value.length > this.maxCharacterLimit && !this.characterLimitExceedingFired) {
+                this.dispatchCharacterOverflowStateChangeEvent();
+                this.characterLimitExceedingFired = true;
+            }
+            else if (this.value.length <= this.maxCharacterLimit && this.characterLimitExceedingFired) {
+                this.dispatchCharacterOverflowStateChangeEvent();
+                this.characterLimitExceedingFired = false;
+            }
+        }
+    }
+    /**
+   * Updates the value of the textarea field.
+   * Sets the form value.
+   * @returns void
+   */
+    updateValue() {
+        this.value = this.textarea.value;
+        this.internals.setFormValue(this.textarea.value);
+    }
+    /**
+   * Handles the change event of the textarea field.
+   * Updates the value and sets the validity of the textarea 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();
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
+    /**
+     *  Handles the keydown event of the textarea field.
+     * Clears the textarea field when the 'Enter' key is pressed.
+     * @param event - Keyboard event
+     * @returns void
+    */
+    handleKeyDown(event) {
+        if (['Enter'].includes(event.key)) {
+            event.preventDefault();
+            this.clearInputText();
+        }
+    }
+    /**
+      * Clears the textarea field.
+      * @returns void
+    */
+    clearInputText() {
+        this.value = '';
+        this.textarea.focus();
+    }
+    /**
+   * Renders the clear button to clear the textarea field if the clearButton is set to true.
+   * @returns void
+   */
+    renderClearButton() {
+        if (!this.clearButton) {
+            return nothing;
+        }
+        return html `
+        <mdc-button
+          part='clear-button'
+          class='own-focus-ring ${!this.value ? 'hidden' : ''}'
+          prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
+          variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
+          size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
+          aria-label="${this.clearAriaLabel}"
+          ?disabled=${this.disabled || this.readonly || !this.value}
+          @click=${this.clearInputText}
+          @keydown=${this.handleKeyDown}
+        ></mdc-button>
+      `;
+    }
+    renderCharacterCounter() {
+        if (!this.maxCharacterLimit) {
+            return nothing;
+        }
+        return html `
+      <mdc-text
+        part="character-counter"
+        tagname="span"
+        type=${DEFAULTS.CHARACTER_COUNTER_TYPE}
+      >
+      ${this.value.length < 10 ? `0${this.value.length}` : this.value.length}/${this.maxCharacterLimit}
+      </mdc-text>
+    `;
+    }
+    renderTextareaFooter() {
+        if (!this.helpText && !this.maxCharacterLimit) {
+            return nothing;
+        }
+        return html `
+        <div part="textarea-footer">
+          ${this.renderHelperText()}
+          ${this.renderCharacterCounter()}
+        </div>
+      `;
+    }
+    render() {
+        var _a;
+        return html `
+      ${this.renderLabel()}
+      <div class="textarea-container mdc-focus-ring" part="textarea-container">
+        <textarea
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          part='textarea'
+          id="${this.id}"
+          name="${this.name}"
+          .value="${this.value}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          ?required="${!!this.requiredLabel}"
+          placeholder=${ifDefined(this.placeholder)}
+          rows=${ifDefined(this.rows)}
+          cols=${ifDefined(this.cols)}
+          wrap=${ifDefined(this.wrap)}
+          ?autofocus="${this.autofocus}"
+          autocapitalize=${this.autocapitalize}
+          autocomplete=${this.autocomplete}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          dirname=${ifDefined(this.dirname)}
+          @input=${this.updateValue}
+          @change=${this.onChange}
+          aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+          aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
+        ></textarea>
+        ${this.renderClearButton()}
+        </div>
+        ${this.renderTextareaFooter()}
+        `;
+    }
+}
+Textarea.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Textarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Textarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Textarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Textarea.prototype, "cols", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Textarea.prototype, "wrap", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Textarea.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Textarea.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Textarea.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Textarea.prototype, "dirname", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Textarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Textarea.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'clear-button' }),
+    __metadata("design:type", Object)
+], Textarea.prototype, "clearButton", void 0);
+__decorate([
+    property({ type: String, attribute: 'clear-aria-label' }),
+    __metadata("design:type", Object)
+], Textarea.prototype, "clearAriaLabel", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-character-limit' }),
+    __metadata("design:type", Number)
+], Textarea.prototype, "maxCharacterLimit", void 0);
+__decorate([
+    query('textarea'),
+    __metadata("design:type", HTMLTextAreaElement)
+], Textarea.prototype, "inputElement", void 0);
+export default Textarea;

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

@@ -0,0 +1,21 @@
+declare const TAG_NAME: "mdc-textarea";
+declare const WRAP: {
+    readonly HARD: "hard";
+    readonly SOFT: "soft";
+};
+declare const AUTO_COMPLETE: {
+    readonly OFF: "off";
+    readonly ON: "on";
+};
+declare const DEFAULTS: {
+    ICON_SIZE_VALUE: number;
+    ICON_SIZE_UNIT: string;
+    CLEAR_BUTTON_ICON: "cancel-bold";
+    CLEAR_BUTTON_VARIANT: "tertiary";
+    CLEAR_BUTTON_SIZE: 20;
+    CHARACTER_COUNTER_TYPE: "body-midsize-regular";
+    ROWS: number;
+    COLS: number;
+    WRAP: "soft";
+};
+export { TAG_NAME, WRAP, AUTO_COMPLETE, DEFAULTS };

package/dist/components/textarea/textarea.constants.js

@@ -0,0 +1,25 @@
+import utils from '../../utils/tag-name';
+import { TYPE as FONT_TYPE } from '../text/text.constants';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
+const TAG_NAME = utils.constructTagName('textarea');
+const CLEAR_BUTTON_ICON = 'cancel-bold';
+const WRAP = {
+    HARD: 'hard',
+    SOFT: 'soft',
+};
+const AUTO_COMPLETE = {
+    OFF: 'off',
+    ON: 'on',
+};
+const DEFAULTS = {
+    ICON_SIZE_VALUE: 1,
+    ICON_SIZE_UNIT: 'rem',
+    CLEAR_BUTTON_ICON,
+    CLEAR_BUTTON_VARIANT: BUTTON_VARIANTS.TERTIARY,
+    CLEAR_BUTTON_SIZE: ICON_BUTTON_SIZES[20],
+    CHARACTER_COUNTER_TYPE: FONT_TYPE.BODY_MIDSIZE_REGULAR,
+    ROWS: 5,
+    COLS: 40,
+    WRAP: WRAP.SOFT,
+};
+export { TAG_NAME, WRAP, AUTO_COMPLETE, DEFAULTS };

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

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

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = [css `
+  :host {
+    --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-textarea-text-secondary-normal : var(--mds-color-theme-text-secondary-normal);
+    --mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-active);
+    --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
+    --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
+    --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
+  }
+
+  :host([disabled])::part(textarea),
+  :host([disabled])::part(textarea)::placeholder{
+    color: var(--mdc-input-disabled-text-color);
+  }
+
+  :host([disabled])::part(textarea),
+  :host([readonly])::part(textarea){
+    border-color: var(--mdc-textarea-disabled-border-color);
+    background: var(--mdc-textarea-disabled-background-color);
+  }
+
+  :host([disabled][help-text-type="default"])::part(textarea-container),
+  :host([disabled][help-text-type="success"])::part(textarea-container),
+  :host([disabled][help-text-type="warning"])::part(textarea-container),
+  :host([disabled][help-text-type="error"])::part(textarea-container),
+  :host([disabled][help-text-type="priority"])::part(textarea-container){
+    border-color: var(--mdc-textarea-disabled-border-color);
+  }
+
+  :host::part(textarea){
+    min-height: 6.25rem;
+    color: var(--mdc-textarea-text-color);
+    font-family: inherit;
+    font-size: var(--mdc-textarea-text-font-size);
+    line-height: var(--mdc-textarea-text-line-height);
+    background-color: var(--mdc-textarea-background-color);
+    resize: none;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+
+  :host::part(textarea-container) {
+    display: flex;
+    gap: 0.5rem;
+    border-radius: 0.5rem;
+    border: 0.0625rem solid var(--mdc-textarea-border-color);
+    overflow: hidden;
+    padding: 0.375rem 0.25rem 0.25rem 0.75rem;
+  }
+
+  :host(:not([disabled]))::part(textarea-container):hover{
+    background-color: var(--mdc-textarea-hover-background-color);
+  }
+
+  :host(:not([disabled]))::part(textarea-container):active, 
+  :host(:not([disabled]))::part(textarea-container):focus-within{
+    background-color: var(--mdc-textarea-focused-background-color);
+    border-color:  var(--mdc-textarea-focused-border-color);
+  }
+
+  :host::part(textarea-footer) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .textarea::placeholder{
+    color: var(--mdc-textarea-text-secondary-normal);
+  }
+
+  :host::part(character-counter){
+    margin-left: auto;
+    color: var(--mdc-textarea-text-secondary-normal);
+  }
+
+  :host([help-text-type="error"])::part(character-counter) {
+    color: var(--mdc-textarea-error-border-color);
+  }
+
+  :host([disabled])::part(character-counter){
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+
+  :host([help-text-type="error"])::part(textarea-container),
+  :host([help-text-type="error"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-error-border-color);
+  }
+  :host([help-text-type="warning"])::part(textarea-container),
+  :host([help-text-type="warning"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-warning-border-color);
+  }
+  :host([help-text-type="success"])::part(textarea-container),
+  :host([help-text-type="success"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-success-border-color);
+  }
+  :host([help-text-type="priority"])::part(textarea-container),
+  :host([help-text-type="priority"])::part(textarea-container):focus-within {
+    border-color: var(--mdc-textarea-primary-border-color);
+  }
+
+  .hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+`, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { AUTO_COMPLETE, WRAP } from './textarea.constants';
+type WrapType = ValueOf<typeof WRAP>;
+type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
+export { WrapType, AutoCompleteType };

package/dist/components/textarea/textarea.types.js

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