@momentum-design/components 0.23.0 → 0.23.2

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{