npm - lightning-base-components - Versions diffs - 1.27.5-alpha → 1.28.4-alpha - Mend

lightning-base-components 1.27.5-alpha → 1.28.4-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2973) hide show

package/src/lightning/datepicker/datepicker.js CHANGED Viewed

@@ -15,43 +15,17 @@ import labelCustomErrorWithDateFormat from '@salesforce/label/LightningDateTimeP
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import labelDateFormatExampleText from '@salesforce/label/LightningDateTimePicker.dateFormatExampleText';
-// eslint-disable-next-line @lwc/lwc/ssr-no-form-factor
 import formFactor from '@salesforce/client/formFactor';
 import orgHasA11yResizeReflow from '@salesforce/accessCheck/A11yResizeReflow.orgHasA11yResizeReflow';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import {
-    normalizeISODate,
-    parseFormattedDate,
-} from 'lightning/internationalizationLibrary';
-import {
-    startPositioning,
-    stopPositioning,
-    Direction,
-} from 'lightning/positionLibrary';
+import { normalizeISODate, parseFormattedDate, } from 'lightning/internationalizationLibrary';
+import { startPositioning, stopPositioning, Direction, } from 'lightning/positionLibrary';
 import { classSet, formatLabel } from 'lightning/utils';
-import {
-    normalizeBoolean,
-    normalizeAriaAttribute,
-    normalizeString,
-    synchronizeAttrs,
-    getRealDOMId,
-    computeAriaInvalid,
-    reflectAttribute,
-} from 'lightning/utilsPrivate';
-import {
-    generateUniqueId,
-    normalizeVariant,
-    VARIANT,
-} from 'lightning/inputUtils';
-import { isValidISODateTimeString } from 'lightning/iso8601Utils';
-import {
-    handleKeyDownOnDatePickerIcon,
-    handleBasicKeyDownBehaviour,
-} from './keyboard';
+import { normalizeBoolean, normalizeAriaAttribute, normalizeString, synchronizeAttrs, getRealDOMId, computeAriaInvalid, reflectAttribute, } from 'lightning/utilsPrivate';
+import { generateUniqueId, normalizeVariant, VARIANT, } from 'lightning/inputUtils';
+import { handleKeyDownOnDatePickerIcon, handleBasicKeyDownBehaviour, } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
-import { features } from 'lightning/features';
 const i18n = {
     invalidDate: labelInvalidDate,
     rangeOverflow: labelRangeOverflow,
@@ -66,7 +40,6 @@ const i18n = {
     customErrorWithDateFormat: labelCustomErrorWithDateFormat,
     dateFormatExampleText: labelDateFormatExampleText,
 };
 const ARIA_CONTROLS = 'aria-controls';
 const ARIA_DETAILS = 'aria-details';
 const ARIA_LABEL = 'aria-label';
@@ -81,19 +54,27 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 const DATE_EXAMPLE = '2024-12-31';
 export default class LightningDatePicker extends LightningShadowBaseClass {
-    @track _disabled = false;
-    @track _readonly = false;
-    @track _required = false;
-    @track _value = null;
-    @track _calendarVisible = false;
-    @track _displayValue = null;
-    @track _errorMessage = '';
-    @track _fieldLevelHelp;
-    @track _variant;
-    @api accessKey;
+    @track
+    _disabled = false;
+    @track
+    _readonly = false;
+    @track
+    _required = false;
+    @track
+    _value = null;
+    @track
+    _calendarVisible = false;
+    @track
+    _displayValue = null;
+    @track
+    _errorMessage = '';
+    @track
+    _fieldLevelHelp;
+    @track
+    _variant;
+    @api
+    accessKey;
     _min;
     _max;
     _messageWhenValueMissing;
@@ -104,21 +85,18 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     _dateStyle = DATE_STYLE.MEDIUM;
     showFormatHelpText = false;
     clickedOutsideDatepicker;
-    @api label;
-    @api name;
-    @api placeholder;
-    @api externalErrorMessage;
-    @api parentErrorMessageElement;
-    /**
-     * Controls auto-filling of the input. Set the attribute to pass
-     * through autocomplete values to be interpreted by the browser.
-     * By default autocomplete is off to avoid overlap of dropdown.
-     * @type {string}
-     */
-    @api autocomplete = 'off';
+    @api
+    label;
+    @api
+    name;
+    @api
+    placeholder;
+    @api
+    externalErrorMessage;
+    @api
+    parentErrorMessageElement;
+    @api
+    autocomplete = 'off';
     connectAriaErrorMessage() {
         if (this.ariaObserver && this._rendered) {
             this.ariaObserver.connect({
@@ -128,17 +106,14 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
     @api
     get ariaErrorMessageElement() {
         return this._ariaErrorMessage;
     }
     set ariaErrorMessageElement(el) {
         this._ariaErrorMessage = el;
         this.connectAriaErrorMessage();
     }
     @api
     get rootAriaNode() {
         if (this.ariaObserver) {
@@ -146,158 +121,106 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         }
         return null;
     }
     set rootAriaNode(root) {
         if (this.ariaObserver) {
             this.ariaObserver.root = root;
         }
     }
     setNormalisedIsoDateMin() {
-        const normalizedDate = normalizeISODate(
-            this._userMinValue,
-            this._dateStyle
-        );
+        const normalizedDate = normalizeISODate(this._userMinValue, this._dateStyle);
         if (normalizedDate.isoValue) {
             this._min = normalizedDate.isoValue;
             this._displayMin = normalizedDate.displayValue;
         }
     }
     @api
     get min() {
         return this._min;
     }
     set min(value) {
-        // W-7702418: We previously always set the raw value and should continue to do so unless
-        // normalization of the given value is possible.
         this._min = value;
         this._displayMin = value;
         this._userMinValue = value;
         this.setNormalisedIsoDateMin();
     }
     setNormalisedIsoDateMax() {
-        const normalizedDate = normalizeISODate(
-            this._userMaxValue,
-            this._dateStyle
-        );
+        const normalizedDate = normalizeISODate(this._userMaxValue, this._dateStyle);
         if (normalizedDate.isoValue) {
             this._max = normalizedDate.isoValue;
             this._displayMax = normalizedDate.displayValue;
         }
     }
     @api
     get max() {
         return this._max;
     }
     set max(value) {
-        // W-7702418: We previously always set the raw value and should continue to do so unless
-        // normalization of the given value is possible.
         this._max = value;
         this._displayMax = value;
         this._userMaxValue = value;
         this.setNormalisedIsoDateMax();
     }
     @api
     get messageWhenValueMissing() {
         if (this._messageWhenValueMissing) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenValueMissing,
-                this.dateFormatExample
-            );
-        }
-        return formatLabel(
-            this.i18n.valueMissingWithDateFormat,
-            this.dateFormatExample
-        );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenValueMissing, this.dateFormatExample);
+        }
+        return formatLabel(this.i18n.valueMissingWithDateFormat, this.dateFormatExample);
     }
     set messageWhenValueMissing(message) {
         this._messageWhenValueMissing = message;
     }
     @api
     get messageWhenBadInput() {
         if (this._messageWhenBadInput) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenBadInput,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenBadInput, this.dateFormatExample);
         }
         return formatLabel(this.i18n.invalidDate, this.dateFormatExample);
     }
     set messageWhenBadInput(message) {
         this._messageWhenBadInput = message;
     }
     @api
     get messageWhenRangeOverflow() {
         if (this._messageWhenRangeOverflow) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenRangeOverflow,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenRangeOverflow, this.dateFormatExample);
         }
         return formatLabel(this.i18n.rangeOverflow, this._displayMax);
     }
     set messageWhenRangeOverflow(message) {
         this._messageWhenRangeOverflow = message;
     }
     @api
     get messageWhenRangeUnderflow() {
         if (this._messageWhenRangeUnderflow) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenRangeUnderflow,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenRangeUnderflow, this.dateFormatExample);
         }
         return formatLabel(this.i18n.rangeUnderflow, this._displayMin);
     }
     set messageWhenRangeUnderflow(message) {
         this._messageWhenRangeUnderflow = message;
     }
-    // setter is required to properly trigger update
     @api
     get ariaLabel() {
         return this._ariaLabel;
     }
     set ariaLabel(val) {
         this._ariaLabel = val;
         this.synchronizeA11y();
     }
     @api
     get ariaDisabled() {
         return this._ariaDisabled;
     }
     set ariaDisabled(val) {
         this._ariaDisabled = val;
         this.synchronizeA11y();
     }
     _ariaLabelledBy;
     _ariaControls;
     _ariaDetails;
     _ariaDescribedBy = [];
     _ariaErrorMessage;
     set ariaLabelledByElement(el) {
         this._ariaLabelledBy = el;
         if (this.ariaObserver) {
@@ -308,12 +231,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
     @api
     get ariaLabelledByElement() {
         return this._ariaLabelledBy;
     }
     set ariaControlsElement(el) {
         this._ariaControls = el;
         if (this.ariaObserver) {
@@ -324,12 +245,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
     @api
     get ariaControlsElement() {
         return this._ariaControls;
     }
     set ariaDetailsElements(el) {
         this._ariaDetails = el;
         if (this.ariaObserver) {
@@ -340,27 +259,24 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
     @api
     get ariaDetailsElements() {
         return this._ariaDetails;
     }
     set ariaDescribedByElements(el) {
         if (Array.isArray(el)) {
             this._ariaDescribedBy = el;
-        } else {
+        }
+        else {
             this._ariaDescribedBy = [el];
         }
         this._ariaDescribedBy.push(this.errorMessageElement);
         this.connectAriaDescribedBy();
     }
     @api
     get ariaDescribedByElements() {
         return this._ariaDescribedBy;
     }
     synchronizeA11y() {
         if (!this._rendered) {
             return;
@@ -369,57 +285,43 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         if (!input) {
             return;
         }
         synchronizeAttrs(input, {
             [ARIA_LABEL]: this._ariaLabel,
             [ARIA_DISABLED]: this._ariaDisabled,
             [ARIA_INVALID]: this.computedAriaInvalid,
         });
-        // Set aria-describedby on the calendar button that opens the calendar dialog
-        // to inform user of date validity (min/max). Same is done for input.
-        const calendarButton = this.template.querySelector(
-            'lightning-button-icon'
-        );
+        const calendarButton = this.template.querySelector('lightning-button-icon');
         calendarButton.ariaDescribedBy =
             this.computedDatepickerButtonAriaDescribedby;
         if (this.isConnected) {
             this.connectAriaDescribedBy();
             this.connectAriaErrorMessage();
             this.ariaObserver.sync();
         }
     }
     renderedCallback() {
         if (this.showFormatHelpText && !this.pointerEventAdded) {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.addEventListener('pointerdown', this.handlePointerDown);
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.addEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = true;
-        } else if (!this.showFormatHelpText && this.pointerEventAdded) {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
+        }
+        else if (!this.showFormatHelpText && this.pointerEventAdded) {
             document.removeEventListener('pointerdown', this.handlePointerDown);
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.removeEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = false;
         }
         this._rendered = true;
         this.synchronizeA11y();
     }
     @api
     get value() {
         return this._value;
     }
     set value(newValue) {
         const normalizedDate = normalizeISODate(newValue, this.dateStyle);
         this._value = normalizedDate.isoValue;
         this._displayValue = normalizedDate.displayValue;
     }
     @api
     get disabled() {
         return this._disabled;
@@ -428,7 +330,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this._disabled = normalizeBoolean(value);
         reflectAttribute(this, 'disabled', this._disabled);
     }
     @api
     get readOnly() {
         return this._readonly;
@@ -437,7 +338,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this._readonly = normalizeBoolean(value);
         reflectAttribute(this, 'readonly', this._readonly);
     }
     @api
     get required() {
         return this._required;
@@ -445,97 +345,75 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     set required(value) {
         this._required = normalizeBoolean(value);
     }
     set fieldLevelHelp(value) {
         this._fieldLevelHelp = value;
     }
     @api
     get fieldLevelHelp() {
         return this._fieldLevelHelp;
     }
     @api
     get variant() {
         return this._variant || VARIANT.STANDARD;
     }
     set variant(value) {
         this._variant = normalizeVariant(value);
         reflectAttribute(this, 'variant', value);
     }
     @api
     focus() {
         if (this.connected) {
             this.inputElement.focus();
         }
     }
     @api
     blur() {
         if (this.connected) {
             this.inputElement.blur();
         }
     }
     @api
     showHelpMessage(message) {
         if (!message) {
             this.classList.remove('slds-has-error');
             this._errorMessage = '';
-        } else {
+        }
+        else {
             this.classList.add('slds-has-error');
             this._errorMessage = message;
         }
     }
     @api
     hasBadInput() {
-        return (
-            !!this._displayValue &&
-            (this._value === null ||
-                (features.enableDateInvalidYearHandling &&
-                    !isValidISODateTimeString(this.value)))
-        );
+        return !!this._displayValue && this._value === null;
     }
     @api
     get dateStyle() {
         return this._dateStyle;
     }
     set dateStyle(value) {
         this._dateStyle = normalizeString(value, {
             fallbackValue: DATE_STYLE.MEDIUM,
             validValues: [DATE_STYLE.SHORT, DATE_STYLE.MEDIUM, DATE_STYLE.LONG],
         });
         const normalizedDate = normalizeISODate(this._value, this._dateStyle);
         this._displayValue = normalizedDate.displayValue;
-        // W-14161407 min and max setters are being called before dateStyle is being set
-        // hence updating the min max values
         this.setNormalisedIsoDateMax();
         this.setNormalisedIsoDateMin();
     }
     constructor() {
         super();
         this.uniqueId = generateUniqueId();
         this.ariaObserver = new AriaObserver(this);
     }
     connectedCallback() {
         super.connectedCallback();
         this.connected = true;
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }
         this.keyboardInterface = this.datepickerKeyboardInterface();
     }
     disconnectedCallback() {
         this.connected = false;
         this._rendered = false;
@@ -544,109 +422,82 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.ariaObserver = undefined;
         }
     }
     get computedClassFormatText() {
         return classSet('slds-form-element__help').add({
             'slds-assistive-text': !this.showFormatHelpText,
         });
     }
     get computedShowDateFormat() {
         return !this.errorMessage && !this.externalErrorMessage;
     }
     get dateFormatExample() {
         return normalizeISODate(DATE_EXAMPLE, this.dateStyle).displayValue;
     }
     get dateFormatText() {
-        return formatLabel(
-            this.i18n.dateFormatExampleText,
-            this.dateFormatExample
-        );
+        return formatLabel(this.i18n.dateFormatExampleText, this.dateFormatExample);
     }
     get i18n() {
         return i18n;
     }
     get isLabelHidden() {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
     get computedLabelClass() {
         return classSet('slds-form-element__label')
             .add({ 'slds-assistive-text': this.isLabelHidden })
             .toString();
     }
     get errorMessageElement() {
         return this.template.querySelector('[data-error-message]');
     }
     get rangeMessageElement() {
         return this.template.querySelector('[data-range-message]');
     }
     get dateFormatElement() {
         return this.template.querySelector('[data-date-format]');
     }
     get computedUniqueRangeMessageElementId() {
         const el = this.template.querySelector('[data-range-message]');
         return getRealDOMId(el);
     }
     get isRangeMessageVisible() {
         return this.min || this.max;
     }
     get isCalendarVisible() {
         return this._calendarVisible;
     }
     get displayValue() {
         return this._displayValue;
     }
     get errorMessage() {
         return this._errorMessage;
     }
     get computedIconDisabledState() {
         return this.disabled || this.readOnly;
     }
     get ariaDescribedByElementsInternal() {
         const elements = [];
         if (this.errorMessage) {
             elements.push(this.errorMessageElement);
-        } else {
+        }
+        else {
             elements.push(this.dateFormatElement);
         }
-        // To inform user of valid date ranges that are set via min/max attributes
         if (this.isRangeMessageVisible) {
             elements.push(this.rangeMessageElement);
         }
         return elements;
     }
     get computedAriaDescribedby() {
         const ariaValues = [];
         this._ariaDescribedBy.forEach((item) => {
             const id = getRealDOMId(item);
             if (id) {
                 ariaValues.push(id);
             }
         });
         return normalizeAriaAttribute(ariaValues);
     }
     connectAriaDescribedBy() {
         if (this.ariaObserver && this._rendered) {
             this.ariaObserver.connect({
@@ -655,89 +506,64 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
                 relatedNodeIds: this.computedAriaDescribedby,
                 relatedNodes: [
                     ...this.ariaDescribedByElementsInternal,
-                    // Move this to connectAriaErrorMessage
-                    // instead once that has full support
                     this.parentErrorMessageElement,
                 ],
             });
         }
     }
     get computedDatepickerButtonAriaDescribedby() {
         if (this.isRangeMessageVisible) {
             return this.computedUniqueRangeMessageElementId;
         }
         return '';
     }
     get computedSelectDateLabel() {
         return formatLabel(this.i18n.selectDateFor, this.label);
     }
     get rangeMessage() {
         if (this.min && !this.max) {
-            // If only min is set
             return formatLabel(this.i18n.minRangeMessage, this._displayMin);
-        } else if (this.max && !this.min) {
-            // If only max is set
+        }
+        else if (this.max && !this.min) {
             return formatLabel(this.i18n.maxRangeMessage, this._displayMax);
-        } else if (this.min && this.max) {
-            // If both min and max are set
-            return formatLabel(
-                this.i18n.minAndMaxRangeMessage,
-                this._displayMin,
-                this._displayMax
-            );
+        }
+        else if (this.min && this.max) {
+            return formatLabel(this.i18n.minAndMaxRangeMessage, this._displayMin, this._displayMax);
         }
         return '';
     }
     handleInputChange(event) {
         event.stopPropagation();
-        // keeping the display value in sync with the element's value
         this._displayValue = event.currentTarget.value;
         this._value = parseFormattedDate(this._displayValue).value;
         this.dispatchChangeEvent();
     }
     handleInput() {
-        // keeping the display value in sync with the element's value
         this._displayValue = this.inputElement.value;
-        // Making sure that the focus remains on the input and we're not triggering leave
         this.hideCalendarAndFocusTrigger();
     }
     handleInputBlur() {
         if (this._value !== null) {
-            const normalizedDate = normalizeISODate(
-                this._value,
-                this.dateStyle
-            );
+            const normalizedDate = normalizeISODate(this._value, this.dateStyle);
             this._displayValue = normalizedDate.displayValue;
         }
         this.onFocusOut();
     }
     handleInputClick(event) {
         if (this.readOnly) {
             return;
         }
         this.calendarTrigger = event.target;
         this.showCalendar();
     }
     handlePointerDown = (event) => {
         const datePickerSelector = '.slds-dropdown-trigger';
         let datepickerClosestTarget = null;
         if (event.target && typeof event.target.closest === 'function') {
             datepickerClosestTarget = event.target.closest(datePickerSelector);
-        } else if (
-            event.relatedTarget &&
-            typeof event.relatedTarget.closest === 'function'
-        ) {
+        }
+        else if (event.relatedTarget &&
+            typeof event.relatedTarget.closest === 'function') {
             datepickerClosestTarget =
                 event.relatedTarget.closest(datePickerSelector);
         }
@@ -751,36 +577,23 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.clickedOutsideDatepicker = false;
         }
     };
-    /**
-     * When the element gains focus this function is called.
-     */
     onFocusIn() {
         if (this._pendingFocusOut) {
             this._pendingFocusOut = false;
         }
         if (!this._focused) {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         }
         this._focused = true;
         this.showFormatHelpText = true;
         this.clickedOutsideDatepicker = false;
     }
-    /**
-     * When the element looses its focus this function is called.
-     */
     onFocusOut() {
-        // This assumes that a focusin will be dispatched after a focusout
         this._pendingFocusOut = true;
-        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
             if (this._pendingFocusOut) {
                 this._focused = false;
                 this.hideCalendar();
-                // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
                 this.dispatchEvent(new CustomEvent('blur'));
             }
         });
@@ -788,104 +601,72 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.showFormatHelpText = false;
         }
     }
     handleDatePickerIconClick(event) {
         if (this.readOnly || this.disabled) {
             return;
         }
         this.calendarTrigger = event.target;
         this.showAndFocusCalendar();
     }
     handleInputKeydown(event) {
         this.calendarTrigger = event.target;
         handleBasicKeyDownBehaviour(event, this.keyboardInterface);
     }
     handleDatePickerIconKeyDown(event) {
         this.calendarTrigger = event.target;
         handleKeyDownOnDatePickerIcon(event, this.keyboardInterface);
     }
     handleCalendarKeyDown(event) {
         handleBasicKeyDownBehaviour(event, this.keyboardInterface);
     }
     handleDateSelect(event) {
         event.stopPropagation();
         this._value = event.detail.value;
-        this._displayValue = normalizeISODate(
-            this._value,
-            this.dateStyle
-        ).displayValue;
+        this._displayValue = normalizeISODate(this._value, this.dateStyle).displayValue;
         this.hideCalendarAndFocusTrigger();
         this.dispatchChangeEvent();
     }
     showAndFocusCalendar() {
         this.showCalendar();
-        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             this.focusCalendar();
         });
     }
     hideCalendarAndFocusTrigger() {
         this.hideCalendar();
         if (this.calendarTrigger) {
             if (this.calendarTrigger === this.calendarButtonElement) {
-                // Fix for W-14258862, focus is transferred to the input element
-                // instead of the button element when trigger is button
                 this.inputElement.focus();
-            } else {
+            }
+            else {
                 this.calendarTrigger.focus();
             }
         }
     }
     focusCalendar() {
         const calendar = this.template.querySelector('lightning-calendar');
         if (calendar) {
             calendar.focus();
         }
     }
     startPositioning() {
         const reflowResizeConfig = this.isReflowResizeActivated
             ? {
-                  keepInViewport: true,
-                  autoShrinkHeight: true,
-              }
+                keepInViewport: true,
+                autoShrinkHeight: true,
+            }
             : {};
         if (this.isReflowResizeActivated) {
-            const datePickerContainer =
-                this.lightningCalendarElement.shadowRoot.querySelector(
-                    '.slds-datepicker'
-                );
+            const datePickerContainer = this.lightningCalendarElement.shadowRoot.querySelector('.slds-datepicker');
             datePickerContainer.style.overflow = 'auto';
             datePickerContainer.style.maxHeight = '100vh';
         }
         if (!this._relationship) {
             this._relationship = startPositioning(this, {
-                target: () =>
-                    this.template.querySelector(
-                        'div.slds-form-element__control'
-                    ),
-                element: () =>
-                    this.template
-                        .querySelector('lightning-calendar')
-                        .shadowRoot.querySelector('div'),
+                target: () => this.template.querySelector('div.slds-form-element__control'),
+                element: () => this.template
+                    .querySelector('lightning-calendar')
+                    .shadowRoot.querySelector('div'),
                 align: {
                     horizontal: Direction.Right,
                     vertical: Direction.Top,
@@ -894,81 +675,62 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
                     horizontal: Direction.Right,
                     vertical: Direction.Bottom,
                 },
-                autoFlip: true, // Auto flip direction if not have enough space
-                leftAsBoundary: true, // horizontal flip uses target left as boundary
+                autoFlip: true,
+                leftAsBoundary: true,
                 ...reflowResizeConfig,
             });
-        } else {
+        }
+        else {
             this._relationship.reposition();
         }
     }
     stopPositioning() {
         if (this._relationship) {
             stopPositioning(this._relationship);
             this._relationship = null;
         }
     }
     showCalendar() {
         if (!this.isCalendarVisible) {
             this.rootElement.classList.add('slds-is-open');
             this._calendarVisible = true;
         }
     }
     hideCalendar() {
         if (this.isCalendarVisible) {
             this.rootElement.classList.remove('slds-is-open');
             this.stopPositioning();
             this._calendarVisible = false;
         }
     }
     get rootElement() {
         return this.template.querySelector('div');
     }
     @api
     get inputElement() {
         return this.template.querySelector('input');
     }
     get calendarButtonElement() {
         return this.template.querySelector('lightning-button-icon');
     }
-    // Lightning calendar DOM
     get lightningCalendarElement() {
         return this.template.querySelector('lightning-calendar');
     }
     get isReflowResizeActivated() {
-        return (
-            this.lightningCalendarElement &&
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
+        return (this.lightningCalendarElement &&
             window.innerWidth < 641 &&
             formFactor === 'Large' &&
-            orgHasA11yResizeReflow
-        );
+            orgHasA11yResizeReflow);
     }
     dispatchChangeEvent() {
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-            new CustomEvent('change', {
-                composed: true,
-                bubbles: true,
-                detail: {
-                    value: this._value,
-                },
-            })
-        );
+        this.dispatchEvent(new CustomEvent('change', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                value: this._value,
+            },
+        }));
     }
     datepickerKeyboardInterface() {
         const that = this;
         return {
@@ -983,15 +745,11 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             },
         };
     }
     get hasExternalLabel() {
-        return (
-            this.variant === VARIANT.LABEL_HIDDEN &&
+        return (this.variant === VARIANT.LABEL_HIDDEN &&
             this.ariaLabelledByElement &&
-            this.ariaLabelledByElement.length
-        );
+            this.ariaLabelledByElement.length);
     }
     get computedAriaInvalid() {
         const dataAriaInvalid = !import.meta.env.SSR
             ? this.template.host.getAttribute('data-aria-invalid')
@@ -999,7 +757,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         const isAriaInvalid = dataAriaInvalid || this._errorMessage;
         return computeAriaInvalid(isAriaInvalid, this.hasBadInput() || '');
     }
     get helptextAlternativeText() {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }