@vonage/vivid 4.17.0 → 4.19.0-preview.0

package/shared/definition20.cjs

@@ -1,252 +1,285 @@
 'use strict';
 
+const definition$1 = require('./definition65.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition56.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 definition$1 = require('./definition27.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const localized = require('./localized.cjs');
-const textField = require('./text-field.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const repeat = require('./repeat.cjs');
-const ref = require('./ref.cjs');
-const keyCodes = require('./key-codes.cjs');
+const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
+const singleValuePicker = require('./single-value-picker.cjs');
+const singleDatePicker = require('./single-date-picker.cjs');
+const formElements = require('./form-elements.cjs');
 
-const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
+const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
+
+const extractDatePart = (dateTimeStr) => dateTimeStr.split("T")[0] || "";
+const extractTimePart = (dateTimeStr) => dateTimeStr.split("T")[1] || "";
+const isValidDateTimeStr = (string) => {
+  const [dateStr = "", timeStr = ""] = string.split("T");
+  return calendarPicker_template.isValidDateStr(dateStr) && timeSelectionPicker_template.isValidTimeStr(timeStr);
+};
+
+const formatPresentationDateTime = (dateTimeStr, locale, includeSeconds, use12HourClock) => {
+  const [dateStr, timeStr] = dateTimeStr.split("T");
+  return `${calendarPicker_template.formatPresentationDate(dateStr, locale)} ${timeSelectionPicker_template.formatPresentationTime(
+    timeStr,
+    includeSeconds,
+    use12HourClock
+  )}`;
+};
+const parsePresentationDateTime = (presentationDateTime, locale, use12HourClock) => {
+  const [datePart, ...timeParts] = presentationDateTime.split(" ");
+  const dateStr = calendarPicker_template.parsePresentationDate(datePart, locale);
+  const timeStr = timeSelectionPicker_template.parsePresentationTime(timeParts.join(" "), use12HourClock);
+  return `${dateStr}T${timeStr}`;
+};
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  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 = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class DialPad extends vividElement.VividElement {
+const ValidDateTimeFilter = {
+  fromView: (value) => {
+    if (value && isValidDateTimeStr(value)) {
+      return value;
+    }
+    return "";
+  },
+  toView(value) {
+    return value;
+  }
+};
+let DateTimePicker = class extends timeSelectionPicker_template.TimeSelectionPicker(
+  singleDatePicker.SingleDatePickerMixin(singleValuePicker.SingleValuePicker(calendarPicker_template.CalendarPicker(pickerField_template.PickerField)))
+) {
   constructor() {
-    super(...arguments);
-    this.helperText = null;
-    this.placeholder = null;
-    this.value = "";
-    this.pattern = "^[0-9#*]*$";
-    this.disabled = false;
-    this.pending = false;
-    this.callActive = false;
-    this.noCall = false;
-    this.noInput = false;
-    this.endCallButtonLabel = null;
-    this.callButtonLabel = null;
+    super();
+    /**
+     * @internal
+     */
+    this._isValidValue = isValidDateTimeStr;
     /**
-     *
      * @internal
      */
-    this._onDial = () => {
-      this.callActive ? this.$emit("end-call") : this.$emit("dial");
-    };
-  }
-  valueChanged(_oldValue, newValue) {
-    if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
-      this._textFieldEl.value = newValue;
-      this._textFieldEl.reportValidity();
+    this._textFieldSize = "30";
+    this.proxy.type = "datetime-local";
+    this.proxy.step = "1";
+    this.min = "";
+    this.minDate = "";
+    this.minTime = "";
+    this.max = "";
+    this.maxDate = "";
+    this.maxTime = "";
+  }
+  get _resolvedMinDate() {
+    return this.minDate || extractDatePart(this.min);
+  }
+  get _resolvedMaxDate() {
+    return this.maxDate || extractDatePart(this.max);
+  }
+  get _resolvedMinTime() {
+    return this.minTime || this.min && extractDatePart(this.min) === this._dateValue() && extractTimePart(this.min) || "";
+  }
+  get _resolvedMaxTime() {
+    return this.maxTime || this.max && extractDatePart(this.max) === this._dateValue() && extractTimePart(this.max) || "";
+  }
+  /**
+   * @internal
+   */
+  _toPresentationValue(value) {
+    return formatPresentationDateTime(
+      value,
+      this.locale.calendarPicker,
+      this._displaySeconds,
+      this._use12hClock
+    );
+  }
+  /**
+   * @internal
+   */
+  _parsePresentationValue(presentationValue) {
+    return parsePresentationDateTime(
+      presentationValue,
+      this.locale.calendarPicker,
+      this._use12hClock
+    );
+  }
+  /**
+   * @internal
+   */
+  _dateValue() {
+    return extractDatePart(this.value);
+  }
+  /**
+   * @internal
+   */
+  _withUpdatedDate(dateStr) {
+    return `${dateStr}T${extractTimePart(this.value) || "00:00:00"}`;
+  }
+  /**
+   * @internal
+   */
+  get _timeValue() {
+    return extractTimePart(this.value);
+  }
+  /**
+   * @internal
+   */
+  _withUpdatedTime(timeStr) {
+    return `${extractDatePart(this.value) || calendarPicker_template.currentDateStr()}T${timeStr}`;
+  }
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    if (this._isPresentationValueInvalid()) {
+      return this.locale.dateTimePicker.invalidDateTimeError;
     }
+    if (this._dateValue() && this._resolvedMinDate && calendarPicker_template.compareDateStr(this._dateValue(), this._resolvedMinDate) < 0) {
+      return this.locale.dateTimePicker.dateBeforeMinDateError(
+        calendarPicker_template.formatPresentationDate(
+          this._resolvedMinDate,
+          this.locale.calendarPicker
+        )
+      );
+    }
+    if (this._dateValue() && this._resolvedMaxDate && calendarPicker_template.compareDateStr(this._dateValue(), this._resolvedMaxDate) > 0) {
+      return this.locale.dateTimePicker.dateAfterMaxDateError(
+        calendarPicker_template.formatPresentationDate(
+          this._resolvedMaxDate,
+          this.locale.calendarPicker
+        )
+      );
+    }
+    if (this._timeValue && this._resolvedMinTime && timeSelectionPicker_template.compareTimeStr(this._timeValue, this._resolvedMinTime) < 0) {
+      return this.locale.dateTimePicker.timeBeforeMinTimeError(
+        timeSelectionPicker_template.formatPresentationTime(
+          this._resolvedMinTime,
+          this._displaySeconds,
+          this._use12hClock
+        )
+      );
+    }
+    if (this._timeValue && this._resolvedMaxTime && timeSelectionPicker_template.compareTimeStr(this._timeValue, this._resolvedMaxTime) > 0) {
+      return this.locale.dateTimePicker.timeAfterMaxTimeError(
+        timeSelectionPicker_template.formatPresentationTime(
+          this._resolvedMaxTime,
+          this._displaySeconds,
+          this._use12hClock
+        )
+      );
+    }
+    return null;
   }
-}
-__decorateClass([
-  vividElement.attr({ attribute: "helper-text" })
-], DialPad.prototype, "helperText");
-__decorateClass([
-  vividElement.attr
-], DialPad.prototype, "placeholder");
-__decorateClass([
-  vividElement.attr({ mode: "fromView" })
-], DialPad.prototype, "value");
-__decorateClass([
-  vividElement.attr({ mode: "fromView" })
-], DialPad.prototype, "pattern");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], DialPad.prototype, "disabled");
+  /**
+   * @internal
+   */
+  get _textFieldPlaceholder() {
+    return `${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`;
+  }
+  /**
+   * @internal
+   */
+  get _pickerButtonLabel() {
+    if (this.value) {
+      return this.locale.dateTimePicker.changeDateTimeLabel(
+        this._toPresentationValue(this.value)
+      );
+    } else {
+      return this.locale.dateTimePicker.chooseDateTimeLabel;
+    }
+  }
+  /**
+   * @internal
+   */
+  _focusableElsWithinDialog() {
+    return this._dialogEl.querySelectorAll(
+      "#inline-time-picker, button, .vwc-button"
+    );
+  }
+  /**
+   * @internal
+   */
+  get _pickerButtonIcon() {
+    return "calendar-clock-line";
+  }
+  /**
+   * @internal
+   */
+  get _dialogLabel() {
+    return this.locale.dateTimePicker.chooseDateTimeLabel;
+  }
+};
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], DialPad.prototype, "pending");
+  vividElement.attr({ converter: ValidDateTimeFilter })
+], DateTimePicker.prototype, "min", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "call-active", mode: "boolean" })
-], DialPad.prototype, "callActive");
+  vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
+], DateTimePicker.prototype, "minTime", 2);
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "no-call" })
-], DialPad.prototype, "noCall");
+  vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
+], DateTimePicker.prototype, "minDate", 2);
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "no-input" })
-], DialPad.prototype, "noInput");
+  vividElement.attr({ converter: ValidDateTimeFilter })
+], DateTimePicker.prototype, "max", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "end-call-button-label" })
-], DialPad.prototype, "endCallButtonLabel");
+  vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
+], DateTimePicker.prototype, "maxTime", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "call-button-label" })
-], DialPad.prototype, "callButtonLabel");
-applyMixins.applyMixins(DialPad, localized.Localized);
+  vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
+], DateTimePicker.prototype, "maxDate", 2);
+DateTimePicker = __decorateClass([
+  formElements.errorText,
+  formElements.formElements
+], DateTimePicker);
 
-class DialPadButton {
-  constructor(value, label, ariaLabel, icon, id) {
-    this.value = value;
-    this.label = label;
-    this.ariaLabel = ariaLabel;
-    this.icon = icon;
-    this.id = id;
-  }
-}
-const DIAL_PAD_BUTTONS = [
-  new DialPadButton("1", "&nbsp;", "digitOneLabel", "one-solid", "btn1"),
-  new DialPadButton("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
-  new DialPadButton("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
-  new DialPadButton("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
-  new DialPadButton("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
-  new DialPadButton("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
-  new DialPadButton("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
-  new DialPadButton("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
-  new DialPadButton("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
-  new DialPadButton(
-    "*",
-    null,
-    "digitAsteriskLabel",
-    "asterisk-2-solid",
-    "btnAsterisk"
-  ),
-  new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
-  new DialPadButton(
-    "#",
-    null,
-    "digitHashtagLabel",
-    "hashtag-solid",
-    "btnHashtag"
-  )
-];
-const getClasses = ({ noInput }) => classNames.classNames("base", ["no-input", Boolean(noInput)]);
-function handleKeyDown(x, e) {
-  if (e.key === keyCodes.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
-    x._onDial();
-  } else {
-    const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
-    if (elementIndex > -1) {
-      const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
-      if (digit) {
-        digit.active = true;
-        setTimeout(() => {
-          digit.active = false;
-        }, 200);
-      }
-    }
-  }
-  return true;
-}
-function syncFieldAndPadValues(x) {
-  x.value = x._textFieldEl.value;
-}
-function stopPropagation(_, { event: e }) {
-  e.stopImmediatePropagation();
-}
-function deleteLastCharacter(dialPad) {
-  dialPad.value = dialPad.value.slice(0, -1);
-  dialPad.$emit("input");
-  dialPad.$emit("change");
-  if (dialPad.value === "") {
-    dialPad._textFieldEl.focus();
-  }
-}
-function renderTextField(textFieldTag, buttonTag) {
-  return vividElement.html`<${textFieldTag} ${ref.ref(
-    "_textFieldEl"
-  )} class="phone-field" internal-part type="tel"
-        value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
-            ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
-            aria-label="${(x) => x.locale.dialPad.inputLabel}"
-            @keydown="${(x, c) => handleKeyDown(x, c.event)}"
-            @input="${syncFieldAndPadValues}"
-			@change="${syncFieldAndPadValues}"
-			@focus="${stopPropagation}"
-			@blur="${stopPropagation}"
-			>
-         ${when.when(
-    (x) => x.value && x.value.length && x.value.length > 0,
-    vividElement.html`<${buttonTag}
-                				slot="action-items"
-								size='super-condensed'
-								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost'
-								?disabled="${(x) => x.disabled || x.callActive}"
-								@click="${(x) => deleteLastCharacter(x)}">
-            </${buttonTag}>`
-  )}
-        </${textFieldTag}>`;
-}
-function onDigitClick(digit, { parent: dialPad, event }) {
-  dialPad.value += digit.value;
-  dialPad.$emit("keypad-click", event.currentTarget);
-  dialPad.$emit("input");
-  dialPad.$emit("change");
-}
-function renderDigits(buttonTag, iconTag) {
-  return vividElement.html`
-		${repeat.repeat(
-    (_) => DIAL_PAD_BUTTONS,
+const DateTimePickerTemplate = (context) => {
+  return pickerField_template.PickerFieldTemplate(
+    context,
     vividElement.html`
-			<${buttonTag}
-					  id="${(x) => x.id}"
-					  value="${(x) => x.value}"
-					  stacked
-					  appearance="ghost-light"
-					  shape="pill"
-					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
-					  size='condensed'
-					  class="digit-btn"
-					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
-					  ?disabled="${(_, c) => c.parent.disabled}"
-					  @click="${onDigitClick}">
-					  	<${iconTag} slot="icon"
-									name="${(x) => x.icon}"
-									class="digit-btn-num"></${iconTag}>
-					</${buttonTag}>
-		`
-  )}
-	`;
-}
-function renderDialButton(buttonTag) {
-  return vividElement.html`<${buttonTag} class="call-btn"
-        size="expanded"
-        appearance="filled"
-        icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
-        connotation="${(x) => x.callActive ? "alert" : "cta"}"
-        ?disabled="${(x) => x.disabled}"
-		?pending="${(x) => x.pending}"
-        @click="${(x) => x._onDial()}"
-        label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
-    </${buttonTag}>`;
-}
-const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
-  const iconTag = context.tagFor(definition$1.Icon);
-  const textFieldTag = context.tagFor(textField.TextField);
-  return vividElement.html` <div class="${getClasses}">
-		${when.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
-		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
-		${when.when((x) => !x.noCall, renderDialButton(buttonTag))}
-	</div>`;
+			<div class="date-time-picker">
+				${() => calendarPicker_template.CalendarPickerTemplate(context)}
+				<div class="time-picker">
+					${() => timeSelectionPicker_template.TimeSelectionPickerTemplate(context, 9)}
+				</div>
+			</div>
+		`,
+    {
+      withSeparator: false,
+      padded: false
+    }
+  );
 };
 
-const dialPadDefinition = vividElement.defineVividComponent(
-  "dial-pad",
-  DialPad,
-  DialPadTemplate,
-  [definition.buttonDefinition, definition$2.textFieldDefinition, definition$1.iconDefinition],
+const dateTimePickerDefinition = vividElement.defineVividComponent(
+  "date-time-picker",
+  DateTimePicker,
+  DateTimePickerTemplate,
+  [
+    definition.buttonDefinition,
+    definition$1.popupDefinition,
+    definition$2.textFieldDefinition,
+    definition$3.dividerDefinition,
+    timeSelectionPicker_template.inlineTimePickerDefinition
+  ],
   {
-    styles
+    styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles, styles],
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
+const registerDateTimePicker = vividElement.createRegisterFunction(
+  dateTimePickerDefinition
+);
 
-exports.DialPad = DialPad;
-exports.dialPadDefinition = dialPadDefinition;
-exports.registerDialPad = registerDialPad;
+exports.dateTimePickerDefinition = dateTimePickerDefinition;
+exports.registerDateTimePicker = registerDateTimePicker;