@momentum-design/components 0.18.4 → 0.18.6

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

@@ -0,0 +1,71 @@
+import { CSSResult, PropertyValues } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & 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.
+ * These are often used in forms, settings, and selections in lists.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+declare class Checkbox extends Checkbox_base {
+    /**
+     * Determines whether the checkbox is selected or unselected.
+     *
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * This property is used to determine the parent checkbox in a nested checkbox group.
+     * If any one of the children is unselected, then the parent checkbox will be indeterminate.
+     * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
+     *
+     * @default false
+     */
+    indeterminate: boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+     * Updates the form value to reflect the current state of the checkbox.
+     * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
+     * If unchecked, the value is set to null.
+     */
+    private setFormValue;
+    /**
+     * Toggles the state of the checkbox element.
+     * If the element is not disabled, then
+     * the checked property is toggled and the indeterminate property is set to false.
+     */
+    private toggleState;
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new event.
+     */
+    handleChange(event: Event): void;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Checkbox;

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

@@ -0,0 +1,150 @@
+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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { ICON_NAME } from './checkbox.constants';
+import styles from './checkbox.styles';
+/**
+ * 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.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * Determines whether the checkbox is selected or unselected.
+         *
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * This property is used to determine the parent checkbox in a nested checkbox group.
+         * If any one of the children is unselected, then the parent checkbox will be indeterminate.
+         * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
+         *
+         * @default false
+         */
+        this.indeterminate = false;
+        this.internals = this.attachInternals();
+        // Checkbox does not contain helpTextType property.
+        this.helpTextType = undefined;
+    }
+    /**
+     * Updates the form value to reflect the current state of the checkbox.
+     * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
+     * If unchecked, the value is set to null.
+     */
+    setFormValue() {
+        let actualValue = null;
+        if (this.checked) {
+            actualValue = !this.value ? 'on' : this.value;
+        }
+        this.internals.setFormValue(actualValue);
+    }
+    /**
+     * Toggles the state of the checkbox element.
+     * If the element is not disabled, then
+     * the checked property is toggled and the indeterminate property is set to false.
+     */
+    toggleState() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.indeterminate = false;
+        }
+    }
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new event.
+     */
+    handleChange(event) {
+        this.toggleState();
+        this.dispatchEvent(new Event(event.type, event));
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+    }
+    render() {
+        var _a;
+        const checkboxIconContent = (this.checked || this.indeterminate) ? html `
+      <mdc-icon
+        class="icon"
+        name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
+        size="1"
+        length-unit="rem"
+      ></mdc-icon>
+    ` : nothing;
+        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
+        return html `
+      <div class="container mdc-focus-ring">
+        <input
+          id="${this.id}"
+          type="checkbox"
+          class="input"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          .checked="${this.checked}"
+          .indeterminate="${this.indeterminate}"
+          .disabled="${this.disabled}"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          @change=${this.handleChange}
+        />
+        <div class="icon-container">${checkboxIconContent}</div>
+      </div>
+      <div class="text-container">
+        ${this.renderLabel()}
+        ${helpTextContent}
+      </div>
+    `;
+    }
+}
+/** @internal */
+Checkbox.formAssociated = true;
+Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "indeterminate", void 0);
+export default Checkbox;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-checkbox";
+declare const ICON_NAME: {
+    readonly CHECKED: "check-bold";
+    readonly INDETERMINATE: "minus-bold";
+};
+export { TAG_NAME, ICON_NAME };

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

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

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,106 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = [css `
+  :host {
+    --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
+    --mdc-checkbox-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
+    --mdc-checkbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
+    --mdc-checkbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-checkbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+    --mdc-checkbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-checkbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-checkbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
+
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .mdc-label, .input {
+    cursor: pointer;
+  }
+  :host([checked]) .icon-container,
+  :host([indeterminate]) .icon-container {
+    background: var(--mdc-checkbox-checked-background-color);
+    border: unset;
+  }
+  :host([checked]) .container:hover .icon-container,
+  :host([indeterminate]) .container:hover .icon-container {
+    background: var(--mdc-checkbox-checked-background-color-hover);
+  }
+  :host([checked]) .container:active .icon-container,
+  :host([indeterminate]) .container:active .icon-container {
+    background: var(--mdc-checkbox-checked-pressed-icon-color);
+  }
+  :host([disabled]) .mdc-label,
+  :host([disabled]) .input {
+    cursor: default;
+  }
+  :host([disabled]) .container:hover {
+    background: unset;
+  }
+  :host([disabled]) .icon-container {
+    border-color: var(--mdc-checkbox-disabled-border-color);
+    background: var(--mdc-checkbox-disabled-background-color);
+  }
+  :host([disabled]) .icon {
+    --mdc-icon-fill-color: var(--mdc-checkbox-disabled-icon-color);
+  }
+  :host([disabled][checked]) .icon-container,
+  :host([disabled][indeterminate]) .icon-container {
+    background: var(--mdc-checkbox-disabled-checked-icon-color);
+    border: 0.0625rem solid var(--mdc-checkbox-disabled-border-color);
+  }
+  .input {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    opacity: 0.1%;
+    overflow: visible;
+    z-index: 1;
+  }
+  .icon-container {
+    display: flex;
+    align-items: center;
+    border: 0.0625rem solid var(--mdc-checkbox-icon-border-color);
+    background: var(--mdc-checkbox-icon-background-color);
+  }
+  .container:hover {
+    background: var(--mdc-checkbox-background-color-hover);
+  }
+  .container:active {
+    background: var(--mdc-checkbox-pressed-icon-color);
+  }
+  .input, .icon-container {
+    width: 1rem;
+    height: 1rem;
+  }
+  .input,
+  .icon-container,
+  .container {
+    border-radius: 0.125rem;
+  }
+  .icon {
+    --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
+  }
+  .container {
+    margin: 0.125rem 0;
+  }
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([checked]) .icon-container,
+    :host([indeterminate]) .icon-container {
+      border: 0.0625rem solid var(--mdc-checkbox-border-color);
+    }
+  }
+`, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,8 @@
+import Checkbox from './checkbox.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-checkbox']: Checkbox;
+    }
+}
+export default Checkbox;

package/dist/components/checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox from './checkbox.component';
+import { TAG_NAME } from './checkbox.constants';
+import '../icon';
+Checkbox.register(TAG_NAME);
+export default Checkbox;

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

@@ -1,10 +1,10 @@
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
+    readonly DEFAULT: "default";
     readonly ERROR: "error";
-    readonly WARNING: "warning";
-    readonly SUCCESS: "success";
     readonly PRIORITY: "priority";
-    readonly DEFAULT: "default";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
 };
 declare const DEFAULTS: {
     readonly VALIDATION: "default";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -2,11 +2,11 @@ import utils from '../../utils/tag-name';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
 const VALIDATION = {
+    DEFAULT: 'default',
     ERROR: 'error',
-    WARNING: 'warning',
-    SUCCESS: 'success',
     PRIORITY: 'priority',
-    DEFAULT: 'default',
+    SUCCESS: 'success',
+    WARNING: 'warning',
 };
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,

package/dist/components/formfieldwrapper/formfieldwrapper.utils.js

@@ -1,10 +1,10 @@
 import { VALIDATION } from './formfieldwrapper.constants';
 const getHelperIcon = (type) => {
     const helperIconSizeMap = {
-        [VALIDATION.ERROR]: 'error-legacy-filled',
-        [VALIDATION.WARNING]: 'warning-filled',
-        [VALIDATION.SUCCESS]: 'check-circle-filled',
-        [VALIDATION.PRIORITY]: 'priority-circle-filled',
+        [VALIDATION.ERROR]: 'error-legacy-badge-filled',
+        [VALIDATION.WARNING]: 'warning-badge-filled',
+        [VALIDATION.SUCCESS]: 'check-circle-badge-filled',
+        [VALIDATION.PRIORITY]: 'priority-badge-filled',
         [VALIDATION.DEFAULT]: '',
     };
     return helperIconSizeMap[type] || '';

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

@@ -0,0 +1,10 @@
+import Input from './input.component';
+import '../button';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-input']: Input;
+    }
+}
+export default Input;

package/dist/components/input/index.js

@@ -0,0 +1,7 @@
+import Input from './input.component';
+import { TAG_NAME } from './input.constants';
+import '../button';
+import '../icon';
+import '../text';
+Input.register(TAG_NAME);
+export default Input;

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

@@ -0,0 +1,208 @@
+import { CSSResult, nothing, PropertyValueMap } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper';
+import type { IconNames } from '../icon/icon.types';
+import type { AutoCapitalizeType } from './input.types';
+declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & typeof FormfieldWrapper;
+/**
+ * mdc-input is a component that allows users to input text.
+ *  It contains:
+ * - label field - describe the input field.
+ * - input field - contains the value
+ * - help text or validation message - displayed below the input field.
+ * - trailing button - it displays a clear the input field.
+ * - prefix text - displayed before the input field.
+ * - leading icon - displayed before the input field.
+ * - clear-aria-label - aria label for the trailing button.
+ * - all the attributes of the input field.
+ *
+ * @tagname mdc-input
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
+ *
+ */
+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.
+     */
+    readonly: boolean;
+    /**
+     * The prefix text that is displayed before the input field. It has a max length of 10 characters.
+     * When the prefix text is set, make sure to set the 'data-aria-label'
+     * attribute with the appropriate value for accessibility.
+     */
+    prefixText?: string;
+    /**
+     * The leading icon that is displayed before the input field.
+     */
+    leadingIcon?: IconNames;
+    /**
+     * The trailing button when set to true, shows a clear button that clears the input field.
+     * @default false
+     */
+    trailingButton: boolean;
+    /**
+     * The maximum number of characters that the input field can accept.
+     */
+    maxlength?: number;
+    /**
+     * The minimum number of characters that the input field can accept.
+     */
+    minlength?: number;
+    /**
+     * The autocapitalize attribute of the input field.
+     * @default 'off'
+     */
+    autocapitalize: AutoCapitalizeType;
+    /**
+     * The autocomplete attribute of the input field.
+     * @default 'off'
+     */
+    autocomplete: any;
+    /**
+     * If true, the input field is focused when the component is rendered.
+     * @default false
+     */
+    autofocus: boolean;
+    /**
+     * Specifies the name of the directionality of text for submission purposes (e.g., "rtl" for right-to-left).
+     */
+    dirname?: string;
+    /**
+     * The pattern attribute of the input field.
+     * Specifies a regular expression that the input value must match for validation purposes.
+     */
+    pattern?: string;
+    /**
+     * The list attribute of the input field.
+     * Identifies a list of pre-defined options to suggest to the user.
+     */
+    list?: string;
+    /**
+     * The size attribute of the input field.
+     * Specifies the width of the input field.
+     * @default undefined
+     */
+    size?: number | undefined;
+    /**
+     * Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.
+     * @default ''
+     */
+    clearAriaLabel: string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+   * @internal
+   * The input element
+   */
+    private inputElement;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+   * Handles the value change of the input field.
+   * Sets the form value and updates the validity of the input field.
+   * @returns void
+   */
+    handleValueChange(): void;
+    /**
+   * This function is called when the attribute changes.
+   * It updates the validity of the input field based on the input field's validity.
+   *
+   * @param name - attribute name
+   * @param old - old value
+   * @param value - new value
+   */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+   * Sets the validity of the input field based on the input field's validity.
+   * @returns void
+   */
+    private setValidityFromInput;
+    /**
+   * Updates the value of the input field.
+   * Sets the form value.
+   * @returns void
+   */
+    private updateValue;
+    /**
+   * Handles the input event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   */
+    private onInput;
+    /**
+   * Handles the change event of the input field.
+   * Updates the value and sets the validity of the input field.
+   *
+   * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+   * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+   * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+   *
+   * @param event - Event which contains information about the value change.
+   */
+    private onChange;
+    /**
+   * Renders the leading icon before the input field.
+   * If the leading icon is not set, it will not be displayed.
+   *
+   * @returns void
+   */
+    protected renderLeadingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+   * Renders the prefix text before the input field.
+   * If the prefix text is more than 10 characters,
+   * - it will not be displayed.
+   * - the validation messsage will be displayed.
+   *
+   *  Note: We are setting aria-hidden so that the screen reader does not read the prefix text.
+   *  The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.
+   * @returns void
+   */
+    protected renderPrefixText(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+   * Clears the input field.
+   */
+    private clearInputText;
+    /**
+   * Renders the trailing button to clear the input field if the trailingButton is set to true.
+   * @returns void
+   */
+    protected renderTrailingButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Input;