@momentum-design/components 0.32.0 → 0.33.0

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

@@ -138,7 +138,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     setInputValidity() {
-        if (this.validationMessage && this.value === '') {
+        if (this.requiredLabel && this.validationMessage && this.value === '') {
             this.inputElement.setCustomValidity(this.validationMessage);
         }
         else {

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

@@ -175,6 +175,11 @@ declare class Popover extends Popover_base {
      * aria-describedby of the popover.
      */
     ariaDescribedby: string | null;
+    /**
+     * Disable aria-expanded attribute on trigger element.
+     * @default false
+     */
+    disableAriaExpanded: boolean;
     arrowElement: HTMLElement | null;
     /** @internal */
     triggerElement: HTMLElement | null;

package/dist/components/popover/popover.component.js

@@ -193,6 +193,11 @@ class Popover extends FocusTrapMixin(Component) {
          * aria-describedby of the popover.
          */
         this.ariaDescribedby = null;
+        /**
+         * Disable aria-expanded attribute on trigger element.
+         * @default false
+         */
+        this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
         this.arrowElement = null;
         /** @internal */
         this.triggerElement = null;
@@ -450,7 +455,9 @@ class Popover extends FocusTrapMixin(Component) {
             if (this.hideOnEscape) {
                 document.addEventListener('keydown', this.onEscapeKeydown);
             }
-            this.triggerElement.setAttribute('aria-expanded', 'true');
+            if (!this.disableAriaExpanded) {
+                this.triggerElement.setAttribute('aria-expanded', 'true');
+            }
             if (this.interactive) {
                 this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
             }
@@ -475,7 +482,9 @@ class Popover extends FocusTrapMixin(Component) {
                 document.removeEventListener('keydown', this.onEscapeKeydown);
             }
             (_b = this.deactivateFocusTrap) === null || _b === void 0 ? void 0 : _b.call(this);
-            this.triggerElement.removeAttribute('aria-expanded');
+            if (!this.disableAriaExpanded) {
+                this.triggerElement.removeAttribute('aria-expanded');
+            }
             if (this.interactive) {
                 this.triggerElement.removeAttribute('aria-haspopup');
             }
@@ -673,4 +682,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'aria-describedby' }),
     __metadata("design:type", Object)
 ], Popover.prototype, "ariaDescribedby", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "disableAriaExpanded", void 0);
 export default Popover;

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

@@ -44,5 +44,6 @@ declare const DEFAULTS: {
     readonly DELAY: "0,0";
     readonly ROLE: "dialog";
     readonly Z_INDEX: 1000;
+    readonly DISABLE_ARIA_EXPANDED: false;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -45,5 +45,6 @@ const DEFAULTS = {
     DELAY: '0,0',
     ROLE: 'dialog',
     Z_INDEX: 1000,
+    DISABLE_ARIA_EXPANDED: false,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

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

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,203 @@
+import { CSSResult, nothing, PropertyValueMap } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper';
+import type { AutoCapitalizeType } from '../input/input.types';
+import type { WrapType, AutoCompleteType } from './textarea.types';
+declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * 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
+ */
+declare class Textarea extends Textarea_base {
+    /**
+     * The placeholder text that is displayed when the textarea field is empty.
+     */
+    placeholder?: string;
+    /**
+     * readonly attribute of the textarea field. If true, the textarea field is read-only.
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * The rows attribute specifies the visible number of lines in a text area.
+     * @default 5
+     */
+    rows: number;
+    /**
+     * The cols attribute specifies the visible number of lines in a text area.
+     * @default 40
+     */
+    cols: number;
+    /**
+     * The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
+     * @default 'soft'
+     */
+    wrap: WrapType;
+    /**
+     * The autocapitalize attribute of the textarea field.
+     * @default 'off'
+     */
+    autocapitalize: AutoCapitalizeType;
+    /**
+     * The autocomplete attribute of the textarea field.
+     * @default 'off'
+     */
+    autocomplete: AutoCompleteType;
+    /**
+     * If true, the textarea 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 maximum number of characters that the textarea field can accept.
+     */
+    maxlength?: number;
+    /**
+     * 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.
+     */
+    maxCharacterLimit?: number;
+    /**
+   * @internal
+   * The textarea element
+   */
+    inputElement: HTMLTextAreaElement;
+    private characterLimitExceedingFired;
+    protected get textarea(): HTMLTextAreaElement;
+    constructor();
+    connectedCallback(): void;
+    private setTextareaValidity;
+    /** @internal */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
+    /**
+   * Handles the value change of the textarea field.
+   * Sets the form value and updates the validity of the textarea field.
+   * @returns void
+   */
+    handleValueChange(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+   * 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: string, old: string | null, value: string | null): void;
+    /**
+   * Dispatches the character overflow state change event.
+   * @returns void
+   */
+    private dispatchCharacterOverflowStateChangeEvent;
+    /**
+     * Handles the character overflow state change.
+     * Dispatches the character overflow state change event if the character limit is exceeded or restored.
+     * @returns void
+    */
+    private handleCharacterOverflowStateChange;
+    /**
+   * Updates the value of the textarea field.
+   * Sets the form value.
+   * @returns void
+   */
+    private updateValue;
+    /**
+   * 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.
+   */
+    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>;
+    static styles: Array<CSSResult>;
+}
+export default Textarea;