@vonage/vivid 5.15.1 → 5.17.0

package/date-range-picker/definition.cjs

@@ -1,467 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const button_definition = require('../unbundled/definition2.cjs');
-const popup_definition = require('../unbundled/definition5.cjs');
-const textField_definition = require('../text-field/definition.cjs');
-const divider_definition = require('../divider/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const pickerField_template = require('../unbundled/picker-field.template.cjs');
-const calendarPicker_template = require('../unbundled/calendar-picker.template.cjs');
-const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-
-const formatRange = (from, to) => {
-  return `${from} – ${to}`;
-};
-const formatPresentationDateRange = (dateRange, locale) => {
-  return formatRange(
-    calendarPicker_template.formatPresentationDate(dateRange.start, locale),
-    calendarPicker_template.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) => calendarPicker_template.parsePresentationDate(fragment, locale)
-  );
-  return { start, end };
-};
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-function isDefined(value) {
-  return !!value;
-}
-class DateRangePicker extends calendarPicker_template.MinMaxCalendarPicker(
-  calendarPicker_template.CalendarPicker(pickerField_template.PickerField)
-) {
-  constructor() {
-    super(...arguments);
-    this.initialStart = "";
-    this.initialEnd = "";
-    this.#isInternalValueUpdate = false;
-    this.start = "";
-    this.end = "";
-    /**
-     * @internal
-     */
-    this.setFormValue = (value, state) => {
-      if (isFormAssociatedTryingToSetFormValue(value)) {
-        return;
-      }
-      super.setFormValue(value, state);
-    };
-    this._numCalendars = 2;
-    /**
-     * @internal
-     */
-    this._hideDatesOutsideMonth = true;
-    /**
-     * @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 && !calendarPicker_template.isValidDateStr(this.start)) {
-      this.start = "";
-      return;
-    }
-    this.currentStart = this.start;
-    this.dirtyValue = true;
-    if (!this.#isInternalValueUpdate) {
-      this.#handleChangedValues();
-    }
-  }
-  /**
-   * @internal
-   */
-  endChanged() {
-    if (this.end && !calendarPicker_template.isValidDateStr(this.end)) {
-      this.end = "";
-      return;
-    }
-    this.currentEnd = this.end;
-    this.dirtyValue = true;
-    if (!this.#isInternalValueUpdate) {
-      this.#handleChangedValues();
-    }
-  }
-  /**
-   * @internal
-   */
-  currentStartChanged() {
-    this.start = this.currentStart;
-  }
-  /**
-   * @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 (calendarPicker_template.compareDateStr(this.start, this.end) > 0) {
-        this.#updateValues({ start: this.end, end: this.start });
-        return;
-      }
-      this.value = formatRange(this.start, this.end);
-    } else {
-      this.value = "";
-    }
-    this._updatePresentationValue();
-    const dateToEnsureVisibilityOf = this.start || this.end;
-    if (dateToEnsureVisibilityOf) {
-      this._adjustSelectedMonthToEnsureVisibilityOf(dateToEnsureVisibilityOf);
-    }
-    this.#updateFormValue();
-  }
-  /**
-   * @internal
-   */
-  _updatePresentationValue() {
-    if (this.start && this.end) {
-      this._presentationValue = formatPresentationDateRange(
-        {
-          start: this.start,
-          end: this.end
-        },
-        this.locale.calendarPicker
-      );
-    } else {
-      this._presentationValue = "";
-    }
-  }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    this.#updateFormValue();
-  }
-  #updateFormValue() {
-    if (!this.name || !this.start || !this.end) {
-      this.setFormValue(null);
-    } else {
-      const formData = new FormData();
-      formData.append(this.name, this.start);
-      formData.append(this.name, this.end);
-      this.setFormValue(formData);
-    }
-  }
-  /**
-   * @internal
-   */
-  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);
-    }
-    const [start, end] = candidates.sort(calendarPicker_template.compareDateStr);
-    return { start, end };
-  }
-  /**
-   * @internal
-   */
-  _isDateAriaSelected(date) {
-    return this._isDateInSelectedRange(date);
-  }
-  /**
-   * @internal
-   */
-  _isDateInSelectedRange(date) {
-    const { start, end } = this.#getVisibleRange();
-    if (start && end) {
-      return calendarPicker_template.compareDateStr(date, start) >= 0 && calendarPicker_template.compareDateStr(date, end) <= 0;
-    }
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeStart(date) {
-    return date === this.#getVisibleRange().start;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeEnd(date) {
-    return date === this.#getVisibleRange().end;
-  }
-  /**
-   * @internal
-   */
-  _getSelectedDates() {
-    const dates = [];
-    if (this.start) {
-      dates.push(this.start);
-    }
-    if (this.end) {
-      dates.push(this.end);
-    }
-    return dates;
-  }
-  /**
-   * @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 });
-    }
-  }
-  /**
-   * @internal
-   */
-  get _textFieldPlaceholder() {
-    return formatRange(
-      this.locale.calendarPicker.dateFormatPlaceholder,
-      this.locale.calendarPicker.dateFormatPlaceholder
-    );
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldChange() {
-    if (this._presentationValue === "") {
-      this.#updateValues({ start: "", end: "" });
-      return;
-    }
-    try {
-      const { start, end } = parsePresentationDateRange(
-        this._presentationValue,
-        this.locale.calendarPicker
-      );
-      this.#updateValues({ start, end });
-    } catch (_) {
-      const invalidPresentationValue = this._presentationValue;
-      this.#updateValues({ start: "", end: "" });
-      this._presentationValue = invalidPresentationValue;
-      return;
-    }
-  }
-  /**
-   * @internal
-   */
-  _onDateMouseEnter(date) {
-    this._hoverDate = date;
-  }
-  /**
-   * @internal
-   */
-  _onDateMouseLeave() {
-    this._hoverDate = void 0;
-  }
-  /**
-   * @internal
-   */
-  _getCustomValidationError() {
-    if (this._isPresentationValueInvalid()) {
-      return this.locale.calendarPicker.invalidDateRangeError;
-    }
-    if (this.min && this.start && calendarPicker_template.compareDateStr(this.start, this.min) < 0) {
-      return this.locale.calendarPicker.startDateAfterMinDateError(
-        calendarPicker_template.formatPresentationDate(this.min, this.locale.calendarPicker)
-      );
-    }
-    if (this.max && this.end && calendarPicker_template.compareDateStr(this.end, this.max) > 0) {
-      return this.locale.calendarPicker.endDateBeforeMaxDateError(
-        calendarPicker_template.formatPresentationDate(this.max, this.locale.calendarPicker)
-      );
-    }
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _isPresentationValueInvalid() {
-    if (this._presentationValue === "") {
-      return false;
-    }
-    try {
-      parsePresentationDateRange(
-        this._presentationValue,
-        this.locale.calendarPicker
-      );
-      return false;
-    } catch (_) {
-      return true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _onClearClick() {
-    this.#updateValues({ start: "", end: "" });
-    super._onClearClick();
-  }
-  /**
-   * @internal
-   */
-  formResetCallback() {
-    this.#updateValues({ start: this.initialStart, end: this.initialEnd });
-    super.formResetCallback();
-  }
-  get _pickerButtonLabel() {
-    if (this.start && this.end) {
-      return this.locale.calendarPicker.changeDatesLabel(
-        formatPresentationDateRange(
-          {
-            start: this.start,
-            end: this.end
-          },
-          this.locale.calendarPicker
-        )
-      );
-    } else {
-      return this.locale.calendarPicker.chooseDatesLabel;
-    }
-  }
-  /**
-   * @internal
-   */
-  get _dialogLabel() {
-    return this.locale.calendarPicker.chooseDatesLabel;
-  }
-  /**
-   * @internal
-   */
-  _focusableElsWithinDialog() {
-    return this._dialogEl.querySelectorAll(
-      "button, .vwc-button"
-    );
-  }
-  /**
-   * @internal
-   */
-  get _pickerButtonIcon() {
-    return "calendar-line";
-  }
-}
-__decorateClass([
-  fastElement.attr({ mode: "fromView", attribute: "start" })
-], DateRangePicker.prototype, "initialStart", 2);
-__decorateClass([
-  fastElement.attr({ mode: "fromView", attribute: "end" })
-], DateRangePicker.prototype, "initialEnd", 2);
-__decorateClass([
-  fastElement.observable
-], DateRangePicker.prototype, "start", 2);
-__decorateClass([
-  fastElement.observable
-], DateRangePicker.prototype, "end", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "current-start" })
-], DateRangePicker.prototype, "currentStart", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "current-end" })
-], DateRangePicker.prototype, "currentEnd", 2);
-__decorateClass([
-  fastElement.observable
-], DateRangePicker.prototype, "_numCalendars", 2);
-__decorateClass([
-  fastElement.observable
-], DateRangePicker.prototype, "_hoverDate", 2);
-__decorateClass([
-  fastElement.volatile
-], DateRangePicker.prototype, "_pickerButtonLabel", 1);
-
-const DateRangePickerTemplate = (context) => {
-  return pickerField_template.PickerFieldTemplate(context, calendarPicker_template.CalendarPickerTemplate(context), {
-    withSeparator: false,
-    padded: true
-  });
-};
-
-const dateRangePickerDefinition = vividElement.defineVividComponent(
-  "date-range-picker",
-  DateRangePicker,
-  DateRangePickerTemplate,
-  [
-    button_definition.buttonDefinition,
-    popup_definition.popupDefinition,
-    textField_definition.textFieldDefinition,
-    divider_definition.dividerDefinition,
-    visuallyHidden_definition.visuallyHiddenDefinition
-  ],
-  {
-    styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles],
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerDateRangePicker = vividElement.createRegisterFunction(
-  dateRangePickerDefinition
-);
-
-exports.VwcDateRangePickerElement = DateRangePicker;
-exports.dateRangePickerDefinition = dateRangePickerDefinition;
-exports.registerDateRangePicker = registerDateRangePicker;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition36.cjs");
+exports.VwcDateRangePickerElement = require_definition$1.DateRangePicker;
+exports.dateRangePickerDefinition = require_definition$1.dateRangePickerDefinition;
+exports.registerDateRangePicker = require_definition$1.registerDateRangePicker;