@momentum-design/components 0.37.1 → 0.37.3

package/dist/components/avatar/avatar.component.js

@@ -69,7 +69,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
      */
     getPresenceTemplateBasedOnType(type) {
         // avatar type of counter should not have presence
-        if (type === AVATAR_TYPE.COUNTER && (this.counter || this.counter === 0)) {
+        if ((type === AVATAR_TYPE.COUNTER && (this.counter || this.counter === 0)) || this.isTyping) {
             return nothing;
         }
         if (this.presence) {

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);
   }