@momentum-design/components 0.37.0 → 0.37.2

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

@@ -11,8 +11,6 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * - 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.
@@ -106,16 +104,6 @@ declare class Textarea extends Textarea_base {
      * The minimum number of characters that the textarea field can accept.
      */
     minlength?: number;
-    /**
-     * The clear button when set to true, shows a clear button that clears the textarea field.
-     * @default false
-     */
-    clearButton: boolean;
-    /**
-     * Aria label for the clear button. If clear button is set to true, this label is used for the clear button.
-     * @default ''
-     */
-    clearAriaLabel: string;
     /**
      * maximum character limit for the textarea field for character counter.
      */
@@ -178,23 +166,6 @@ declare class Textarea extends Textarea_base {
    * @param event - Event which contains information about the value change.
    */
     private onChange;
-    /**
-     *  Handles the keydown event of the textarea field.
-     * Clears the textarea field when the 'Enter' key is pressed.
-     * @param event - Keyboard event
-     * @returns void
-    */
-    private handleKeyDown;
-    /**
-      * Clears the textarea field.
-      * @returns void
-    */
-    private clearInputText;
-    /**
-   * Renders the clear button to clear the textarea field if the clearButton is set to true.
-   * @returns void
-   */
-    protected renderClearButton(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderCharacterCounter(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderTextareaFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -25,8 +25,6 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * - 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.
@@ -110,16 +108,6 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          * @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;
@@ -266,48 +254,6 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         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;
@@ -362,7 +308,6 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
         ></textarea>
-        ${this.renderClearButton()}
         </div>
         ${this.renderTextareaFooter()}
         `;
@@ -413,14 +358,6 @@ __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)

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

@@ -8,11 +8,6 @@ declare const AUTO_COMPLETE: {
     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;

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

@@ -1,8 +1,6 @@
 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',
@@ -12,11 +10,6 @@ const AUTO_COMPLETE = {
     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,

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

@@ -55,13 +55,16 @@ const styles = [css `
 
   :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(:dir(rtl))::part(textarea-container){
+    padding: 0.375rem 0.75rem 0.25rem 0.25rem;
+  }
+
   :host(:not([disabled]))::part(textarea-container):hover{
     background-color: var(--mdc-textarea-hover-background-color);
   }

package/dist/custom-elements.json

@@ -13489,7 +13489,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- clear-button: A boolean value when marked to true represents a button that can\n  clear the text value within the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
           "name": "Textarea",
           "cssProperties": [
             {
@@ -13650,26 +13650,6 @@
               "description": "The minimum number of characters that the textarea field can accept.",
               "attribute": "minlength"
             },
-            {
-              "kind": "field",
-              "name": "clearButton",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The clear button when set to true, shows a clear button that clears the textarea field.",
-              "attribute": "clear-button"
-            },
-            {
-              "kind": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the clear button. If clear button is set to true, this label is used for the clear button.",
-              "attribute": "clear-aria-label"
-            },
             {
               "kind": "field",
               "name": "maxCharacterLimit",
@@ -13760,48 +13740,6 @@
               ],
               "description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "Keyboard event"
-                }
-              ],
-              "description": "Handles the keydown event of the textarea field.\nClears the textarea field when the 'Enter' key is pressed.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "clearInputText",
-              "privacy": "private",
-              "description": "Clears the textarea field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderClearButton",
-              "privacy": "protected",
-              "description": "Renders the clear button to clear the textarea field if the clearButton is set to true.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "renderCharacterCounter",
@@ -14227,24 +14165,6 @@
               "description": "The minimum number of characters that the textarea field can accept.",
               "fieldName": "minlength"
             },
-            {
-              "name": "clear-button",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The clear button when set to true, shows a clear button that clears the textarea field.",
-              "fieldName": "clearButton"
-            },
-            {
-              "name": "clear-aria-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the clear button. If clear button is set to true, this label is used for the clear button.",
-              "fieldName": "clearAriaLabel"
-            },
             {
               "name": "max-character-limit",
               "type": {
@@ -14394,7 +14314,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - clear-button: A boolean value when marked to true represents a button that can\n *   clear the text value within the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
           "customElement": true,
           "slots": [
             {

package/dist/react/textarea/index.d.ts

@@ -7,8 +7,6 @@ import Component from '../../components/textarea';
  * - 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.

package/dist/react/textarea/index.js

@@ -10,8 +10,6 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * - 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.

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.37.0"
+  "version": "0.37.2"
 }