@momentum-design/components 0.18.1 → 0.18.2

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

@@ -1,6 +1,7 @@
 import { CSSResult, nothing } from 'lit';
 import { Component } from '../../models';
 import type { ValidationType } from './formfieldwrapper.types';
+declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * formfieldwrapper 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).
@@ -11,7 +12,7 @@ import type { ValidationType } from './formfieldwrapper.types';
  * @slot label-info - slot to add the label info icon
  *
  */
-declare class FormfieldWrapper extends Component {
+declare class FormfieldWrapper extends FormfieldWrapper_base {
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
@@ -57,7 +58,6 @@ declare class FormfieldWrapper extends Component {
      * @returns void
      */
     protected renderHelperText(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default FormfieldWrapper;

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

@@ -14,6 +14,7 @@ import styles from './formfieldwrapper.styles';
 import { Component } from '../../models';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
 import { getHelperIcon } from './formfieldwrapper.utils';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * formfieldwrapper 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).
@@ -24,7 +25,7 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @slot label-info - slot to add the label info icon
  *
  */
-class FormfieldWrapper extends Component {
+class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -46,7 +47,7 @@ class FormfieldWrapper extends Component {
         if (!this.label) {
             return nothing;
         }
-        return html `<label for="${this.id}" class="mdc-label" part="mdc-label">${this.label}</label>`;
+        return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
     }
     /**
      * creates the helpertext icon based on the helpTextType for validation.
@@ -58,8 +59,8 @@ class FormfieldWrapper extends Component {
             return nothing;
         }
         const helperIcon = getHelperIcon(this.helpTextType || DEFAULTS.VALIDATION);
-        if (helperIcon) {
-            return html `<mdc-icon part="mdc-helper-icon" size="1" length-unit="rem" name=${helperIcon}></mdc-icon>`;
+        if (helperIcon && !this.disabled) {
+            return html `<mdc-icon part="helper-icon" size="1" length-unit="rem" name=${helperIcon}></mdc-icon>`;
         }
         return nothing;
     }
@@ -74,7 +75,7 @@ class FormfieldWrapper extends Component {
         }
         return html `
       <mdc-text
-        part="mdc-help-text"
+        part="help-text"
         tagname=${MDC_TEXT_OPTIONS.TAGNAME}
         type=${MDC_TEXT_OPTIONS.TYPE}
       >
@@ -87,7 +88,7 @@ class FormfieldWrapper extends Component {
      * @returns void
      */
     renderLabel() {
-        return html `<div class="mdc-label-text" part="mdc-label-text">
+        return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       <slot name="label-info"></slot>
     </div>`;
@@ -102,13 +103,6 @@ class FormfieldWrapper extends Component {
       <slot name="help-text">${this.renderHelpText()}</slot>
     </div>`;
     }
-    render() {
-        return html `
-      ${this.renderLabel()}
-      <slot></slot>
-      ${this.renderHelperText()}
-    `;
-    }
 }
 FormfieldWrapper.styles = [...Component.styles, ...styles];
 __decorate([

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

@@ -8,9 +8,13 @@ const styles = [
       align-items: flex-start;
       gap: 0.5rem;
     }
-
+    :host([disabled]),
     :host([disabled]) .mdc-label,
-    :host([disabled]) .mdc-help-text {
+    :host([disabled]) .mdc-help-text,
+    :host([disabled][help-text-type='error']) .mdc-help-text,
+    :host([disabled][help-text-type='success']) .mdc-help-text,
+    :host([disabled][help-text-type='warning']) .mdc-help-text,
+    :host([disabled][help-text-type='priority']) .mdc-help-text {
       color: var(--mds-color-theme-text-primary-disabled);
     }
 

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

@@ -0,0 +1 @@
+export {};

package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+import FormfieldWrapper from './formfieldwrapper.component';
+// Subcomponent to be rendered in E2E Tests, to showcase that the
+// theme can be consumed as a subcomponent
+// (this file is imported in the esbuild config for e2e tests ('/config/esbuild/esbuild-e2e.config.js'))
+class SubComponentFormFieldWrapper extends FormfieldWrapper {
+    render() {
+        return html `
+          ${this.renderLabel()}
+          <slot></slot>
+          ${this.renderHelperText()}
+        `;
+    }
+}
+SubComponentFormFieldWrapper.register('mdc-subcomponent-formfieldwrapper');

package/dist/custom-elements.json

@@ -2265,6 +2265,21 @@
                   "text": ""
                 }
               }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
@@ -2297,6 +2312,25 @@
               },
               "description": "The help text that is displayed below the input field.",
               "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.18.1"
+  "version": "0.18.2"
 }