@momentum-design/components 0.28.8 → 0.28.10

package/dist/index.d.ts

@@ -1,29 +1,31 @@
-import ThemeProvider from './components/themeprovider';
-import Icon from './components/icon';
-import IconProvider from './components/iconprovider';
 import Avatar from './components/avatar';
+import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
-import Presence from './components/presence';
-import Text from './components/text';
-import Button from './components/button';
-import Popover from './components/popover';
 import Bullet from './components/bullet';
-import Marker from './components/marker';
+import Button from './components/button';
+import Checkbox from './components/checkbox';
 import Divider from './components/divider';
-import AvatarButton from './components/avatarbutton';
+import FormfieldGroup from './components/formfieldgroup';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import Link from './components/link';
-import Toggle from './components/toggle';
-import Checkbox from './components/checkbox';
+import List from './components/list';
+import ListItem from './components/listitem';
+import Marker from './components/marker';
+import Popover from './components/popover';
+import Presence from './components/presence';
 import Radio from './components/radio';
-import VirtualizedList from './components/virtualizedlist';
+import RadioGroup from './components/radiogroup';
+import Spinner from './components/spinner';
 import Tab from './components/tab';
-import FormfieldGroup from './components/formfieldgroup';
+import Text from './components/text';
+import ThemeProvider from './components/themeprovider';
+import Toggle from './components/toggle';
+import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-import Spinner from './components/spinner';
-import RadioGroup from './components/radiogroup';
-import type { TextType } from './components/text/text.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Popover, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
+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 type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -1,26 +1,28 @@
-import ThemeProvider from './components/themeprovider';
-import Icon from './components/icon';
-import IconProvider from './components/iconprovider';
 import Avatar from './components/avatar';
+import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
-import Presence from './components/presence';
-import Text from './components/text';
-import Button from './components/button';
-import Popover from './components/popover';
 import Bullet from './components/bullet';
-import Marker from './components/marker';
+import Button from './components/button';
+import Checkbox from './components/checkbox';
 import Divider from './components/divider';
-import AvatarButton from './components/avatarbutton';
+import FormfieldGroup from './components/formfieldgroup';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import Link from './components/link';
-import Toggle from './components/toggle';
-import Checkbox from './components/checkbox';
+import List from './components/list';
+import ListItem from './components/listitem';
+import Marker from './components/marker';
+import Popover from './components/popover';
+import Presence from './components/presence';
 import Radio from './components/radio';
-import VirtualizedList from './components/virtualizedlist';
+import RadioGroup from './components/radiogroup';
+import Spinner from './components/spinner';
 import Tab from './components/tab';
-import FormfieldGroup from './components/formfieldgroup';
+import Text from './components/text';
+import ThemeProvider from './components/themeprovider';
+import Toggle from './components/toggle';
+import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-import Spinner from './components/spinner';
-import RadioGroup from './components/radiogroup';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Popover, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
+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 { inMemoryCache, webAPIIconsCache };

package/dist/react/index.d.ts

@@ -12,6 +12,8 @@ export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
+export { default as List } from './list';
+export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Popover } from './popover';

package/dist/react/index.js

@@ -12,6 +12,8 @@ export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
+export { default as List } from './list';
+export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Popover } from './popover';

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

@@ -0,0 +1,12 @@
+import Component from '../../components/list';
+/**
+ * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
+ *
+ * @tagname mdc-list
+ *
+ * @dependency mdc-text
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/list/index.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/list';
+import { TAG_NAME } from '../../components/list/list.constants';
+/**
+ * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
+ *
+ * @tagname mdc-list
+ *
+ * @dependency mdc-text
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'List',
+});
+export default reactWrapper;

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

@@ -0,0 +1,34 @@
+import Component from '../../components/listitem';
+/**
+ * mdc-listitem component is used to display a label with different types of controls.
+ * There can be three types of controls, a radio button, a checkbox on the
+ * leading side and a toggle on the trailing side.
+ * The list item can contain an avatar on the leading side and a badge on the trailing side.
+ * Additionally, the list item can contain a side header and a subline text.
+ *
+ * The leading and trailing slots can be used to display controls and text. <br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
+ * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
+ *
+ * @tagname mdc-listitem
+ *
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - slot for list item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for list item primary label.
+ * @slot leading-text-secondary-label - slot for list item secondary label.
+ * @slot leading-text-tertiary-label - slot for list item tertiary label.
+ * @slot trailing-text-side-header - slot for list item side header text.
+ * @slot trailing-text-subline - slot for list item subline text.
+ * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ *
+ * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.
+ * @cssproperty --mdc-listitem-primary-label-color
+ *  - Allows customization of the primary label, side header and subline text slot color.
+ * @cssproperty --mdc-listitem-secondary-label-color
+ *  - Allows customization of the secondary and teritary label text slot color.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/listitem/index.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/listitem';
+import { TAG_NAME } from '../../components/listitem/listitem.constants';
+/**
+ * mdc-listitem component is used to display a label with different types of controls.
+ * There can be three types of controls, a radio button, a checkbox on the
+ * leading side and a toggle on the trailing side.
+ * The list item can contain an avatar on the leading side and a badge on the trailing side.
+ * Additionally, the list item can contain a side header and a subline text.
+ *
+ * The leading and trailing slots can be used to display controls and text. <br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
+ * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
+ *
+ * @tagname mdc-listitem
+ *
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - slot for list item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for list item primary label.
+ * @slot leading-text-secondary-label - slot for list item secondary label.
+ * @slot leading-text-tertiary-label - slot for list item tertiary label.
+ * @slot trailing-text-side-header - slot for list item side header text.
+ * @slot trailing-text-subline - slot for list item subline text.
+ * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ *
+ * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.
+ * @cssproperty --mdc-listitem-primary-label-color
+ *  - Allows customization of the primary label, side header and subline text slot color.
+ * @cssproperty --mdc-listitem-secondary-label-color
+ *  - Allows customization of the secondary and teritary label text slot color.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'ListItem',
+});
+export default reactWrapper;

package/dist/utils/mixins/FormInternalsMixin.js

@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property, query } from 'lit/decorators.js';
-import { v4 as uuidv4 } from 'uuid';
 export const FormInternalsMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         /** @internal */
@@ -36,7 +35,6 @@ export const FormInternalsMixin = (superClass) => {
             this.value = '';
             /** @internal */
             this.internals = this.attachInternals();
-            this.id = `mdc-input-${uuidv4()}`;
         }
         /**
        * Sets the validity of the input field based on the input field's validity.

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.8"
+  "version": "0.28.10"
 }