@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition18.cjs

@@ -0,0 +1,175 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition$1 = require('./definition60.cjs');
+const definition$3 = require('./definition58.cjs');
+const definition = require('./definition11.cjs');
+const definition$2 = require('./definition53.cjs');
+const definition$4 = require('./definition21.cjs');
+const presentationDate = require('./presentationDate.cjs');
+require('./affix.cjs');
+const index$1 = require('./index2.cjs');
+
+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;
+};
+let DatePicker = class extends presentationDate.DatePickerBase {
+  constructor() {
+    super();
+    /**
+     * @internal
+     */
+    this._textFieldSize = "20";
+    this.proxy.type = "date";
+  }
+  /**
+   * @internal
+   */
+  valueChanged(previous, next) {
+    super.valueChanged(previous, next);
+    if (this.value) {
+      if (!presentationDate.isValidDateStr(this.value)) {
+        this.value = "";
+        return;
+      }
+      this._presentationValue = presentationDate.formatPresentationDate(
+        this.value,
+        this.locale.datePicker
+      );
+      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
+    } else {
+      this._presentationValue = "";
+    }
+  }
+  #updateValueDueToUserInteraction(newValue) {
+    this.value = newValue;
+    this.$emit("change");
+    this.$emit("input");
+  }
+  get _calendarButtonLabel() {
+    if (this.value) {
+      return this.locale.datePicker.changeDateLabel(presentationDate.formatPresentationDate(this.value, this.locale.datePicker));
+    } else {
+      return this.locale.datePicker.chooseDateLabel;
+    }
+  }
+  /**
+   * @internal
+   */
+  get _textFieldPlaceholder() {
+    return this.locale.datePicker.dateFormatPlaceholder;
+  }
+  /**
+   * @internal
+   */
+  _onTextFieldChange() {
+    if (this._presentationValue === "") {
+      this.#updateValueDueToUserInteraction("");
+      return;
+    }
+    try {
+      this.#updateValueDueToUserInteraction(
+        presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker)
+      );
+    } catch (_) {
+      return;
+    }
+  }
+  /**
+   * Handle selecting a date from the calendar.
+   * @internal
+   */
+  _onDateClick(date) {
+    this.#updateValueDueToUserInteraction(date);
+    this._closePopup();
+  }
+  /**
+   * @internal
+   */
+  _isDateSelected(date) {
+    return date === this.value;
+  }
+  /**
+   * @internal
+   */
+  _isDateAriaSelected(date) {
+    return this._isDateSelected(date);
+  }
+  /**
+   * @internal
+   */
+  _getSelectedDates() {
+    const dates = [];
+    if (this.value) {
+      dates.push(this.value);
+    }
+    return dates;
+  }
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    if (this._isPresentationValueInvalid()) {
+      return this.locale.datePicker.invalidDateError;
+    }
+    return null;
+  }
+  /**
+   * @internal
+   */
+  _isPresentationValueInvalid() {
+    if (this._presentationValue === "") {
+      return false;
+    }
+    try {
+      presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker);
+      return false;
+    } catch (_) {
+      return true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _onClearClick() {
+    this.#updateValueDueToUserInteraction("");
+    super._onClearClick();
+  }
+};
+__decorateClass([
+  index.volatile
+], DatePicker.prototype, "_calendarButtonLabel", 1);
+DatePicker = __decorateClass([
+  index$1.errorText,
+  index$1.formElements
+], DatePicker);
+
+const datePickerDefinition = DatePicker.compose({
+  baseName: "date-picker",
+  template: presentationDate.DatePickerBaseTemplate,
+  styles: presentationDate.styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const datePickerRegistries = [
+  datePickerDefinition(),
+  ...definition.buttonRegistries,
+  ...definition$1.popupRegistries,
+  ...definition$2.textFieldRegistries,
+  ...definition$3.focusRegistries,
+  ...definition$4.dividerRegistries
+];
+const registerDatePicker = index.registerFactory(datePickerRegistries);
+
+exports.datePickerDefinition = datePickerDefinition;
+exports.datePickerRegistries = datePickerRegistries;
+exports.registerDatePicker = registerDatePicker;

package/shared/definition19.cjs

@@ -0,0 +1,416 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition11.cjs');
+const definition$1 = require('./definition60.cjs');
+const definition$2 = require('./definition53.cjs');
+const definition$3 = require('./definition58.cjs');
+const definition$4 = require('./definition21.cjs');
+const presentationDate = require('./presentationDate.cjs');
+require('./affix.cjs');
+const index$1 = require('./index2.cjs');
+
+const formatRange = (from, to) => {
+  return `${from} – ${to}`;
+};
+const formatPresentationDateRange = (dateRange, locale) => {
+  return formatRange(presentationDate.formatPresentationDate(dateRange.start, locale), presentationDate.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) => presentationDate.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;
+}
+let DateRangePicker = class extends presentationDate.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;
+    /**
+     * @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 && !presentationDate.isValidDateStr(this.start)) {
+      this.start = "";
+      return;
+    }
+    this.currentStart = this.start;
+    this.dirtyValue = true;
+    if (!this.#isInternalValueUpdate) {
+      this.#handleChangedValues();
+    }
+  }
+  /**
+   * @internal
+   */
+  endChanged() {
+    if (this.end && !presentationDate.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 (presentationDate.compareDateStr(this.start, this.end) > 0) {
+        this.#updateValues({ start: this.end, end: this.start });
+        return;
+      }
+      this._presentationValue = formatPresentationDateRange(
+        {
+          start: this.start,
+          end: this.end
+        },
+        this.locale.datePicker
+      );
+      this.value = formatRange(this.start, this.end);
+    } 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();
+  }
+  #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);
+    }
+  }
+  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(presentationDate.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 presentationDate.compareDateStr(date, start) >= 0 && presentationDate.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.datePicker.dateFormatPlaceholder,
+      this.locale.datePicker.dateFormatPlaceholder
+    );
+  }
+  /**
+   * @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;
+  }
+  /**
+   * @internal
+   */
+  _onDateMouseLeave() {
+    this._hoverDate = void 0;
+  }
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    if (this._isPresentationValueInvalid()) {
+      return this.locale.datePicker.invalidDateRangeError;
+    }
+    if (this.min && this.start && presentationDate.compareDateStr(this.start, this.min) < 0) {
+      return this.locale.datePicker.startDateAfterMinDateError(
+        presentationDate.formatPresentationDate(this.min, this.locale.datePicker)
+      );
+    }
+    if (this.max && this.end && presentationDate.compareDateStr(this.end, this.max) > 0) {
+      return this.locale.datePicker.endDateBeforeMaxDateError(
+        presentationDate.formatPresentationDate(this.max, this.locale.datePicker)
+      );
+    }
+    return null;
+  }
+  /**
+   * @internal
+   */
+  _isPresentationValueInvalid() {
+    if (this._presentationValue === "") {
+      return false;
+    }
+    try {
+      parsePresentationDateRange(
+        this._presentationValue,
+        this.locale.datePicker
+      );
+      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 _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([
+  index.attr({ mode: "fromView", attribute: "start" })
+], DateRangePicker.prototype, "initialStart", 2);
+__decorateClass([
+  index.attr({ mode: "fromView", attribute: "end" })
+], DateRangePicker.prototype, "initialEnd", 2);
+__decorateClass([
+  index.observable
+], DateRangePicker.prototype, "start", 2);
+__decorateClass([
+  index.observable
+], DateRangePicker.prototype, "end", 2);
+__decorateClass([
+  index.attr({ attribute: "current-start" })
+], DateRangePicker.prototype, "currentStart", 2);
+__decorateClass([
+  index.attr({ attribute: "current-end" })
+], DateRangePicker.prototype, "currentEnd", 2);
+__decorateClass([
+  index.observable
+], DateRangePicker.prototype, "_numCalendars", 2);
+__decorateClass([
+  index.observable
+], DateRangePicker.prototype, "_hoverDate", 2);
+__decorateClass([
+  index.volatile
+], DateRangePicker.prototype, "_calendarButtonLabel", 1);
+DateRangePicker = __decorateClass([
+  index$1.errorText,
+  index$1.formElements
+], DateRangePicker);
+
+const dateRangePickerDefinition = DateRangePicker.compose({
+  baseName: "date-range-picker",
+  template: presentationDate.DatePickerBaseTemplate,
+  styles: presentationDate.styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const dateRangePickerRegistries = [
+  dateRangePickerDefinition(),
+  ...definition.buttonRegistries,
+  ...definition$1.popupRegistries,
+  ...definition$2.textFieldRegistries,
+  ...definition$3.focusRegistries,
+  ...definition$4.dividerRegistries
+];
+const registerDateRangePicker = index.registerFactory(
+  dateRangePickerRegistries
+);
+
+exports.dateRangePickerDefinition = dateRangePickerDefinition;
+exports.dateRangePickerRegistries = dateRangePickerRegistries;
+exports.registerDateRangePicker = registerDateRangePicker;