@vonage/vivid 4.17.0 → 4.18.0

package/shared/definition19.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition64.cjs');
-const definition$2 = require('./definition56.cjs');
-const definition$3 = require('./definition22.cjs');
-const presentationDate = require('./presentationDate.cjs');
+const definition$1 = require('./definition65.cjs');
+const definition$2 = require('./definition57.cjs');
+const definition$3 = require('./definition23.cjs');
 const vividElement = require('./vivid-element.cjs');
+const pickerField_template = require('./picker-field.template.cjs');
+const calendarPicker_template = require('./calendar-picker.template.cjs');
 const formElements = require('./form-elements.cjs');
 
 const formatRange = (from, to) => {
@@ -13,8 +14,8 @@ const formatRange = (from, to) => {
 };
 const formatPresentationDateRange = (dateRange, locale) => {
   return formatRange(
-    presentationDate.formatPresentationDate(dateRange.start, locale),
-    presentationDate.formatPresentationDate(dateRange.end, locale)
+    calendarPicker_template.formatPresentationDate(dateRange.start, locale),
+    calendarPicker_template.formatPresentationDate(dateRange.end, locale)
   );
 };
 const parsePresentationDateRange = (presentationDateRange, locale) => {
@@ -23,7 +24,7 @@ const parsePresentationDateRange = (presentationDateRange, locale) => {
     throw new Error(`Invalid date range: ${presentationDateRange}`);
   }
   const [start, end] = fragments.map(
-    (fragment) => presentationDate.parsePresentationDate(fragment, locale)
+    (fragment) => calendarPicker_template.parsePresentationDate(fragment, locale)
   );
   return { start, end };
 };
@@ -51,7 +52,9 @@ const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string
 function isDefined(value) {
   return !!value;
 }
-exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePickerBase {
+exports.DateRangePicker = class DateRangePicker extends calendarPicker_template.MinMaxCalendarPicker(
+  calendarPicker_template.CalendarPicker(pickerField_template.PickerField)
+) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _DateRangePicker_instances);
@@ -60,6 +63,9 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
     __privateAdd(this, _isInternalValueUpdate, false);
     this.start = "";
     this.end = "";
+    /**
+     * @internal
+     */
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValue(value)) {
         return;
@@ -98,7 +104,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
    * @internal
    */
   startChanged() {
-    if (this.start && !presentationDate.isValidDateStr(this.start)) {
+    if (this.start && !calendarPicker_template.isValidDateStr(this.start)) {
       this.start = "";
       return;
     }
@@ -112,7 +118,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
    * @internal
    */
   endChanged() {
-    if (this.end && !presentationDate.isValidDateStr(this.end)) {
+    if (this.end && !calendarPicker_template.isValidDateStr(this.end)) {
       this.end = "";
       return;
     }
@@ -144,7 +150,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
           start: this.start,
           end: this.end
         },
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
     } else {
       this._presentationValue = "";
@@ -157,6 +163,9 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
     super.nameChanged(previous, next);
     __privateMethod(this, _DateRangePicker_instances, updateFormValue_fn).call(this);
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     if (!this.start) {
@@ -178,7 +187,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
   _isDateInSelectedRange(date) {
     const { start, end } = __privateMethod(this, _DateRangePicker_instances, getVisibleRange_fn).call(this);
     if (start && end) {
-      return presentationDate.compareDateStr(date, start) >= 0 && presentationDate.compareDateStr(date, end) <= 0;
+      return calendarPicker_template.compareDateStr(date, start) >= 0 && calendarPicker_template.compareDateStr(date, end) <= 0;
     }
     return false;
   }
@@ -228,8 +237,8 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
    */
   get _textFieldPlaceholder() {
     return formatRange(
-      this.locale.datePicker.dateFormatPlaceholder,
-      this.locale.datePicker.dateFormatPlaceholder
+      this.locale.calendarPicker.dateFormatPlaceholder,
+      this.locale.calendarPicker.dateFormatPlaceholder
     );
   }
   /**
@@ -243,7 +252,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
     try {
       const { start, end } = parsePresentationDateRange(
         this._presentationValue,
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start, end });
     } catch (_) {
@@ -267,16 +276,16 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
    */
   _getCustomValidationError() {
     if (this._isPresentationValueInvalid()) {
-      return this.locale.datePicker.invalidDateRangeError;
+      return this.locale.calendarPicker.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.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 && presentationDate.compareDateStr(this.end, this.max) > 0) {
-      return this.locale.datePicker.endDateBeforeMaxDateError(
-        presentationDate.formatPresentationDate(this.max, this.locale.datePicker)
+    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;
@@ -291,7 +300,7 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
     try {
       parsePresentationDateRange(
         this._presentationValue,
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
       return false;
     } catch (_) {
@@ -312,21 +321,41 @@ exports.DateRangePicker = class DateRangePicker extends presentationDate.DatePic
     __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.initialStart, end: this.initialEnd });
     super.formResetCallback();
   }
-  get _calendarButtonLabel() {
+  get _pickerButtonLabel() {
     if (this.start && this.end) {
-      return this.locale.datePicker.changeDatesLabel(
+      return this.locale.calendarPicker.changeDatesLabel(
         formatPresentationDateRange(
           {
             start: this.start,
             end: this.end
           },
-          this.locale.datePicker
+          this.locale.calendarPicker
         )
       );
     } else {
-      return this.locale.datePicker.chooseDatesLabel;
+      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";
+  }
 };
 _isInternalValueUpdate = new WeakMap();
 _DateRangePicker_instances = new WeakSet();
@@ -347,7 +376,7 @@ updateValues_fn = function(range) {
 };
 handleChangedValues_fn = function() {
   if (this.start && this.end) {
-    if (presentationDate.compareDateStr(this.start, this.end) > 0) {
+    if (calendarPicker_template.compareDateStr(this.start, this.end) > 0) {
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.end, end: this.start });
       return;
     }
@@ -378,7 +407,7 @@ getVisibleRange_fn = function() {
   if (this._hoverDate && isPartialRange) {
     candidates.push(this._hoverDate);
   }
-  const [start, end] = candidates.sort(presentationDate.compareDateStr);
+  const [start, end] = candidates.sort(calendarPicker_template.compareDateStr);
   return { start, end };
 };
 __decorateClass([
@@ -407,19 +436,26 @@ __decorateClass([
 ], exports.DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
   vividElement.volatile
-], exports.DateRangePicker.prototype, "_calendarButtonLabel", 1);
+], exports.DateRangePicker.prototype, "_pickerButtonLabel", 1);
 exports.DateRangePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
 ], exports.DateRangePicker);
 
+const DateRangePickerTemplate = (context) => {
+  return pickerField_template.PickerFieldTemplate(context, calendarPicker_template.CalendarPickerTemplate(context), {
+    withSeparator: false,
+    padded: true
+  });
+};
+
 const dateRangePickerDefinition = vividElement.defineVividComponent(
   "date-range-picker",
   exports.DateRangePicker,
-  presentationDate.DatePickerBaseTemplate,
+  DateRangePickerTemplate,
   [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
   {
-    styles: presentationDate.styles,
+    styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles],
     shadowOptions: {
       delegatesFocus: true
     }

package/shared/definition19.js

@@ -1,9 +1,10 @@
 import { b as buttonDefinition } from './definition11.js';
-import { p as popupDefinition } from './definition64.js';
-import { t as textFieldDefinition } from './definition56.js';
-import { d as dividerDefinition } from './definition22.js';
-import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
+import { p as popupDefinition } from './definition65.js';
+import { t as textFieldDefinition } from './definition57.js';
+import { d as dividerDefinition } from './definition23.js';
 import { a as attr, o as observable, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
+import { f as formatPresentationDate, p as parsePresentationDate, M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, b as compareDateStr, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 const formatRange = (from, to) => {
@@ -49,7 +50,9 @@ const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string
 function isDefined(value) {
   return !!value;
 }
-let DateRangePicker = class extends DatePickerBase {
+let DateRangePicker = class extends MinMaxCalendarPicker(
+  CalendarPicker(PickerField)
+) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _DateRangePicker_instances);
@@ -58,6 +61,9 @@ let DateRangePicker = class extends DatePickerBase {
     __privateAdd(this, _isInternalValueUpdate, false);
     this.start = "";
     this.end = "";
+    /**
+     * @internal
+     */
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValue(value)) {
         return;
@@ -142,7 +148,7 @@ let DateRangePicker = class extends DatePickerBase {
           start: this.start,
           end: this.end
         },
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
     } else {
       this._presentationValue = "";
@@ -155,6 +161,9 @@ let DateRangePicker = class extends DatePickerBase {
     super.nameChanged(previous, next);
     __privateMethod(this, _DateRangePicker_instances, updateFormValue_fn).call(this);
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     if (!this.start) {
@@ -226,8 +235,8 @@ let DateRangePicker = class extends DatePickerBase {
    */
   get _textFieldPlaceholder() {
     return formatRange(
-      this.locale.datePicker.dateFormatPlaceholder,
-      this.locale.datePicker.dateFormatPlaceholder
+      this.locale.calendarPicker.dateFormatPlaceholder,
+      this.locale.calendarPicker.dateFormatPlaceholder
     );
   }
   /**
@@ -241,7 +250,7 @@ let DateRangePicker = class extends DatePickerBase {
     try {
       const { start, end } = parsePresentationDateRange(
         this._presentationValue,
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start, end });
     } catch (_) {
@@ -265,16 +274,16 @@ let DateRangePicker = class extends DatePickerBase {
    */
   _getCustomValidationError() {
     if (this._isPresentationValueInvalid()) {
-      return this.locale.datePicker.invalidDateRangeError;
+      return this.locale.calendarPicker.invalidDateRangeError;
     }
     if (this.min && this.start && compareDateStr(this.start, this.min) < 0) {
-      return this.locale.datePicker.startDateAfterMinDateError(
-        formatPresentationDate(this.min, this.locale.datePicker)
+      return this.locale.calendarPicker.startDateAfterMinDateError(
+        formatPresentationDate(this.min, this.locale.calendarPicker)
       );
     }
     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.calendarPicker.endDateBeforeMaxDateError(
+        formatPresentationDate(this.max, this.locale.calendarPicker)
       );
     }
     return null;
@@ -289,7 +298,7 @@ let DateRangePicker = class extends DatePickerBase {
     try {
       parsePresentationDateRange(
         this._presentationValue,
-        this.locale.datePicker
+        this.locale.calendarPicker
       );
       return false;
     } catch (_) {
@@ -310,21 +319,41 @@ let DateRangePicker = class extends DatePickerBase {
     __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.initialStart, end: this.initialEnd });
     super.formResetCallback();
   }
-  get _calendarButtonLabel() {
+  get _pickerButtonLabel() {
     if (this.start && this.end) {
-      return this.locale.datePicker.changeDatesLabel(
+      return this.locale.calendarPicker.changeDatesLabel(
         formatPresentationDateRange(
           {
             start: this.start,
             end: this.end
           },
-          this.locale.datePicker
+          this.locale.calendarPicker
         )
       );
     } else {
-      return this.locale.datePicker.chooseDatesLabel;
+      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";
+  }
 };
 _isInternalValueUpdate = new WeakMap();
 _DateRangePicker_instances = new WeakSet();
@@ -405,19 +434,26 @@ __decorateClass([
 ], DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
   volatile
-], DateRangePicker.prototype, "_calendarButtonLabel", 1);
+], DateRangePicker.prototype, "_pickerButtonLabel", 1);
 DateRangePicker = __decorateClass([
   errorText,
   formElements
 ], DateRangePicker);
 
+const DateRangePickerTemplate = (context) => {
+  return PickerFieldTemplate(context, CalendarPickerTemplate(context), {
+    withSeparator: false,
+    padded: true
+  });
+};
+
 const dateRangePickerDefinition = defineVividComponent(
   "date-range-picker",
   DateRangePicker,
-  DatePickerBaseTemplate,
+  DateRangePickerTemplate,
   [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
   {
-    styles,
+    styles: [pickerFieldStyles, calendarStyles],
     shadowOptions: {
       delegatesFocus: true
     }