lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/inputName/{inputName.js → inputName.ts}

@@ -1,8 +1,3 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 import labelFirstName from '@salesforce/label/LightningInputName.firstName';
 import labelInformalName from '@salesforce/label/LightningInputName.informalName';
 import labelLastName from '@salesforce/label/LightningInputName.lastName';
@@ -12,16 +7,15 @@ import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSalutation from '@salesforce/label/LightningInputName.salutation';
 import labelSuffix from '@salesforce/label/LightningInputName.suffix';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api } from 'lwc';
+import locale from '@salesforce/i18n/locale';
+import { api, LightningElement, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     normalizeBoolean,
     classListMutation,
-    isCSR,
     reflectAttribute,
-    privateContext,
 } from 'lightning/utilsPrivate';
 import {
     isEmptyString,
@@ -31,9 +25,28 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 import { getFieldsOrder } from './nameFormatter';
+import { privateContext } from 'lightning/utilsInternal';
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const { setContext, assertContext } = privateContext;
 
+interface OptionItem {
+    label: string;
+    value: string;
+}
+
+interface FieldObject {
+    isInput: boolean;
+    isCombobox: boolean;
+    required: boolean;
+    options: OptionItem[];
+    placeholder: string;
+    maxlength: number;
+    name: string;
+    label: string;
+    value: string;
+}
+
 const FIELD_TYPE = {
     INPUT: 'input',
     PICKLIST: 'combobox',
@@ -71,73 +84,86 @@ export default class LightningInputName extends LightningShadowBaseClass {
     /**
      * Reserved for internal use.
      */
-    @api salutationLabel;
+    @api salutationLabel: string;
 
     /**
      * Reserved for internal use.
      */
-    @api firstNameLabel;
+    @api firstNameLabel: string;
 
     /**
      * Reserved for internal use.
      */
-    @api middleNameLabel;
+    @api middleNameLabel: string;
 
     /**
      * Reserved for internal use.
      */
-    @api lastNameLabel;
+    @api lastNameLabel: string;
 
     /**
      * Reserved for internal use.
      */
-    @api suffixLabel;
+    @api suffixLabel: string;
 
     /**
      * Reserved for internal use.
      */
-    @api informalNameLabel;
+    @api informalNameLabel: string;
 
     /**
      * The label of the input name field.
      * @type {string}
      */
-    @api label;
+    @api label: string;
+
+    /**
+     * Specifies the locale used to determine the layout of the name fields.
+     * This value defaults to en-US.
+     * @type {string}
+     * @default en-US
+     */
+    @api locale: string = locale;
+
     /**
      * Displays a list of salutation options, such as Dr. or Mrs., provided as label-value pairs.
      * @type {list}
      */
-    @api options;
+    @api options: OptionItem[];
     /**
      * List of fields to be displayed on the component. This value defaults to
      * ['firstName', 'salutation', 'lastName']. Other field values include middleName,
      * informalName, suffix.
      * @type {list}
      */
-    @api fieldsToDisplay = ['firstName', 'salutation', 'lastName'];
-
-    _salutation = '';
-    _lastName = '';
-    _firstName = '';
-    _middleName = '';
-    _informalName = '';
-    _suffix = '';
-    _disabled = false;
-    _readonly = false;
-    _required = false;
-    _variant;
-    _fieldLevelHelp;
+    @api fieldsToDisplay: string[] = ['firstName', 'salutation', 'lastName'];
+
+    _salutation: string = '';
+    _lastName: string = '';
+    _firstName: string = '';
+    _middleName: string = '';
+    _informalName: string = '';
+    _suffix: string = '';
+    _disabled: boolean = false;
+    _readonly: boolean = false;
+    _required: boolean = false;
+    @track _variant: string;
+    @track _fieldLevelHelp: string;
+    _connected: boolean;
+    interactingState: InteractingState;
+    _fieldConstraintApis: { [key: string]: FieldConstraintApi };
+    _combinedConstraintApi: FieldConstraintApi;
 
     constructor() {
         super();
         setContext(this);
     }
 
-    connectedCallback() {
+    connectedCallback(): void {
         assertContext(this);
         super.connectedCallback();
         this._connected = true;
-        if (isCSR) {
+        if (!import.meta.env.SSR) {
             this.classList.add(
                 'slds-form-element',
                 'slds-form-element_compound'
@@ -148,15 +174,17 @@ export default class LightningInputName extends LightningShadowBaseClass {
             debounceInteraction: true,
         });
         this.interactingState.onenter(() => {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         });
         this.interactingState.onleave(() => {
             this.showHelpMessageIfInvalid();
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('blur'));
         });
     }
 
-    updateClassList() {
+    updateClassList(): void {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
             'slds-form-element_horizontal':
@@ -164,17 +192,21 @@ export default class LightningInputName extends LightningShadowBaseClass {
         });
     }
 
-    get computedPicklistClass() {
+    get computedPicklistClass(): string {
         const classes = classSet();
         return classes
             .add({
                 'slds-size_1-of-1': true,
-                'slds-form-element': !this.template.synthetic,
+                'slds-form-element': !(
+                    this.template as InstanceType<
+                        typeof LightningElement
+                    >['template']
+                )['synthetic'], // eslint-disable-line dot-notation
             })
             .toString();
     }
 
-    disconnectedCallback() {
+    disconnectedCallback(): void {
         this._connected = false;
     }
 
@@ -184,11 +216,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get salutation() {
+    get salutation(): string {
         return this._salutation;
     }
 
-    set salutation(value) {
+    set salutation(value: string) {
         this._salutation = value;
     }
 
@@ -198,11 +230,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get firstName() {
+    get firstName(): string {
         return this._firstName;
     }
 
-    set firstName(value) {
+    set firstName(value: string) {
         this._firstName = value;
     }
 
@@ -212,11 +244,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get middleName() {
+    get middleName(): string {
         return this._middleName;
     }
 
-    set middleName(value) {
+    set middleName(value: string) {
         this._middleName = value;
     }
 
@@ -226,11 +258,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get informalName() {
+    get informalName(): string {
         return this._informalName;
     }
 
-    set informalName(value) {
+    set informalName(value: string) {
         this._informalName = value;
     }
 
@@ -240,11 +272,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get lastName() {
+    get lastName(): string {
         return this._lastName;
     }
 
-    set lastName(value) {
+    set lastName(value: string) {
         this._lastName = value;
     }
 
@@ -254,11 +286,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get suffix() {
+    get suffix(): string {
         return this._suffix;
     }
 
-    set suffix(value) {
+    set suffix(value: string) {
         this._suffix = value;
     }
 
@@ -268,11 +300,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get disabled() {
+    get disabled(): boolean {
         return this._disabled;
     }
 
-    set disabled(value) {
+    set disabled(value: unknown) {
         this._disabled = normalizeBoolean(value);
     }
 
@@ -282,11 +314,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get readOnly() {
+    get readOnly(): boolean {
         return this._readonly;
     }
 
-    set readOnly(value) {
+    set readOnly(value: unknown) {
         this._readonly = normalizeBoolean(value);
     }
 
@@ -299,11 +331,11 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get required() {
+    get required(): boolean {
         return this._required;
     }
 
-    set required(value) {
+    set required(value: unknown) {
         this._required = normalizeBoolean(value);
     }
 
@@ -318,17 +350,17 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @default standard
      */
     @api
-    get variant() {
+    get variant(): string {
         return this._variant || VARIANT.STANDARD;
     }
 
-    set variant(value) {
+    set variant(value: unknown) {
         this._variant = normalizeVariant(value);
         reflectAttribute(this, 'variant', this.variant);
         this.updateClassList();
     }
 
-    set fieldLevelHelp(value) {
+    set fieldLevelHelp(value: string) {
         this._fieldLevelHelp = value;
     }
 
@@ -338,7 +370,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get fieldLevelHelp() {
+    get fieldLevelHelp(): string {
         return this._fieldLevelHelp;
     }
 
@@ -346,16 +378,19 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * Sets focus on the first input field.
      */
     @api
-    focus() {
-        this.template.querySelector('[data-field]').focus();
+    focus(): void {
+        (
+            this.template.querySelector('[data-field]') as HTMLInputElement
+        ).focus();
     }
 
     /**
      * Removes keyboard focus from the input element.
      */
     @api
-    blur() {
-        const inputs = this.template.querySelectorAll('[data-field]');
+    blur(): void {
+        const inputs =
+            this.template.querySelectorAll<HTMLInputElement>('[data-field]');
         for (let i = 0; i < inputs.length; i++) {
             inputs[i].blur();
         }
@@ -367,7 +402,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
      *
      */
     @api
-    get validity() {
+    get validity(): ValidityState {
         return this._combinedConstraint.validity;
     }
 
@@ -377,7 +412,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @returns {boolean} Indicates whether the element meets all constraint validations.
      */
     @api
-    checkValidity() {
+    checkValidity(): boolean {
         return this._combinedConstraint.checkValidity();
     }
 
@@ -385,7 +420,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * Displays error messages on the input fields if the entries are invalid.
      */
     @api
-    showHelpMessageIfInvalid() {
+    showHelpMessageIfInvalid(): void {
         this.reportValidity();
     }
 
@@ -395,8 +430,9 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @param {string} message - The string that describes the error. If message is an empty string, the error message is reset.
      * @param {string} fieldName - The name of the input name field.
      */
+    // Name should match other components due to its usage in other files like inputField.ts
     @api
-    setCustomValidityForField(message, fieldName) {
+    setCustomValidityForField(message: string, fieldName: string): void {
         assert(
             DEFAULT_FIELD_META[fieldName] !== undefined,
             `Invalid 'fieldName': ${fieldName}`
@@ -410,7 +446,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
      * @returns {boolean} - The validity status of the input fields.
      */
     @api
-    reportValidity() {
+    reportValidity(): boolean {
         const valid = this.checkValidity();
 
         if (!this._connected) {
@@ -423,36 +459,36 @@ export default class LightningInputName extends LightningShadowBaseClass {
         return valid;
     }
 
-    get i18n() {
+    get i18n(): typeof i18n {
         return i18n;
     }
 
-    get isLabelHidden() {
+    get isLabelHidden(): boolean {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
 
-    get computedLegendClass() {
+    get computedLegendClass(): string {
         return classSet('slds-form-element__label slds-form-element__legend')
             .add({ 'slds-assistive-text': this.isLabelHidden })
             .toString();
     }
 
-    handleFocus() {
+    handleFocus(): void {
         this.interactingState.enter();
     }
 
-    handleBlur(event) {
+    handleBlur(event: Event): void {
         this.interactingState.leave();
 
-        const field = event.target.dataset.field;
+        const field = (event.target as HTMLElement).dataset.field;
         this._reportValidityForField(field);
     }
 
-    handleChange(event) {
+    handleChange(event: CustomEvent): void {
         event.stopPropagation();
         const value = event.detail.value;
 
-        const fieldName = event.target.dataset.field;
+        const fieldName = (event.target as HTMLElement).dataset.field;
         if (this.getFieldValue(fieldName) === value) {
             // Value didn't change. No need to dispatch.
             return;
@@ -460,6 +496,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
 
         // update the value for changing field
         this[fieldName] = value;
+        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(
             new CustomEvent('change', {
                 composed: true,
@@ -477,18 +514,18 @@ export default class LightningInputName extends LightningShadowBaseClass {
         );
     }
 
-    initializeFieldsMetaData(fieldsOrder) {
-        const fields = [];
+    initializeFieldsMetaData(fieldsOrder: string[]): FieldObject[] {
+        const fields: FieldObject[] = [];
 
         // setup what fields are needed with the field name
         fieldsOrder.forEach((fieldName) => {
-            fields.push({ name: fieldName });
+            fields.push({ name: fieldName } as FieldObject);
         });
 
         return fields;
     }
 
-    getFieldObject(field) {
+    getFieldObject(field: string): FieldObject | null {
         const fieldDefault = DEFAULT_FIELD_META[field];
         const value = this[field];
         const label = this[`${field}Label`] || this.i18n[field];
@@ -514,10 +551,10 @@ export default class LightningInputName extends LightningShadowBaseClass {
         return null;
     }
 
-    get fieldsMetaData() {
-        const fieldsOrder = getFieldsOrder();
+    get fieldsMetaData(): FieldObject[] {
+        const fieldsOrder = getFieldsOrder(this.locale);
         const fieldsData = this.initializeFieldsMetaData(fieldsOrder);
-        const fields = [];
+        const fields: FieldObject[] = [];
         fieldsData.forEach((row) => {
             const fieldName = row.name;
             const fieldObject = this.getFieldObject(fieldName);
@@ -528,15 +565,15 @@ export default class LightningInputName extends LightningShadowBaseClass {
         return fields;
     }
 
-    getFieldValue(fieldName) {
+    getFieldValue(fieldName: string): string {
         return this[fieldName];
     }
 
-    getFieldElement(fieldName) {
+    getFieldElement(fieldName: string): HTMLElement {
         return this.template.querySelector(`[data-field="${fieldName}"]`);
     }
 
-    get _fieldConstraints() {
+    get _fieldConstraints(): { [key: string]: FieldConstraintApi } {
         if (!this._fieldConstraintApis) {
             // For every field to display create an appropriate constraint
             this._fieldConstraintApis = Object.keys(DEFAULT_FIELD_META).reduce(
@@ -560,7 +597,7 @@ export default class LightningInputName extends LightningShadowBaseClass {
         return this._fieldConstraintApis;
     }
 
-    get _combinedConstraint() {
+    get _combinedConstraint(): FieldConstraintApi {
         if (!this._combinedConstraintApi) {
             this._combinedConstraintApi = new FieldConstraintApi(() => this, {
                 customError: () =>
@@ -576,17 +613,19 @@ export default class LightningInputName extends LightningShadowBaseClass {
         return this._combinedConstraintApi;
     }
 
-    _reportValidityForField(field) {
+    _reportValidityForField(field: string): void {
         if (this._fieldConstraints[field]) {
             this._fieldConstraints[field].reportValidity((helpMessage) => {
-                const fieldElement = this.getFieldElement(field);
+                const fieldElement = this.getFieldElement(
+                    field
+                ) as HTMLInputElement;
                 fieldElement.setCustomValidity(helpMessage);
                 fieldElement.reportValidity();
             });
         }
     }
 
-    get helptextAlternativeText() {
+    get helptextAlternativeText(): string {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
-}
+}

package/src/lightning/inputName/nameFormatter.d.ts

@@ -0,0 +1,3 @@
+export function parseFieldsFormat(format: string): string[];
+
+export function getFieldsOrder(locale: string): string[]; 

package/src/lightning/inputName/nameFormatter.js

@@ -3,7 +3,6 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import locale from '@salesforce/i18n/locale';
 import { nameFormat } from 'lightning/internationalizationLibrary';
 
 const FORMAT_CODE_MAP = {
@@ -25,7 +24,7 @@ export const parseFieldsFormat = function (format) {
     return [];
 };
 
-export const getFieldsOrder = function () {
+export const getFieldsOrder = function (locale) {
     const localeTag = locale.replace(/-/g, '_');
     const inputOrder = parseFieldsFormat(
         nameFormat.getNameInputOrder(localeTag)

package/src/lightning/inputUtils/{email.js → email.ts}

@@ -1,15 +1,10 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 /**
  * Validate email with loose standards.
  * @param {string} value Value must be a string.
  */
-export function isValidEmail(value) {
+export function isValidEmail(value: string): boolean {
     // Input treats all data types as string
-    const normalized = `${value}`;
+    const normalized: string = `${value}`;
     // Empty is not a typeMismatch
     if (normalized === '') {
         return true;
@@ -30,9 +25,9 @@ export function isValidEmail(value) {
  * Validate comma deliminated emails with loose standards.
  * @param {string} value Value must be a string.
  */
-export function isValidMultipleEmails(value) {
+export function isValidMultipleEmails(value: string): boolean {
     // Input treats all data types as string
-    const normalized = `${value}`;
+    const normalized: string = `${value}`;
     // Empty is not a typeMismatch
     if (normalized === '') {
         return true;
@@ -42,7 +37,7 @@ export function isValidMultipleEmails(value) {
         return false;
     }
     // Validate each email individually
-    const emails = normalized.split(/\s*,\s*/g);
+    const emails: string[] = normalized.split(/\s*,\s*/g);
     for (let i = 0; i < emails.length; i++) {
         if (!isValidEmail(emails[i])) {
             return false;

package/src/lightning/inputUtils/idGenerator.ts

@@ -0,0 +1,6 @@
+let idCounter: number = 0;
+
+export function generateUniqueId(prefix: string = 'input'): string {
+    idCounter++;
+    return `${prefix}-${idCounter}`;
+}

package/src/lightning/inputUtils/{inputUtils.js → inputUtils.ts}

@@ -1,8 +1,3 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 export { generateUniqueId } from './idGenerator';
 export { InteractingState, debounce } from './interacting';
 export {
@@ -11,6 +6,13 @@ export {
     FieldConstraintApiWithProxyInput,
     FieldConstraintApi,
 } from './validity';
-export { normalizeInput, normalizeVariant, VARIANT } from './normalize';
+export {
+    normalizeInput,
+    normalizeInputModeGetterValue,
+    normalizeInputModeSetterValue,
+    normalizeVariant,
+    INPUTMODE_VALID_VALUES,
+    VARIANT,
+} from './normalize';
 export { isValidEmail, isValidMultipleEmails } from './email';
 export { isEmptyString, isEmptyObject } from './utils';