@momentum-design/components 0.120.34 → 0.120.36

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

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import type { CheckboxValidationType } from './checkbox.types';
 declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
@@ -74,7 +75,11 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @default false
      */
     autofocus: boolean;
-    connectedCallback(): void;
+    /**
+     * The type of help text/validation. It can be 'default' or 'error'.
+     * @default 'default'
+     */
+    helpTextType: CheckboxValidationType;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Updates the form value to reflect the current state of the checkbox.

package/dist/components/checkbox/checkbox.component.js

@@ -17,6 +17,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import styles from './checkbox.styles';
+import { CHECKBOX_VALIDATION } from './checkbox.constants';
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selections in lists.
@@ -91,17 +92,17 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
          * @default false
          */
         this.autofocus = false;
+        /**
+         * The type of help text/validation. It can be 'default' or 'error'.
+         * @default 'default'
+         */
+        this.helpTextType = CHECKBOX_VALIDATION.DEFAULT;
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
             return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // Checkbox does not contain helpTextType property.
-        this.helpTextType = undefined;
-    }
     firstUpdated(_changedProperties) {
         // set the element to auto focus if autoFocusOnMount is set to true
         // before running the super method, so that the AutoFocusOnMountMixin can use it
@@ -247,4 +248,8 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'help-text-type' }),
+    __metadata("design:type", String)
+], Checkbox.prototype, "helpTextType", void 0);
 export default Checkbox;

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

@@ -4,4 +4,8 @@ declare const ICON_NAME: {
     readonly CHECKED: Extract<IconNames, "check-bold">;
     readonly INDETERMINATE: Extract<IconNames, "minus-bold">;
 };
-export { TAG_NAME, ICON_NAME };
+declare const CHECKBOX_VALIDATION: {
+    readonly ERROR: "error";
+    readonly DEFAULT: "default";
+};
+export { TAG_NAME, ICON_NAME, CHECKBOX_VALIDATION };

package/dist/components/checkbox/checkbox.constants.js

@@ -1,7 +1,12 @@
 import utils from '../../utils/tag-name';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 const TAG_NAME = utils.constructTagName('checkbox');
 const ICON_NAME = {
     CHECKED: 'check-bold',
     INDETERMINATE: 'minus-bold',
 };
-export { TAG_NAME, ICON_NAME };
+const CHECKBOX_VALIDATION = {
+    ERROR: VALIDATION.ERROR,
+    DEFAULT: VALIDATION.DEFAULT,
+};
+export { TAG_NAME, ICON_NAME, CHECKBOX_VALIDATION };

package/dist/components/checkbox/checkbox.styles.js

@@ -62,6 +62,10 @@ const styles = [
       --mdc-checkbox-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
+    :host([help-text-type='error'])::part(static-checkbox) {
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-cancel-normal);
+    }
+
     :host([readonly]),
     :host([disabled]),
     :host([soft-disabled]) {

package/dist/components/checkbox/checkbox.types.d.ts

@@ -1,7 +1,9 @@
-import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
-import type Checkbox from "./checkbox.component";
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type Checkbox from './checkbox.component';
+import { CHECKBOX_VALIDATION } from './checkbox.constants';
+type CheckboxValidationType = ValueOf<typeof CHECKBOX_VALIDATION>;
 interface Events {
     onChangeEvent: TypedCustomEvent<Checkbox>;
     onFocusEvent: OverrideEventTarget<FocusEvent, Checkbox>;
 }
-export type { Events };
+export type { Events, CheckboxValidationType };

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

@@ -132,6 +132,12 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @default ''
      */
     clearAriaLabel: string;
+    /**
+     * Defines a id pointing to the element which describes the input element.
+     * The AriaDescribedby attribute to be set for accessibility.
+     * @default null
+     */
+    dataAriaDescribedby: string | null;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /** @internal */

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

@@ -111,6 +111,12 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
          * @default ''
          */
         this.clearAriaLabel = '';
+        /**
+         * Defines a id pointing to the element which describes the input element.
+         * The AriaDescribedby attribute to be set for accessibility.
+         * @default null
+         */
+        this.dataAriaDescribedby = null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -300,7 +306,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     `;
     }
     renderInputElement(type, hidePlaceholder = false) {
-        var _a;
+        var _a, _b;
         const placeholderText = hidePlaceholder ? '' : this.placeholder;
         return html `<input
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
@@ -312,7 +318,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
       ?readonly="${this.readonly}"
       ?required="${this.required}"
       type="${type}"
-      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : ((_b = this.dataAriaDescribedby) !== null && _b !== void 0 ? _b : ''))}"
       aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
       placeholder=${ifDefined(placeholderText)}
       minlength=${ifDefined(this.minlength)}
@@ -396,4 +402,8 @@ __decorate([
     property({ type: String, attribute: 'clear-aria-label' }),
     __metadata("design:type", Object)
 ], Input.prototype, "clearAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-aria-describedby' }),
+    __metadata("design:type", Object)
+], Input.prototype, "dataAriaDescribedby", void 0);
 export default Input;