@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition18.js

@@ -1,28 +1,13 @@
-import { a as attr, o as observable, v as volatile, r as registerFactory } from './index.js';
-import { a as buttonRegistries } from './definition10.js';
-import { p as popupRegistries } from './definition59.js';
-import { a as textFieldRegistries } from './definition52.js';
-import { f as focusRegistries } from './definition57.js';
-import { a as dividerRegistries } from './definition20.js';
-import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
+import { v as volatile, r as registerFactory } from './index.js';
+import { p as popupRegistries } from './definition60.js';
+import { f as focusRegistries } from './definition58.js';
+import { a as buttonRegistries } from './definition11.js';
+import { a as textFieldRegistries } from './definition53.js';
+import { a as dividerRegistries } from './definition21.js';
+import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
 import './affix.js';
 import { e as errorText, f as formElements } from './index2.js';
 
-const formatRange = (from, to) => {
-  return `${from} – ${to}`;
-};
-const formatPresentationDateRange = (dateRange, locale) => {
-  return formatRange(formatPresentationDate(dateRange.start, locale), formatPresentationDate(dateRange.end, locale));
-};
-const parsePresentationDateRange = (presentationDateRange, locale) => {
-  const fragments = presentationDateRange.trim().split(/[\s—–-]+/);
-  if (fragments.length !== 2) {
-    throw new Error(`Invalid date range: ${presentationDateRange}`);
-  }
-  const [start, end] = fragments.map((fragment) => parsePresentationDate(fragment, locale));
-  return { start, end };
-};
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -34,279 +19,104 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-function isDefined(value) {
-  return !!value;
-}
-let DateRangePicker = class extends DatePickerBase {
+let DatePicker = class extends DatePickerBase {
   constructor() {
-    super(...arguments);
-    this.initialStart = "";
-    this.initialEnd = "";
-    this.#isInternalValueUpdate = false;
-    this.start = "";
-    this.end = "";
-    this.setFormValue = (value, state) => {
-      if (isFormAssociatedTryingToSetFormValue(value)) {
-        return;
-      }
-      super.setFormValue(value, state);
-    };
-    this._numCalendars = 2;
-    /**
-     * @internal
-     */
-    this._hideDatesOutsideMonth = true;
+    super();
     /**
      * @internal
      */
-    this._textFieldSize = "30";
-  }
-  /**
-   * @internal
-   */
-  initialStartChanged() {
-    if (!this.dirtyValue) {
-      this.start = this.initialStart;
-      this.dirtyValue = false;
-    }
-  }
-  /**
-   * @internal
-   */
-  initialEndChanged() {
-    if (!this.dirtyValue) {
-      this.end = this.initialEnd;
-      this.dirtyValue = false;
-    }
-  }
-  #isInternalValueUpdate;
-  /**
-   * @internal
-   */
-  startChanged() {
-    if (this.start && !isValidDateStr(this.start)) {
-      this.start = "";
-      return;
-    }
-    this.currentStart = this.start;
-    this.dirtyValue = true;
-    if (!this.#isInternalValueUpdate) {
-      this.#handleChangedValues();
-    }
-  }
-  /**
-   * @internal
-   */
-  endChanged() {
-    if (this.end && !isValidDateStr(this.end)) {
-      this.end = "";
-      return;
-    }
-    this.currentEnd = this.end;
-    this.dirtyValue = true;
-    if (!this.#isInternalValueUpdate) {
-      this.#handleChangedValues();
-    }
-  }
-  /**
-   * @internal
-   */
-  currentStartChanged() {
-    this.start = this.currentStart;
+    this._textFieldSize = "20";
+    this.proxy.type = "date";
   }
   /**
    * @internal
    */
-  currentEndChanged() {
-    this.end = this.currentEnd;
-  }
-  #updateValues(range) {
-    this.#isInternalValueUpdate = true;
-    if (range.start !== void 0) {
-      this.start = range.start;
-      this.$emit("input:start");
-    }
-    if (range.end !== void 0) {
-      this.end = range.end;
-      this.$emit("input:end");
-    }
-    this.#isInternalValueUpdate = false;
-    this.$emit("input");
-    this.$emit("change");
-    this.#handleChangedValues();
-  }
-  #handleChangedValues() {
-    if (this.start && this.end) {
-      if (compareDateStr(this.start, this.end) > 0) {
-        this.#updateValues({ start: this.end, end: this.start });
+  valueChanged(previous, next) {
+    super.valueChanged(previous, next);
+    if (this.value) {
+      if (!isValidDateStr(this.value)) {
+        this.value = "";
         return;
       }
-      this._presentationValue = formatPresentationDateRange(
-        {
-          start: this.start,
-          end: this.end
-        },
+      this._presentationValue = formatPresentationDate(
+        this.value,
         this.locale.datePicker
       );
-      this.value = formatRange(this.start, this.end);
+      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
     } else {
-      this.value = "";
       this._presentationValue = "";
     }
-    const dateToEnsureVisibilityOf = this.start || this.end;
-    if (dateToEnsureVisibilityOf) {
-      this._adjustSelectedMonthToEnsureVisibilityOf(dateToEnsureVisibilityOf);
-    }
-    this.#updateFormValue();
   }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    this.#updateFormValue();
+  #updateValueDueToUserInteraction(newValue) {
+    this.value = newValue;
+    this.$emit("change");
+    this.$emit("input");
   }
-  #updateFormValue() {
-    if (!this.name || !this.start || !this.end) {
-      this.setFormValue(null);
+  get _calendarButtonLabel() {
+    if (this.value) {
+      return this.locale.datePicker.changeDateLabel(formatPresentationDate(this.value, this.locale.datePicker));
     } else {
-      const formData = new FormData();
-      formData.append(this.name, this.start);
-      formData.append(this.name, this.end);
-      this.setFormValue(formData);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.start) {
-      this.start = this.initialStart;
-    }
-    if (!this.end) {
-      this.end = this.initialEnd;
-    }
-  }
-  #getVisibleRange() {
-    const candidates = [this.start, this.end].filter(isDefined);
-    const isPartialRange = candidates.length === 1;
-    if (this._hoverDate && isPartialRange) {
-      candidates.push(this._hoverDate);
+      return this.locale.datePicker.chooseDateLabel;
     }
-    const [start, end] = candidates.sort(compareDateStr);
-    return { start, end };
   }
   /**
    * @internal
    */
-  _isDateAriaSelected(date) {
-    return date === this.start || date === this.end;
-  }
-  /**
-   * @internal
-   */
-  _isDateInSelectedRange(date) {
-    const { start, end } = this.#getVisibleRange();
-    if (start && end) {
-      return compareDateStr(date, start) >= 0 && compareDateStr(date, end) <= 0;
-    }
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeStart(date) {
-    return date === this.#getVisibleRange().start;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeEnd(date) {
-    return date === this.#getVisibleRange().end;
+  get _textFieldPlaceholder() {
+    return this.locale.datePicker.dateFormatPlaceholder;
   }
   /**
    * @internal
    */
-  _getSelectedDates() {
-    const dates = [];
-    if (this.start) {
-      dates.push(this.start);
+  _onTextFieldChange() {
+    if (this._presentationValue === "") {
+      this.#updateValueDueToUserInteraction("");
+      return;
     }
-    if (this.end) {
-      dates.push(this.end);
+    try {
+      this.#updateValueDueToUserInteraction(
+        parsePresentationDate(this._presentationValue, this.locale.datePicker)
+      );
+    } catch (_) {
+      return;
     }
-    return dates;
   }
   /**
+   * Handle selecting a date from the calendar.
    * @internal
    */
   _onDateClick(date) {
-    if (this.start && this.end) {
-      this.#updateValues({ start: date, end: "" });
-    } else if (this.start) {
-      this.#updateValues({ end: date });
-      this._closePopup();
-    } else if (this.end) {
-      this.#updateValues({ start: date });
-      this._closePopup();
-    } else {
-      this.#updateValues({ start: date });
-    }
+    this.#updateValueDueToUserInteraction(date);
+    this._closePopup();
   }
   /**
    * @internal
    */
-  get _textFieldPlaceholder() {
-    return formatRange(
-      this.locale.datePicker.dateFormatPlaceholder,
-      this.locale.datePicker.dateFormatPlaceholder
-    );
+  _isDateSelected(date) {
+    return date === this.value;
   }
   /**
    * @internal
    */
-  _onTextFieldChange() {
-    if (this._presentationValue === "") {
-      this.#updateValues({ start: "", end: "" });
-      return;
-    }
-    try {
-      const { start, end } = parsePresentationDateRange(
-        this._presentationValue,
-        this.locale.datePicker
-      );
-      this.#updateValues({ start, end });
-    } catch (_) {
-      return;
-    }
-  }
-  /**
-   * @internal
-   */
-  _onDateMouseEnter(date) {
-    this._hoverDate = date;
+  _isDateAriaSelected(date) {
+    return this._isDateSelected(date);
   }
   /**
    * @internal
    */
-  _onDateMouseLeave() {
-    this._hoverDate = void 0;
+  _getSelectedDates() {
+    const dates = [];
+    if (this.value) {
+      dates.push(this.value);
+    }
+    return dates;
   }
   /**
    * @internal
    */
   _getCustomValidationError() {
     if (this._isPresentationValueInvalid()) {
-      return this.locale.datePicker.invalidDateRangeError;
-    }
-    if (this.min && this.start && compareDateStr(this.start, this.min) < 0) {
-      return this.locale.datePicker.startDateAfterMinDateError(
-        formatPresentationDate(this.min, this.locale.datePicker)
-      );
-    }
-    if (this.max && this.end && compareDateStr(this.end, this.max) > 0) {
-      return this.locale.datePicker.endDateBeforeMaxDateError(
-        formatPresentationDate(this.max, this.locale.datePicker)
-      );
+      return this.locale.datePicker.invalidDateError;
     }
     return null;
   }
@@ -318,10 +128,7 @@ let DateRangePicker = class extends DatePickerBase {
       return false;
     }
     try {
-      parsePresentationDateRange(
-        this._presentationValue,
-        this.locale.datePicker
-      );
+      parsePresentationDate(this._presentationValue, this.locale.datePicker);
       return false;
     } catch (_) {
       return true;
@@ -331,79 +138,34 @@ let DateRangePicker = class extends DatePickerBase {
    * @internal
    */
   _onClearClick() {
-    this.#updateValues({ start: "", end: "" });
+    this.#updateValueDueToUserInteraction("");
     super._onClearClick();
   }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    this.#updateValues({ start: this.initialStart, end: this.initialEnd });
-    super.formResetCallback();
-  }
-  get _calendarButtonLabel() {
-    if (this.start && this.end) {
-      return this.locale.datePicker.changeDatesLabel(
-        formatPresentationDateRange(
-          {
-            start: this.start,
-            end: this.end
-          },
-          this.locale.datePicker
-        )
-      );
-    } else {
-      return this.locale.datePicker.chooseDatesLabel;
-    }
-  }
 };
-__decorateClass([
-  attr({ mode: "fromView", attribute: "start" })
-], DateRangePicker.prototype, "initialStart", 2);
-__decorateClass([
-  attr({ mode: "fromView", attribute: "end" })
-], DateRangePicker.prototype, "initialEnd", 2);
-__decorateClass([
-  observable
-], DateRangePicker.prototype, "start", 2);
-__decorateClass([
-  observable
-], DateRangePicker.prototype, "end", 2);
-__decorateClass([
-  attr({ attribute: "current-start" })
-], DateRangePicker.prototype, "currentStart", 2);
-__decorateClass([
-  attr({ attribute: "current-end" })
-], DateRangePicker.prototype, "currentEnd", 2);
-__decorateClass([
-  observable
-], DateRangePicker.prototype, "_numCalendars", 2);
-__decorateClass([
-  observable
-], DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
   volatile
-], DateRangePicker.prototype, "_calendarButtonLabel", 1);
-DateRangePicker = __decorateClass([
+], DatePicker.prototype, "_calendarButtonLabel", 1);
+DatePicker = __decorateClass([
   errorText,
   formElements
-], DateRangePicker);
+], DatePicker);
 
-const dateRangePickerDefinition = DateRangePicker.compose({
-  baseName: "date-range-picker",
+const datePickerDefinition = DatePicker.compose({
+  baseName: "date-picker",
   template: DatePickerBaseTemplate,
-  styles
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const dateRangePickerRegistries = [
-  dateRangePickerDefinition(),
+const datePickerRegistries = [
+  datePickerDefinition(),
   ...buttonRegistries,
   ...popupRegistries,
   ...textFieldRegistries,
   ...focusRegistries,
   ...dividerRegistries
 ];
-const registerDateRangePicker = registerFactory(
-  dateRangePickerRegistries
-);
+const registerDatePicker = registerFactory(datePickerRegistries);
 
-export { dateRangePickerRegistries as a, dateRangePickerDefinition as d, registerDateRangePicker as r };
+export { datePickerRegistries as a, datePickerDefinition as d, registerDatePicker as r };