@momentum-design/components 0.16.9 → 0.16.11

package/dist/react/index.d.ts

@@ -1,12 +1,13 @@
 export { default as Avatar } from './avatar';
-export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
+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 Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as LabelAndHelper } from './labelandhelper';
 export { default as Marker } from './marker';
 export { default as Presence } from './presence';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -1,12 +1,13 @@
 export { default as Avatar } from './avatar';
-export { default as Badge } from './badge';
 export { default as AvatarButton } from './avatarbutton';
+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 Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as LabelAndHelper } from './labelandhelper';
 export { default as Marker } from './marker';
 export { default as Presence } from './presence';
 export { default as Text } from './text';

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

@@ -0,0 +1,11 @@
+import Component from '../../components/labelandhelper';
+/**
+ * labelandhelper is a component that contains the label and helper/validation text
+ *  that can be configured in various ways to suit different use cases (most of the input related components).
+ * It is used as an internal component and is not intended to be used directly by consumers.
+ *
+ * @tagname mdc-labelandhelper
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/labelandhelper/index.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/labelandhelper';
+import { TAG_NAME } from '../../components/labelandhelper/labelandhelper.constants';
+/**
+ * labelandhelper is a component that contains the label and helper/validation text
+ *  that can be configured in various ways to suit different use cases (most of the input related components).
+ * It is used as an internal component and is not intended to be used directly by consumers.
+ *
+ * @tagname mdc-labelandhelper
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'LabelAndHelper',
+});
+export default reactWrapper;

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

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface NameMixinInterface {
+    name: string;
+}
+export declare const NameMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<NameMixinInterface> & T;

package/dist/utils/mixins/{LabelMixin.js → NameMixin.js}

@@ -7,33 +7,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-export const LabelMixin = (superClass) => {
+export const NameMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
             /**
-             * The label of the input field. It is linked to the input field using the `for` attribute.
+             * Indicates the name of the component group (ex: checkbox, radio group).
+             * They are used to group elements in a form together.
+             * @default ''
              */
-            this.label = '';
-        }
-        /**
-         * creates the label element when the label property is set.
-         * id is used to link the label with the input field.
-         * @returns void
-         */
-        renderLabel() {
-            if (!this.label) {
-                return nothing;
-            }
-            return html `<label for="${this.id}" class='mdc-label'>${this.label}</label>`;
+            this.name = '';
         }
     }
     __decorate([
         property({ reflect: true, type: String }),
         __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "label", void 0);
+    ], InnerMixinClass.prototype, "name", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;
 };

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

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface ReadonlyMixinInterface {
+    readonly: boolean;
+}
+export declare const ReadonlyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ReadonlyMixinInterface> & T;

package/dist/utils/mixins/ReadonlyMixin.js

@@ -0,0 +1,29 @@
+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 ReadonlyMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Indicates whether the component is readonly.
+             * When the component is readonly, it is not editable.
+             * @default false
+             */
+            this.readonly = false;
+        }
+    }
+    __decorate([
+        property({ reflect: true, type: Boolean }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "readonly", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

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

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface RequiredMixinInterface {
+    required: boolean;
+}
+export declare const RequiredMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RequiredMixinInterface> & T;

package/dist/utils/mixins/RequiredMixin.js

@@ -0,0 +1,29 @@
+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 RequiredMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Indicates whether the component is required.
+             * When the component is required, it is a mandatory field.
+             * @default false
+             */
+            this.required = false;
+        }
+    }
+    __decorate([
+        property({ reflect: true, type: Boolean }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "required", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

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

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface ValueMixinInterface {
+    value: string;
+}
+export declare const ValueMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ValueMixinInterface> & T;

package/dist/utils/mixins/ValueMixin.js

@@ -0,0 +1,28 @@
+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 ValueMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
+             * @default ''
+             */
+            this.value = '';
+        }
+    }
+    __decorate([
+        property({ reflect: true, type: String }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "value", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -33,7 +33,8 @@
     "@momentum-design/fonts": "*",
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*",
-    "lit": "^3.2.0"
+    "lit": "^3.2.0",
+    "uuid": "^11.0.5"
   },
-  "version": "0.16.9"
+  "version": "0.16.11"
 }

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

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface LabelMixinInterface {
-    label: string;
-    renderLabel(): void;
-}
-export declare const LabelMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LabelMixinInterface> & T;