@momentum-design/components 0.32.0 → 0.33.0

package/dist/index.d.ts

@@ -24,8 +24,9 @@ import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
+import Textarea from './components/textarea';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, };
+export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, };
 export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -24,5 +24,6 @@ import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, };
+import Textarea from './components/textarea';
+export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Textarea, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Bullet } from './bullet';
+export { default as Badge } from './badge';
 export { default as Avatar } from './avatar';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
@@ -22,6 +22,7 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
+export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -1,7 +1,7 @@
-export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Bullet } from './bullet';
+export { default as Badge } from './badge';
 export { default as Avatar } from './avatar';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
@@ -22,6 +22,7 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
+export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
 export { default as VirtualizedList } from './virtualizedlist';

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

@@ -0,0 +1,61 @@
+import Component from '../../components/textarea';
+/**
+ * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onLimitExceeded: string;
+    undefined: string;
+    onInput: string;
+    onChange: string;
+    onFocus: string;
+    onBlur: string;
+}>;
+export default reactWrapper;

package/dist/react/textarea/index.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/textarea';
+import { TAG_NAME } from '../../components/textarea/textarea.constants';
+/**
+ * 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
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onLimitExceeded: 'limitexceeded',
+        undefined: 'undefined',
+        onInput: 'input',
+        onChange: 'change',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
+    displayName: 'Textarea',
+});
+export default reactWrapper;

package/dist/utils/mixins/FormInternalsMixin.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import type { Constructor } from './index.types';
 export interface AssociatedFormControl {
     autofocus: boolean;
-    disabled: boolean;
+    disabled?: boolean;
     name: string;
     value: string | string[];
     pattern?: string;
@@ -30,7 +30,7 @@ export interface FormInternalsMixinInterface {
     validationMessage: string;
     willValidate: boolean;
     internals: ElementInternals;
-    inputElement: HTMLInputElement;
+    inputElement: HTMLInputElement | HTMLTextAreaElement;
     setValidity(): void;
     checkValidity(): boolean;
     reportValidity(): boolean;

package/dist/utils/mixins/FormInternalsMixin.js

@@ -72,7 +72,7 @@ export const FormInternalsMixin = (superClass) => {
     ], InnerMixinClass.prototype, "validationMessage", void 0);
     __decorate([
         query('input'),
-        __metadata("design:type", HTMLInputElement)
+        __metadata("design:type", Object)
     ], InnerMixinClass.prototype, "inputElement", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.32.0"
+  "version": "0.33.0"
 }