@vonage/vivid 4.17.0 → 4.19.0-preview.0

package/shared/definition18.cjs

@@ -1,18 +1,18 @@
 'use strict';
 
-const definition$1 = require('./definition64.cjs');
+const definition$1 = require('./definition65.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition56.cjs');
-const definition$3 = require('./definition22.cjs');
-const presentationDate = require('./presentationDate.cjs');
+const definition$2 = require('./definition57.cjs');
+const definition$3 = require('./definition23.cjs');
+const pickerField_template = require('./picker-field.template.cjs');
+const calendarPicker_template = require('./calendar-picker.template.cjs');
 const vividElement = require('./vivid-element.cjs');
+const singleValuePicker = require('./single-value-picker.cjs');
+const singleDatePicker = require('./single-date-picker.cjs');
 const formElements = require('./form-elements.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 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--)
@@ -21,14 +21,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _DatePicker_instances, updateValueDueToUserInteraction_fn;
-exports.DatePicker = class DatePicker extends presentationDate.DatePickerBase {
+exports.DatePicker = class DatePicker extends singleDatePicker.SingleDatePickerMixin(
+  singleValuePicker.SingleValuePicker(calendarPicker_template.MinMaxCalendarPicker(calendarPicker_template.CalendarPicker(pickerField_template.PickerField)))
+) {
   constructor() {
     super();
-    __privateAdd(this, _DatePicker_instances);
+    /**
+     * @internal
+     */
+    this._isValidValue = calendarPicker_template.isValidDateStr;
     /**
      * @internal
      */
@@ -38,138 +39,102 @@ exports.DatePicker = class DatePicker extends presentationDate.DatePickerBase {
   /**
    * @internal
    */
-  valueChanged(previous, next) {
-    super.valueChanged(previous, next);
-    if (this.value) {
-      if (!presentationDate.isValidDateStr(this.value)) {
-        this.value = "";
-        return;
-      }
-      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
-    }
-    this._updatePresentationValue();
-  }
-  _updatePresentationValue() {
-    if (this.value) {
-      this._presentationValue = presentationDate.formatPresentationDate(
-        this.value,
-        this.locale.datePicker
-      );
-    } else {
-      this._presentationValue = "";
-    }
-  }
-  get _calendarButtonLabel() {
-    if (this.value) {
-      return this.locale.datePicker.changeDateLabel(
-        presentationDate.formatPresentationDate(this.value, this.locale.datePicker)
-      );
-    } else {
-      return this.locale.datePicker.chooseDateLabel;
-    }
+  _toPresentationValue(value) {
+    return calendarPicker_template.formatPresentationDate(value, this.locale.calendarPicker);
   }
   /**
    * @internal
    */
-  get _textFieldPlaceholder() {
-    return this.locale.datePicker.dateFormatPlaceholder;
+  _parsePresentationValue(presentationValue) {
+    return calendarPicker_template.parsePresentationDate(presentationValue, this.locale.calendarPicker);
   }
   /**
    * @internal
    */
-  _onTextFieldChange() {
-    if (this._presentationValue === "") {
-      __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, "");
-      return;
-    }
-    try {
-      __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker));
-    } catch (_) {
-      return;
-    }
+  _dateValue() {
+    return this.value;
   }
   /**
-   * Handle selecting a date from the calendar.
    * @internal
    */
-  _onDateClick(date) {
-    __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, date);
-    this._closePopup();
+  _withUpdatedDate(dateStr) {
+    return dateStr;
+  }
+  get _pickerButtonLabel() {
+    if (this.value) {
+      return this.locale.calendarPicker.changeDateLabel(
+        this._toPresentationValue(this.value)
+      );
+    } else {
+      return this.locale.calendarPicker.chooseDateLabel;
+    }
   }
   /**
    * @internal
    */
-  _isDateSelected(date) {
-    return date === this.value;
+  get _dialogLabel() {
+    return this.locale.calendarPicker.chooseDateLabel;
   }
   /**
    * @internal
    */
-  _isDateAriaSelected(date) {
-    return this._isDateSelected(date);
+  get _textFieldPlaceholder() {
+    return this.locale.calendarPicker.dateFormatPlaceholder;
   }
   /**
+   * Handle selecting a date from the calendar.
    * @internal
    */
-  _getSelectedDates() {
-    const dates = [];
-    if (this.value) {
-      dates.push(this.value);
-    }
-    return dates;
+  _onDateClick(date) {
+    super._onDateClick(date);
+    this._closePopup();
   }
   /**
    * @internal
    */
   _getCustomValidationError() {
     if (this._isPresentationValueInvalid()) {
-      return this.locale.datePicker.invalidDateError;
+      return this.locale.calendarPicker.invalidDateError;
     }
     return null;
   }
   /**
    * @internal
    */
-  _isPresentationValueInvalid() {
-    if (this._presentationValue === "") {
-      return false;
-    }
-    try {
-      presentationDate.parsePresentationDate(this._presentationValue, this.locale.datePicker);
-      return false;
-    } catch (_) {
-      return true;
-    }
+  _focusableElsWithinDialog() {
+    return this._dialogEl.querySelectorAll(
+      "button, .vwc-button"
+    );
   }
   /**
    * @internal
    */
-  _onClearClick() {
-    __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, "");
-    super._onClearClick();
+  get _pickerButtonIcon() {
+    return "calendar-line";
   }
 };
-_DatePicker_instances = new WeakSet();
-updateValueDueToUserInteraction_fn = function(newValue) {
-  this.value = newValue;
-  this.$emit("change");
-  this.$emit("input");
-};
 __decorateClass([
   vividElement.volatile
-], exports.DatePicker.prototype, "_calendarButtonLabel", 1);
+], exports.DatePicker.prototype, "_pickerButtonLabel", 1);
 exports.DatePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
 ], exports.DatePicker);
 
+const DatePickerTemplate = (context) => {
+  return pickerField_template.PickerFieldTemplate(context, calendarPicker_template.CalendarPickerTemplate(context), {
+    withSeparator: false,
+    padded: true
+  });
+};
+
 const datePickerDefinition = vividElement.defineVividComponent(
   "date-picker",
   exports.DatePicker,
-  presentationDate.DatePickerBaseTemplate,
+  DatePickerTemplate,
   [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/definition18.js

@@ -1,16 +1,16 @@
-import { p as popupDefinition } from './definition64.js';
+import { p as popupDefinition } from './definition65.js';
 import { b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition56.js';
-import { d as dividerDefinition } from './definition22.js';
-import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
+import { t as textFieldDefinition } from './definition57.js';
+import { d as dividerDefinition } from './definition23.js';
+import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
+import { M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
 import { v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { S as SingleValuePicker } from './single-value-picker.js';
+import { S as SingleDatePickerMixin } from './single-date-picker.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 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--)
@@ -19,14 +19,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _DatePicker_instances, updateValueDueToUserInteraction_fn;
-let DatePicker = class extends DatePickerBase {
+let DatePicker = class extends SingleDatePickerMixin(
+  SingleValuePicker(MinMaxCalendarPicker(CalendarPicker(PickerField)))
+) {
   constructor() {
     super();
-    __privateAdd(this, _DatePicker_instances);
+    /**
+     * @internal
+     */
+    this._isValidValue = isValidDateStr;
     /**
      * @internal
      */
@@ -36,138 +37,102 @@ let DatePicker = class extends DatePickerBase {
   /**
    * @internal
    */
-  valueChanged(previous, next) {
-    super.valueChanged(previous, next);
-    if (this.value) {
-      if (!isValidDateStr(this.value)) {
-        this.value = "";
-        return;
-      }
-      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
-    }
-    this._updatePresentationValue();
-  }
-  _updatePresentationValue() {
-    if (this.value) {
-      this._presentationValue = formatPresentationDate(
-        this.value,
-        this.locale.datePicker
-      );
-    } else {
-      this._presentationValue = "";
-    }
-  }
-  get _calendarButtonLabel() {
-    if (this.value) {
-      return this.locale.datePicker.changeDateLabel(
-        formatPresentationDate(this.value, this.locale.datePicker)
-      );
-    } else {
-      return this.locale.datePicker.chooseDateLabel;
-    }
+  _toPresentationValue(value) {
+    return formatPresentationDate(value, this.locale.calendarPicker);
   }
   /**
    * @internal
    */
-  get _textFieldPlaceholder() {
-    return this.locale.datePicker.dateFormatPlaceholder;
+  _parsePresentationValue(presentationValue) {
+    return parsePresentationDate(presentationValue, this.locale.calendarPicker);
   }
   /**
    * @internal
    */
-  _onTextFieldChange() {
-    if (this._presentationValue === "") {
-      __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, "");
-      return;
-    }
-    try {
-      __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, parsePresentationDate(this._presentationValue, this.locale.datePicker));
-    } catch (_) {
-      return;
-    }
+  _dateValue() {
+    return this.value;
   }
   /**
-   * Handle selecting a date from the calendar.
    * @internal
    */
-  _onDateClick(date) {
-    __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, date);
-    this._closePopup();
+  _withUpdatedDate(dateStr) {
+    return dateStr;
+  }
+  get _pickerButtonLabel() {
+    if (this.value) {
+      return this.locale.calendarPicker.changeDateLabel(
+        this._toPresentationValue(this.value)
+      );
+    } else {
+      return this.locale.calendarPicker.chooseDateLabel;
+    }
   }
   /**
    * @internal
    */
-  _isDateSelected(date) {
-    return date === this.value;
+  get _dialogLabel() {
+    return this.locale.calendarPicker.chooseDateLabel;
   }
   /**
    * @internal
    */
-  _isDateAriaSelected(date) {
-    return this._isDateSelected(date);
+  get _textFieldPlaceholder() {
+    return this.locale.calendarPicker.dateFormatPlaceholder;
   }
   /**
+   * Handle selecting a date from the calendar.
    * @internal
    */
-  _getSelectedDates() {
-    const dates = [];
-    if (this.value) {
-      dates.push(this.value);
-    }
-    return dates;
+  _onDateClick(date) {
+    super._onDateClick(date);
+    this._closePopup();
   }
   /**
    * @internal
    */
   _getCustomValidationError() {
     if (this._isPresentationValueInvalid()) {
-      return this.locale.datePicker.invalidDateError;
+      return this.locale.calendarPicker.invalidDateError;
     }
     return null;
   }
   /**
    * @internal
    */
-  _isPresentationValueInvalid() {
-    if (this._presentationValue === "") {
-      return false;
-    }
-    try {
-      parsePresentationDate(this._presentationValue, this.locale.datePicker);
-      return false;
-    } catch (_) {
-      return true;
-    }
+  _focusableElsWithinDialog() {
+    return this._dialogEl.querySelectorAll(
+      "button, .vwc-button"
+    );
   }
   /**
    * @internal
    */
-  _onClearClick() {
-    __privateMethod(this, _DatePicker_instances, updateValueDueToUserInteraction_fn).call(this, "");
-    super._onClearClick();
+  get _pickerButtonIcon() {
+    return "calendar-line";
   }
 };
-_DatePicker_instances = new WeakSet();
-updateValueDueToUserInteraction_fn = function(newValue) {
-  this.value = newValue;
-  this.$emit("change");
-  this.$emit("input");
-};
 __decorateClass([
   volatile
-], DatePicker.prototype, "_calendarButtonLabel", 1);
+], DatePicker.prototype, "_pickerButtonLabel", 1);
 DatePicker = __decorateClass([
   errorText,
   formElements
 ], DatePicker);
 
+const DatePickerTemplate = (context) => {
+  return PickerFieldTemplate(context, CalendarPickerTemplate(context), {
+    withSeparator: false,
+    padded: true
+  });
+};
+
 const datePickerDefinition = defineVividComponent(
   "date-picker",
   DatePicker,
-  DatePickerBaseTemplate,
+  DatePickerTemplate,
   [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
   {
-    styles,
+    styles: [pickerFieldStyles, calendarStyles],
     shadowOptions: {
       delegatesFocus: true
     }