@momentum-design/components 0.23.1 → 0.23.3

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

@@ -17,6 +17,12 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
     label?: string;
+    /**
+     * The required label of the input field.
+     * When an appropriate string value is set,
+     * the input field is marked as required and the label is appended with this text.
+     */
+    requiredLabel?: string;
     /**
      * The unique id of the input field. It is used to link the input field with the label.
      * @default `mdc-input-${uuidv4()}`
@@ -36,6 +42,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @returns void
      */
     protected renderLabelElement(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderRequiredLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
      * creates the helpertext icon based on the helpTextType for validation.
      * If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -49,6 +49,20 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         }
         return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
     }
+    renderRequiredLabel() {
+        if (!this.requiredLabel) {
+            return nothing;
+        }
+        return html `
+      <mdc-text
+        part="required-label"
+        tagname=${MDC_TEXT_OPTIONS.TAGNAME}
+        type=${MDC_TEXT_OPTIONS.TYPE}
+      >
+        (${this.requiredLabel})
+      </mdc-text>
+    `;
+    }
     /**
      * creates the helpertext icon based on the helpTextType for validation.
      * If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.
@@ -90,6 +104,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     renderLabel() {
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
+      <slot name="required-label">${this.renderRequiredLabel()}</slot>
       <slot name="label-info"></slot>
     </div>`;
     }
@@ -109,6 +124,10 @@ __decorate([
     property({ reflect: true, type: String }),
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'required-label' }),
+    __metadata("design:type", String)
+], FormfieldWrapper.prototype, "requiredLabel", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -25,10 +25,14 @@ const styles = [
       display: flex;
       align-items: center;
       gap: 0.5rem;
+      width: 100%;
     }
 
     .mdc-label {
       color: var(--mds-color-theme-text-primary-normal);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .mdc-help-text {

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

@@ -44,11 +44,6 @@ declare class Input extends Input_base {
      * The placeholder text that is displayed when the input field is empty.
      */
     placeholder: string;
-    /**
-     * required attribute of the input field.
-     * If true, the consumer should indicate it on the label that the input field is required.
-     */
-    required: boolean;
     /**
      * readonly attribute of the input field. If true, the input field is read-only.
      */

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

@@ -71,11 +71,6 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
          * The placeholder text that is displayed when the input field is empty.
          */
         this.placeholder = '';
-        /**
-         * required attribute of the input field.
-         * If true, the consumer should indicate it on the label that the input field is required.
-         */
-        this.required = false;
         /**
          * readonly attribute of the input field. If true, the input field is read-only.
          */
@@ -316,7 +311,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             .value="${this.value}"
             ?disabled="${this.disabled}"
             ?readonly="${this.readonly}"
-            ?required="${this.required}"
+            ?required="${!!this.requiredLabel}"
             type="text"
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
@@ -347,10 +342,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], Input.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Input.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

package/dist/components/input/input.styles.js

@@ -60,6 +60,7 @@ const styles = [css `
     align-items: center;
     gap: 0.375rem;
     padding: 0.34375rem 0.375rem 0.34375rem 0.75rem;
+    min-width: 3.25rem;
   }
 
   .input-section{

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

@@ -1,5 +1,5 @@
-import { CSSResult } from 'lit';
-import { Variant } from './tab.types';
+import { CSSResult, PropertyValues } from 'lit';
+import type { Variant } from './tab.types';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
@@ -89,7 +89,7 @@ declare class Tab extends Tab_base {
      */
     text?: string;
     /**
-     * Tab can have two variants:
+     * Tab can have three variants:
      * - `glass`
      * - `line`
      * - `pill`
@@ -112,6 +112,14 @@ declare class Tab extends Tab_base {
      * @param active - The active state.
      */
     private modifyIconName;
+    /**
+     * Sets the variant attribute for the tab component.
+     * If the provided variant is not included in the TAB_VARIANTS,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    private setVariant;
     /**
      * Sets the aria-selected attribute based on the active state of the Tab.
      * If the tab is active, the filled version of the icon is displayed,
@@ -122,6 +130,7 @@ declare class Tab extends Tab_base {
      */
     protected setActive(element: HTMLElement, active: boolean): void;
     protected executeAction(): void;
+    update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/tab/tab.component.js

@@ -10,7 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './tab.styles';
-import { DEFAULTS } from './tab.constants';
+import { DEFAULTS, TAB_VARIANTS } from './tab.constants';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -98,7 +98,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
     constructor() {
         super();
         /**
-         * Tab can have two variants:
+         * Tab can have three variants:
          * - `glass`
          * - `line`
          * - `pill`
@@ -106,7 +106,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
          * It defines the background and foreground color of the tab.
          * @default pill
          */
-        this.variant = DEFAULTS.TAB_VARIANT;
+        this.variant = DEFAULTS.VARIANT;
         this.role = 'tab';
         this.softDisabled = undefined;
         this.size = undefined;
@@ -131,6 +131,16 @@ class Tab extends IconNameMixin(Buttonsimple) {
             }
         }
     }
+    /**
+     * Sets the variant attribute for the tab component.
+     * If the provided variant is not included in the TAB_VARIANTS,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    setVariant(variant) {
+        this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
+    }
     /**
      * Sets the aria-selected attribute based on the active state of the Tab.
      * If the tab is active, the filled version of the icon is displayed,
@@ -147,6 +157,12 @@ class Tab extends IconNameMixin(Buttonsimple) {
         // Toggle the active state of the tab.
         this.active = !this.active;
     }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+        }
+    }
     render() {
         return html `
       <div part="container">

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

@@ -5,6 +5,6 @@ declare const TAB_VARIANTS: {
     readonly PILL: "pill";
 };
 declare const DEFAULTS: {
-    readonly TAB_VARIANT: "pill";
+    readonly VARIANT: "pill";
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/components/tab/tab.constants.js

@@ -6,6 +6,6 @@ const TAB_VARIANTS = {
     PILL: 'pill',
 };
 const DEFAULTS = {
-    TAB_VARIANT: TAB_VARIANTS.PILL,
+    VARIANT: TAB_VARIANTS.PILL,
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/custom-elements.json

@@ -2234,6 +2234,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "id",
@@ -2274,6 +2288,15 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -2425,6 +2448,18 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "name": "id",
               "default": "`mdc-input-${uuidv4()}`",
@@ -2865,6 +2900,16 @@
               "attribute": "label",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "id",
@@ -2903,6 +2948,11 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -2972,6 +3022,14 @@
               "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
               "fieldName": "label"
             },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel"
+            },
             {
               "name": "id",
               "default": "`mdc-input-${uuidv4()}`",
@@ -3500,16 +3558,6 @@
               "description": "The placeholder text that is displayed when the input field is empty.",
               "attribute": "placeholder"
             },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
-              "attribute": "required"
-            },
             {
               "kind": "field",
               "name": "readonly",
@@ -3837,6 +3885,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "id",
@@ -3891,6 +3953,15 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -3969,15 +4040,6 @@
               "description": "The placeholder text that is displayed when the input field is empty.",
               "fieldName": "placeholder"
             },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
-              "fieldName": "required"
-            },
             {
               "name": "readonly",
               "type": {
@@ -4161,6 +4223,18 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "name": "id",
               "default": "`mdc-input-${uuidv4()}`",
@@ -5110,6 +5184,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "id",
@@ -5164,6 +5252,15 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -5315,6 +5412,18 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "name": "id",
               "default": "`mdc-input-${uuidv4()}`",
@@ -5621,7 +5730,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "Tab can have two variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
+              "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
               "default": "pill",
               "attribute": "variant",
               "reflects": true
@@ -5646,6 +5755,26 @@
               ],
               "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
             },
+            {
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "Variant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
+            },
             {
               "kind": "method",
               "name": "setActive",
@@ -5912,7 +6041,7 @@
               "type": {
                 "text": "Variant"
               },
-              "description": "Tab can have two variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
+              "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
               "default": "pill",
               "fieldName": "variant"
             },
@@ -6461,6 +6590,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "id",
@@ -6501,6 +6644,15 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -6652,6 +6804,18 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "name": "id",
               "default": "`mdc-input-${uuidv4()}`",

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.23.1"
+  "version": "0.23.3"
 }