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/datetimepicker/datetimepicker.js CHANGED Viewed

@@ -14,27 +14,10 @@ import sfTimeZone from '@salesforce/i18n/timeZone';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
-import {
-    normalizeBoolean,
-    synchronizeAttrs,
-    computeAriaInvalid,
-    reflectAttribute,
-} from 'lightning/utilsPrivate';
-import {
-    getCurrentTimeString,
-    normalizeISODateTime,
-    normalizeFormattedDateTime,
-    isAuraL10NAvailable,
-    normalizeISODate,
-} from 'lightning/internationalizationLibrary';
+import { normalizeBoolean, synchronizeAttrs, computeAriaInvalid, reflectAttribute, } from 'lightning/utilsPrivate';
+import { getCurrentTimeString, normalizeISODateTime, normalizeFormattedDateTime, isAuraL10NAvailable, normalizeISODate, } from 'lightning/internationalizationLibrary';
 import { TIME_SEPARATOR } from 'lightning/iso8601Utils';
-import {
-    generateUniqueId,
-    InteractingState,
-    normalizeVariant,
-    VARIANT,
-} from 'lightning/inputUtils';
+import { generateUniqueId, InteractingState, normalizeVariant, VARIANT, } from 'lightning/inputUtils';
 const i18n = {
     date: labelDate,
     rangeOverflow: labelRangeOverflow,
@@ -45,137 +28,120 @@ const i18n = {
     customErrorWithDateFormat: labelCustomErrorWithDateFormat,
 };
 const DATE_EXAMPLE = '2024-12-31';
 export default class LightningDateTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
     _rendered = false;
     _messageWhenValueMissing;
     connected = false;
-    @track _disabled = false;
-    @track _readonly = false;
-    @track _required = false;
-    @track _fieldLevelHelp;
-    @track _variant;
-    @track _value = null;
-    @track _customErrorMessage = '';
-    @track _timezone = null;
-    @track _dateMin;
-    @track _dateMax;
-    @api label;
-    @api name;
-    @api placeholder = '';
-    @api dateStyle;
-    @api timeStyle;
-    @api timeAriaLabel;
-    @api ariaDisabled;
-    @api rootAriaNode;
-    /**
-     * Specifies the time interval in minutes for the dropdown options.
-     * Any positive integer above or equal to 5 is valid.
-     * The default is 15 minutes.
-     * @type {number}
-     * @default 15
-     */
-    @api timeStepMinutes;
-    /**
-     * 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 dropdowns.
-     * @type {string}
-     */
-    @api autocomplete = 'off';
-    // getters and setters necessary to trigger sync
+    @track
+    _disabled = false;
+    @track
+    _readonly = false;
+    @track
+    _required = false;
+    @track
+    _fieldLevelHelp;
+    @track
+    _variant;
+    @track
+    _value = null;
+    @track
+    _customErrorMessage = '';
+    @track
+    _timezone = null;
+    @track
+    _dateMin;
+    @track
+    _dateMax;
+    @api
+    label;
+    @api
+    name;
+    @api
+    placeholder = '';
+    @api
+    dateStyle;
+    @api
+    timeStyle;
+    @api
+    timeAriaLabel;
+    @api
+    ariaDisabled;
+    @api
+    rootAriaNode;
+    @api
+    timeStepMinutes;
+    @api
+    autocomplete = 'off';
     set timeAriaControls(val) {
         this._timeAriaControls = val;
         this.synchronizeA11y();
     }
     @api
     get timeAriaControls() {
         return this._timeAriaControls;
     }
-    // getters and setters necessary to trigger sync
     set timeAriaDetails(val) {
         this._timeAriaDetails = val;
         this.synchronizeA11y();
     }
     @api
     get timeAriaDetails() {
         return this._timeAriaDetails;
     }
     set timeAriaLabelledBy(val) {
         this._timeAriaLabelledBy = val;
         this.synchronizeA11y();
     }
     @api
     get timeAriaLabelledBy() {
         return this._timeAriaLabelledBy;
     }
     set timeAriaDescribedBy(val) {
         this._timeAriaDescribedBy = val;
         this.synchronizeA11y();
     }
     @api
     get timeAriaDescribedBy() {
         return this._timeAriaDescribedBy;
     }
-    @api dateAriaControls;
-    @api dateAriaDetails;
-    @api dateAriaLabel;
-    @api dateAriaLabelledBy;
-    @api dateAriaDescribedBy;
-    @api dateAccessKey;
-    @api timeAccessKey;
-    @api dateAriaErrorMessage;
-    @api timeAriaErrorMessage;
+    @api
+    dateAriaControls;
+    @api
+    dateAriaDetails;
+    @api
+    dateAriaLabel;
+    @api
+    dateAriaLabelledBy;
+    @api
+    dateAriaDescribedBy;
+    @api
+    dateAccessKey;
+    @api
+    timeAccessKey;
+    @api
+    dateAriaErrorMessage;
+    @api
+    timeAriaErrorMessage;
     @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
-            );
-        } else if (this.hasBadDateInput) {
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenBadInput, this.dateFormatExample);
+        }
+        else if (this.hasBadDateInput) {
             return this.getDatepicker().messageWhenBadInput;
-        } else if (this.hasBadTimeInput) {
+        }
+        else if (this.hasBadTimeInput) {
             return this.getTimepicker().messageWhenBadInput;
         }
         return null;
@@ -183,39 +149,26 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     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(i18n.rangeOverflow, this.formattedMax);
     }
     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(i18n.rangeUnderflow, this.formattedMin);
     }
     set messageWhenRangeUnderflow(message) {
         this._messageWhenRangeUnderflow = message;
     }
     @api
     get max() {
         return this.maxValue;
@@ -224,7 +177,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         this.maxValue = newValue;
         this.calculateFormattedMaxValue();
     }
     @api
     get min() {
         return this.minValue;
@@ -233,21 +185,18 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         this.minValue = newValue;
         this.calculateFormattedMinValue();
     }
     @api
     get value() {
         return this._value;
     }
     set value(newValue) {
-        // This is required to ensure the value is not set on the element SSR pre-hydration (@W-12680613)
         if (this.connected) {
             this.setDateAndTimeValues(newValue);
-        } else {
-            // we set the values in connectedCallback to make sure timezone is available.
+        }
+        else {
             this._initialValue = newValue;
         }
     }
     @api
     get timezone() {
         return this._timezone;
@@ -258,21 +207,15 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
             this.updateValuesForTimezone();
         }
     }
-    /**
-     * Returns time zone if one is set, otherwise returns
-     * the Salesforce time zone when Aura localization is
-     * available, and the system's time zone otherwise
-     */
     get normalizedTimezone() {
         if (this.timezone) {
             return this.timezone;
-        } else if (isAuraL10NAvailable) {
+        }
+        else if (isAuraL10NAvailable) {
             return sfTimeZone;
         }
         return new Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
     @api
     get disabled() {
         return this._disabled;
@@ -280,7 +223,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     set disabled(value) {
         this._disabled = normalizeBoolean(value);
     }
     @api
     get readOnly() {
         return this._readonly;
@@ -288,7 +230,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     set readOnly(value) {
         this._readonly = normalizeBoolean(value);
     }
     @api
     get required() {
         return this._required;
@@ -296,49 +237,32 @@ export default class LightningDateTimePicker 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', this._variant);
     }
-    /**
-     * The child date and time picker components should have the standard variant, unless variant is label-hidden
-     * See W-15101132
-     */
     get childVariant() {
         return this._variant === VARIANT.LABEL_HIDDEN
             ? this._variant
             : VARIANT.STANDARD;
     }
-    /**
-     * Sets focus on the date input element.
-     */
     @api
     focus() {
         if (this.connected) {
             this.getDatepicker().focus();
         }
     }
-    /**
-     * Removes keyboard focus from the input elements.
-     */
     @api
     blur() {
         if (this.connected) {
@@ -346,72 +270,51 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
             this.getTimepicker().blur();
         }
     }
     @api
     hasBadInput() {
         return this.connected && (this.hasBadDateInput || this.hasBadTimeInput);
     }
     get hasBadDateInput() {
         return this.getDatepicker()?.hasBadInput();
     }
     get hasMissingDateTimeInput() {
         return this.required && (!this._dateValue || !this._timeValue);
     }
     get hasBadTimeInput() {
         const timeBadInput = this.getTimepicker()?.hasBadInput();
-        const timeMissing =
-            this.required && this._dateValue && !this._timeValue;
+        const timeMissing = this.required && this._dateValue && !this._timeValue;
         return timeMissing || timeBadInput;
     }
     @api
     showHelpMessage(message) {
         if (!this.connected) {
             return;
         }
         if (!message) {
             this.clearHelpMessage();
             return;
         }
         if (this.hasMissingDateTimeInput) {
             this.clearHelpMessage();
             reflectAttribute(this.getDatepicker(), 'invalid', true);
             reflectAttribute(this.getTimeCombobox(), 'invalid', true);
         }
         if (this.hasBadDateInput && !this._messageWhenBadInput) {
             this.clearHelpMessage();
-            reflectAttribute(
-                this.getDatepicker(),
-                'invalid',
-                this.hasBadDateInput
-            );
+            reflectAttribute(this.getDatepicker(), 'invalid', this.hasBadDateInput);
             this.getDatepicker().showHelpMessage(message);
             return;
         }
         if (this.hasBadTimeInput && !this._messageWhenBadInput) {
             this.clearHelpMessage();
-            reflectAttribute(
-                this.getTimepicker(),
-                'invalid',
-                this.hasBadTimeInput
-            );
+            reflectAttribute(this.getTimepicker(), 'invalid', this.hasBadTimeInput);
             reflectAttribute(this.getTimeCombobox(), 'invalid', true);
             this.getTimepicker().showHelpMessage(message);
             return;
         }
         this.classList.add('slds-has-error');
         this._customErrorMessage = message;
     }
     clearHelpMessage() {
         this.classList.remove('slds-has-error');
         this._customErrorMessage = '';
@@ -421,59 +324,45 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         this.getTimepicker().removeAttribute('invalid');
         this.getTimeCombobox().removeAttribute('invalid');
     }
     get isLabelHidden() {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
     get computedLabelClass() {
         return classSet('slds-form-element__legend slds-form-element__label')
             .add({ 'slds-assistive-text': this.isLabelHidden })
             .toString();
     }
     get dateFormatExample() {
         return normalizeISODate(DATE_EXAMPLE, this.dateStyle).displayValue;
     }
     get i18n() {
         return i18n;
     }
     get customErrorMessage() {
         return this._customErrorMessage;
     }
     get dateMin() {
         return this._dateMin;
     }
     get dateMax() {
         return this._dateMax;
     }
     get errorMessageElement() {
         return !import.meta.env.SSR
             ? this.template.querySelector('[data-error-message]')
             : null;
     }
     get hasExternalLabel() {
-        return (
-            this.variant === VARIANT.LABEL_HIDDEN &&
+        return (this.variant === VARIANT.LABEL_HIDDEN &&
             this.timeAriaLabelledBy &&
             this.timeAriaLabelledBy.length &&
             this.dateAriaLabelledBy &&
-            this.dateAriaLabelledBy.length
-        );
+            this.dateAriaLabelledBy.length);
     }
     constructor() {
         super();
         this.uniqueId = generateUniqueId();
     }
     synchronizeA11y() {
         if (import.meta.env.SSR) {
             return;
@@ -488,12 +377,9 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
                 ariaDetailsElements: this.dateAriaDetails,
                 'aria-label': this.dateAriaLabel,
                 ariaErrorMessageElement: this.dateAriaErrorMessage,
-                // Separate attribute; passing in ID doesn't work in NS
-                // So we need an attribute to pass in the actual element
                 parentErrorMessageElement: this.errorMessageElement,
             });
         }
         if (timepicker) {
             synchronizeAttrs(timepicker, {
                 ariaLabelledByElement: this.timeAriaLabelledBy,
@@ -505,29 +391,20 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
             });
         }
     }
     connectedCallback() {
         super.connectedCallback();
         this.connected = true;
-        // we set the initial values here in order to make sure timezone is available.
         this.updateValuesForTimezone(this._initialValue);
         this.interactingState = new InteractingState({
             debounceInteraction: true,
         });
         this.interactingState.onenter(() => {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         });
         this.interactingState.onleave(() => {
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('blur'));
         });
     }
     renderedCallback() {
         if (!this._rendered) {
             this.updateValuesForTimezone(this.value);
@@ -535,67 +412,47 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         }
         this.synchronizeA11y();
     }
     disconnectedCallback() {
         this._rendered = false;
         this.connected = false;
     }
     getTimepicker() {
-        /**
-         * Checking the component is rendered is required in the SSR context to ensure that
-         * the client does not select the element before it has been hydrated (@W-12680613)
-         */
         return this._rendered
             ? this.template.querySelector('lightning-timepicker')
             : null;
     }
     @api
     getTimeCombobox() {
         return this._rendered
-            ? this.getTimepicker().shadowRoot.querySelector(
-                  'lightning-base-combobox'
-              )
+            ? this.getTimepicker().shadowRoot.querySelector('lightning-base-combobox')
             : null;
     }
     @api
     getDatepicker() {
         return this._rendered
             ? this.template.querySelector('lightning-datepicker')
             : null;
     }
     handleDatepickerFocus() {
         this._dateFocus = true;
         this.interactingState.enter();
     }
     handleTimepickerFocus() {
         this._timeFocus = true;
         this.interactingState.enter();
     }
     handleDatepickerBlur() {
         this._dateFocus = false;
-        // timepicker fires focus before datepicker fires blur
         if (!this._timeFocus) {
             this.interactingState.leave();
         }
     }
     handleTimepickerBlur() {
         this._timeFocus = false;
-        // datepicker fires focus before timepicker fires blur
         if (!this._dateFocus) {
             this.interactingState.leave();
         }
     }
     handleDateChange(event) {
         event.stopPropagation();
         if (!event.detail) {
@@ -605,146 +462,103 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         if (this._dateValue) {
             this._timeValue =
                 this._timeValue ||
-                getCurrentTimeString(this.normalizedTimezone);
+                    getCurrentTimeString(this.normalizedTimezone);
             this.setTimepickerValue(this._timeValue);
         }
         this.updateValue();
     }
     handleTimeChange(event) {
         event.stopPropagation();
         if (!event.detail) {
             return;
         }
         this._timeValue = event.detail.value;
         this.updateValue();
     }
     updateValue() {
         const dateValue = this._dateValue;
         const timeValue = this._timeValue;
         if (dateValue && timeValue) {
             const dateTimeString = dateValue + TIME_SEPARATOR + timeValue;
-            this._value = normalizeFormattedDateTime(
-                dateTimeString,
-                this.normalizedTimezone
-            );
+            this._value = normalizeFormattedDateTime(dateTimeString, this.normalizedTimezone);
             this.dispatchChangeEvent();
-        } else if (!dateValue) {
+        }
+        else if (!dateValue) {
             this._value = null;
             this.dispatchChangeEvent();
         }
     }
     dispatchChangeEvent() {
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                composed: true,
-                bubbles: true,
-                detail: {
-                    value: this._value,
-                },
-            })
-        );
-    }
+        this.dispatchEvent(new CustomEvent('change', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                value: this._value,
+            },
+        }));
+    }
     updateValuesForTimezone(datetimeValue) {
         this.setDateAndTimeValues(datetimeValue || this._value);
         this.calculateFormattedMinValue();
         this.calculateFormattedMaxValue();
     }
     setDateAndTimeValues(value) {
-        const normalizedValue = normalizeISODateTime(
-            value,
-            this.normalizedTimezone
-        ).isoValue;
+        const normalizedValue = normalizeISODateTime(value, this.normalizedTimezone).isoValue;
         const isDateOnly = normalizedValue && value.indexOf(TIME_SEPARATOR) < 0;
         if (isDateOnly) {
             this._dateValue = value;
             this._value = this._dateValue;
             this.setDatepickerValue(value);
             return;
         }
         const dateAndTime = this.separateDateTime(normalizedValue);
         this._dateValue = dateAndTime && dateAndTime[0];
         this._timeValue = dateAndTime && dateAndTime[1];
         this._value = value;
         this.setDatepickerValue(this._dateValue);
         this.setTimepickerValue(this._timeValue);
     }
     setDatepickerValue(value) {
         const datepicker = this.getDatepicker();
         if (datepicker) {
             datepicker.value = value;
         }
     }
     setTimepickerValue(value) {
         const timepicker = this.getTimepicker();
         if (timepicker) {
             timepicker.value = value;
         }
     }
     calculateFormattedMinValue() {
         if (!this.min) {
             return;
         }
-        const normalizedDate = normalizeISODateTime(
-            this.min,
-            this.normalizedTimezone
-        );
+        const normalizedDate = normalizeISODateTime(this.min, this.normalizedTimezone);
         this._dateMin = this.separateDateTime(normalizedDate.isoValue)[0];
         this.formattedMin = normalizedDate.displayValue;
     }
     calculateFormattedMaxValue() {
         if (!this.max) {
             return;
         }
-        const normalizedDate = normalizeISODateTime(
-            this.max,
-            this.normalizedTimezone
-        );
+        const normalizedDate = normalizeISODateTime(this.max, this.normalizedTimezone);
         this._dateMax = this.separateDateTime(normalizedDate.isoValue)[0];
         this.formattedMax = normalizedDate.displayValue;
     }
     separateDateTime(isoString) {
         return typeof isoString === 'string'
             ? isoString.split(TIME_SEPARATOR)
             : null;
     }
     get computedDateAriaInvalid() {
-        return (
-            computeAriaInvalid(this._customErrorMessage, this._dateValue) ||
-            undefined
-        );
+        return (computeAriaInvalid(this._customErrorMessage, this._dateValue) ||
+            undefined);
     }
     get computedTimeAriaInvalid() {
-        return (
-            computeAriaInvalid(this._customErrorMessage, this._timeValue) ||
-            undefined
-        );
+        return (computeAriaInvalid(this._customErrorMessage, this._timeValue) ||
+            undefined);
     }
     get helptextAlternativeText() {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }