@momentum-design/components 0.22.1 → 0.22.3

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import Link from './components/link';
 import Toggle from './components/toggle';
 import Checkbox from './components/checkbox';
 import Radio from './components/radio';
+import Tab from './components/tab';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, Tab, };
 export type { TextType, };

package/dist/index.js

@@ -15,4 +15,5 @@ import Link from './components/link';
 import Toggle from './components/toggle';
 import Checkbox from './components/checkbox';
 import Radio from './components/radio';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, };
+import Tab from './components/tab';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, Tab, };

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

@@ -5,7 +5,6 @@ import Component from '../../components/buttonsimple';
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/buttonsimple/index.js

@@ -8,7 +8,6 @@ import { TAG_NAME } from '../../components/buttonsimple/buttonsimple.constants';
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -4,8 +4,8 @@ export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
-export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
+export { default as Checkbox } from './checkbox';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -15,6 +15,7 @@ export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
+export { default as Tab } from './tab';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';

package/dist/react/index.js

@@ -4,8 +4,8 @@ export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
-export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
+export { default as Checkbox } from './checkbox';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
@@ -15,6 +15,7 @@ export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
+export { default as Tab } from './tab';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';

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

@@ -0,0 +1,82 @@
+import Component from '../../components/tab';
+/**
+ * `mdc-tab` is Tab component to be used within the Tabgroup.
+ *
+ * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
+ *
+ * The `slot="badge"` can be used to add a badge to the tab.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-tab
+ *
+ * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
+ * @cssproperty --mdc-tab-height - Height of the tab.
+ * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
+ * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
+ * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
+ * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
+ * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
+ *  in hover state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
+ * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
+ * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
+ * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
+ * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
+ * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
+ *  in disabled state
+ * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
+ * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
+ * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
+ * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
+ * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
+ * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
+ * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
+ * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/tab/index.js

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab';
+import { TAG_NAME } from '../../components/tab/tab.constants';
+/**
+ * `mdc-tab` is Tab component to be used within the Tabgroup.
+ *
+ * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
+ *
+ * The `slot="badge"` can be used to add a badge to the tab.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-tab
+ *
+ * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
+ * @cssproperty --mdc-tab-height - Height of the tab.
+ * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
+ * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
+ * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
+ * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
+ * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
+ *  in hover state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
+ * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
+ * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
+ * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
+ * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
+ * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
+ *  in disabled state
+ * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
+ * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
+ * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
+ * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
+ * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
+ * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
+ * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
+ * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Tab',
+});
+export default reactWrapper;

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

@@ -1,5 +1,4 @@
 import type { AvatarSize } from '../../components/avatar/avatar.types';
-import type { IconNames } from '../../components/icon/icon.types';
 import type { PresenceType } from '../../components/presence/presence.types';
 import type { Component } from '../../models';
 import type { Constructor } from './index.types';
@@ -8,7 +7,6 @@ export interface AvatarComponentMixinInterface {
     initials?: string;
     presence?: PresenceType;
     size: AvatarSize;
-    iconName?: IconNames;
     counter?: number;
     isTyping: boolean;
 }

package/dist/utils/mixins/AvatarComponentMixin.js

@@ -49,10 +49,6 @@ export const AvatarComponentMixin = (superClass) => {
         property({ type: Number, reflect: true, attribute: 'size' }),
         __metadata("design:type", Number)
     ], InnerMixinClass.prototype, "size", void 0);
-    __decorate([
-        property({ type: String, attribute: 'icon-name' }),
-        __metadata("design:type", String)
-    ], InnerMixinClass.prototype, "iconName", void 0);
     __decorate([
         property({ type: Number }),
         __metadata("design:type", Number)

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

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+import type { IconNames } from '../../components/icon/icon.types';
+export interface IconNameMixinInterface {
+    iconName: IconNames;
+}
+export declare const IconNameMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<IconNameMixinInterface> & T;

package/dist/utils/mixins/IconNameMixin.js

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+export const IconNameMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+    }
+    __decorate([
+        property({ type: String, attribute: 'icon-name' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "iconName", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.22.1"
+  "version": "0.22.3"
 }