@vonage/vivid 5.0.0 → 5.2.0

package/date-range-picker/index.js

@@ -1,3 +1,335 @@
-import { r as registerDateRangePicker } from '../shared/definition19.js';
-
-registerDateRangePicker();
+import { b as D } from "../bundled/definition3.js";
+import { p as P } from "../bundled/definition9.js";
+import { t as g } from "../bundled/definition13.js";
+import { d as V } from "../bundled/definition14.js";
+import { a as d, o as c, v as k, c as v, d as C } from "../bundled/vivid-element.js";
+import { P as b, a as y, p as S } from "../bundled/picker-field.template.js";
+import { f as o, p as E, M as F, C as R, i as f, b as h, a as w, c as x } from "../bundled/calendar-picker.template.js";
+import { v as M } from "../bundled/definition12.js";
+const p = (i, t) => `${i} – ${t}`, m = (i, t) => p(
+  o(i.start, t),
+  o(i.end, t)
+), _ = (i, t) => {
+  const e = i.trim().split(/[\s—–-]+/);
+  if (e.length !== 2)
+    throw new Error(`Invalid date range: ${i}`);
+  const [a, s] = e.map(
+    (l) => E(l, t)
+  );
+  return { start: a, end: s };
+};
+var O = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (i, t, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? T(t, e) : t, l = i.length - 1, u; l >= 0; l--)
+    (u = i[l]) && (s = (a ? u(t, e, s) : u(s)) || s);
+  return a && s && O(t, e, s), s;
+};
+const I = (i) => typeof i == "string";
+function L(i) {
+  return !!i;
+}
+class r extends F(
+  R(b)
+) {
+  constructor() {
+    super(...arguments), this.initialStart = "", this.initialEnd = "", this.#e = !1, this.start = "", this.end = "", this.setFormValue = (t, e) => {
+      I(t) || super.setFormValue(t, e);
+    }, this._numCalendars = 2, this._hideDatesOutsideMonth = !0, this._textFieldSize = "30";
+  }
+  /**
+   * @internal
+   */
+  initialStartChanged() {
+    this.dirtyValue || (this.start = this.initialStart, this.dirtyValue = !1);
+  }
+  /**
+   * @internal
+   */
+  initialEndChanged() {
+    this.dirtyValue || (this.end = this.initialEnd, this.dirtyValue = !1);
+  }
+  #e;
+  /**
+   * @internal
+   */
+  startChanged() {
+    if (this.start && !f(this.start)) {
+      this.start = "";
+      return;
+    }
+    this.currentStart = this.start, this.dirtyValue = !0, this.#e || this.#i();
+  }
+  /**
+   * @internal
+   */
+  endChanged() {
+    if (this.end && !f(this.end)) {
+      this.end = "";
+      return;
+    }
+    this.currentEnd = this.end, this.dirtyValue = !0, this.#e || this.#i();
+  }
+  /**
+   * @internal
+   */
+  currentStartChanged() {
+    this.start = this.currentStart;
+  }
+  /**
+   * @internal
+   */
+  currentEndChanged() {
+    this.end = this.currentEnd;
+  }
+  #t(t) {
+    this.#e = !0, t.start !== void 0 && (this.start = t.start, this.$emit("input:start")), t.end !== void 0 && (this.end = t.end, this.$emit("input:end")), this.#e = !1, this.$emit("input"), this.$emit("change"), this.#i();
+  }
+  #i() {
+    if (this.start && this.end) {
+      if (h(this.start, this.end) > 0) {
+        this.#t({ start: this.end, end: this.start });
+        return;
+      }
+      this.value = p(this.start, this.end);
+    } else
+      this.value = "";
+    this._updatePresentationValue();
+    const t = this.start || this.end;
+    t && this._adjustSelectedMonthToEnsureVisibilityOf(t), this.#s();
+  }
+  /**
+   * @internal
+   */
+  _updatePresentationValue() {
+    this.start && this.end ? this._presentationValue = m(
+      {
+        start: this.start,
+        end: this.end
+      },
+      this.locale.calendarPicker
+    ) : this._presentationValue = "";
+  }
+  /**
+   * @internal
+   */
+  nameChanged(t, e) {
+    super.nameChanged(t, e), this.#s();
+  }
+  #s() {
+    if (!this.name || !this.start || !this.end)
+      this.setFormValue(null);
+    else {
+      const t = new FormData();
+      t.append(this.name, this.start), t.append(this.name, this.end), this.setFormValue(t);
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.start || (this.start = this.initialStart), this.end || (this.end = this.initialEnd);
+  }
+  #a() {
+    const t = [this.start, this.end].filter(L), e = t.length === 1;
+    this._hoverDate && e && t.push(this._hoverDate);
+    const [a, s] = t.sort(h);
+    return { start: a, end: s };
+  }
+  /**
+   * @internal
+   */
+  _isDateAriaSelected(t) {
+    return this._isDateInSelectedRange(t);
+  }
+  /**
+   * @internal
+   */
+  _isDateInSelectedRange(t) {
+    const { start: e, end: a } = this.#a();
+    return e && a ? h(t, e) >= 0 && h(t, a) <= 0 : !1;
+  }
+  /**
+   * @internal
+   */
+  _isDateRangeStart(t) {
+    return t === this.#a().start;
+  }
+  /**
+   * @internal
+   */
+  _isDateRangeEnd(t) {
+    return t === this.#a().end;
+  }
+  /**
+   * @internal
+   */
+  _getSelectedDates() {
+    const t = [];
+    return this.start && t.push(this.start), this.end && t.push(this.end), t;
+  }
+  /**
+   * @internal
+   */
+  _onDateClick(t) {
+    this.start && this.end ? this.#t({ start: t, end: "" }) : this.start ? (this.#t({ end: t }), this._closePopup()) : this.end ? (this.#t({ start: t }), this._closePopup()) : this.#t({ start: t });
+  }
+  /**
+   * @internal
+   */
+  get _textFieldPlaceholder() {
+    return p(
+      this.locale.calendarPicker.dateFormatPlaceholder,
+      this.locale.calendarPicker.dateFormatPlaceholder
+    );
+  }
+  /**
+   * @internal
+   */
+  _onTextFieldChange() {
+    if (this._presentationValue === "") {
+      this.#t({ start: "", end: "" });
+      return;
+    }
+    try {
+      const { start: t, end: e } = _(
+        this._presentationValue,
+        this.locale.calendarPicker
+      );
+      this.#t({ start: t, end: e });
+    } catch {
+      const e = this._presentationValue;
+      this.#t({ start: "", end: "" }), this._presentationValue = e;
+      return;
+    }
+  }
+  /**
+   * @internal
+   */
+  _onDateMouseEnter(t) {
+    this._hoverDate = t;
+  }
+  /**
+   * @internal
+   */
+  _onDateMouseLeave() {
+    this._hoverDate = void 0;
+  }
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    return this._isPresentationValueInvalid() ? this.locale.calendarPicker.invalidDateRangeError : this.min && this.start && h(this.start, this.min) < 0 ? this.locale.calendarPicker.startDateAfterMinDateError(
+      o(this.min, this.locale.calendarPicker)
+    ) : this.max && this.end && h(this.end, this.max) > 0 ? this.locale.calendarPicker.endDateBeforeMaxDateError(
+      o(this.max, this.locale.calendarPicker)
+    ) : null;
+  }
+  /**
+   * @internal
+   */
+  _isPresentationValueInvalid() {
+    if (this._presentationValue === "")
+      return !1;
+    try {
+      return _(
+        this._presentationValue,
+        this.locale.calendarPicker
+      ), !1;
+    } catch {
+      return !0;
+    }
+  }
+  /**
+   * @internal
+   */
+  _onClearClick() {
+    this.#t({ start: "", end: "" }), super._onClearClick();
+  }
+  /**
+   * @internal
+   */
+  formResetCallback() {
+    this.#t({ start: this.initialStart, end: this.initialEnd }), super.formResetCallback();
+  }
+  get _pickerButtonLabel() {
+    return this.start && this.end ? this.locale.calendarPicker.changeDatesLabel(
+      m(
+        {
+          start: this.start,
+          end: this.end
+        },
+        this.locale.calendarPicker
+      )
+    ) : 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";
+  }
+}
+n([
+  d({ mode: "fromView", attribute: "start" })
+], r.prototype, "initialStart", 2);
+n([
+  d({ mode: "fromView", attribute: "end" })
+], r.prototype, "initialEnd", 2);
+n([
+  c
+], r.prototype, "start", 2);
+n([
+  c
+], r.prototype, "end", 2);
+n([
+  d({ attribute: "current-start" })
+], r.prototype, "currentStart", 2);
+n([
+  d({ attribute: "current-end" })
+], r.prototype, "currentEnd", 2);
+n([
+  c
+], r.prototype, "_numCalendars", 2);
+n([
+  c
+], r.prototype, "_hoverDate", 2);
+n([
+  k
+], r.prototype, "_pickerButtonLabel", 1);
+const $ = (i) => y(i, w(i), {
+  withSeparator: !1,
+  padded: !0
+}), A = C(
+  "date-range-picker",
+  r,
+  $,
+  [
+    D,
+    P,
+    g,
+    V,
+    M
+  ],
+  {
+    styles: [S, x],
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), B = v(
+  A
+);
+B();

package/{shared/definition20.cjs → date-time-picker/definition.cjs}

@@ -1,16 +1,19 @@
 'use strict';
 
-const definition$1 = require('./definition67.cjs');
-const definition = require('./definition11.cjs');
-const definition$2 = require('./definition58.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 timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
-const definition$4 = require('./definition66.cjs');
-const singleValuePicker = require('./single-value-picker.cjs');
-const singleDatePicker = require('./single-date-picker.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const popup_definition = require('../unbundled/definition4.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+const textField_definition = require('../text-field/definition.cjs');
+const divider_definition = require('../divider/definition.cjs');
+const pickerField_template = require('../unbundled/picker-field.template.cjs');
+const calendarPicker_template = require('../unbundled/calendar-picker.template.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const timeSelectionPicker_template = require('../unbundled/time-selection-picker.template.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const singleValuePicker = require('../unbundled/single-value-picker.cjs');
+const singleDatePicker = require('../unbundled/single-date-picker.cjs');
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -218,28 +221,28 @@ class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
   }
 }
 __decorateClass([
-  vividElement.attr({ converter: ValidDateTimeFilter })
+  fastElement.attr({ converter: ValidDateTimeFilter })
 ], DateTimePicker.prototype, "min");
 __decorateClass([
-  vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
+  fastElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
 ], DateTimePicker.prototype, "minTime");
 __decorateClass([
-  vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
+  fastElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
 ], DateTimePicker.prototype, "minDate");
 __decorateClass([
-  vividElement.attr({ converter: ValidDateTimeFilter })
+  fastElement.attr({ converter: ValidDateTimeFilter })
 ], DateTimePicker.prototype, "max");
 __decorateClass([
-  vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
+  fastElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
 ], DateTimePicker.prototype, "maxTime");
 __decorateClass([
-  vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
+  fastElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
 ], DateTimePicker.prototype, "maxDate");
 
 const DateTimePickerTemplate = (context) => {
   return pickerField_template.PickerFieldTemplate(
     context,
-    vividElement.html`
+    fastElement.html`
 			<div class="date-time-picker">
 				${() => calendarPicker_template.CalendarPickerTemplate(context)}
 				<div class="time-picker">
@@ -259,12 +262,12 @@ const dateTimePickerDefinition = vividElement.defineVividComponent(
   DateTimePicker,
   DateTimePickerTemplate,
   [
-    definition.buttonDefinition,
-    definition$1.popupDefinition,
-    definition$2.textFieldDefinition,
-    definition$3.dividerDefinition,
+    button_definition.buttonDefinition,
+    popup_definition.popupDefinition,
+    textField_definition.textFieldDefinition,
+    divider_definition.dividerDefinition,
     timeSelectionPicker_template.inlineTimePickerDefinition,
-    definition$4.visuallyHiddenDefinition
+    visuallyHidden_definition.visuallyHiddenDefinition
   ],
   {
     styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles, styles],
@@ -277,6 +280,6 @@ const registerDateTimePicker = vividElement.createRegisterFunction(
   dateTimePickerDefinition
 );
 
-exports.DateTimePicker = DateTimePicker;
+exports.VwcDateTimePickerElement = DateTimePicker;
 exports.dateTimePickerDefinition = dateTimePickerDefinition;
 exports.registerDateTimePicker = registerDateTimePicker;

package/{shared/definition20.js → date-time-picker/definition.js}

@@ -1,14 +1,15 @@
-import { p as popupDefinition } from './definition67.js';
-import { b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition58.js';
-import { d as dividerDefinition } from './definition23.js';
-import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
-import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from './time-selection-picker.template.js';
-import { v as visuallyHiddenDefinition } from './definition66.js';
-import { S as SingleValuePicker } from './single-value-picker.js';
-import { S as SingleDatePickerMixin } from './single-date-picker.js';
+import { p as popupDefinition } from '../unbundled/definition4.js';
+import { b as buttonDefinition } from '../unbundled/definition.js';
+import { textFieldDefinition } from '../text-field/definition.js';
+import { dividerDefinition } from '../divider/definition.js';
+import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';
+import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from '../unbundled/calendar-picker.template.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from '../unbundled/time-selection-picker.template.js';
+import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
+import { attr, html } from '@microsoft/fast-element';
+import { S as SingleValuePicker } from '../unbundled/single-value-picker.js';
+import { S as SingleDatePickerMixin } from '../unbundled/single-date-picker.js';
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -275,4 +276,4 @@ const registerDateTimePicker = createRegisterFunction(
   dateTimePickerDefinition
 );
 
-export { DateTimePicker as D, dateTimePickerDefinition as d, registerDateTimePicker as r };
+export { DateTimePicker as VwcDateTimePickerElement, dateTimePickerDefinition, registerDateTimePicker };

package/date-time-picker/index.cjs

@@ -1,5 +1,8 @@
-'use strict';
-
-const definition = require('../shared/definition20.cjs');
-
-definition.registerDateTimePicker();
+"use strict";const P=require("../bundled/definition9.cjs"),D=require("../bundled/definition3.cjs"),k=require("../bundled/definition13.cjs"),v=require("../bundled/definition14.cjs"),p=require("../bundled/picker-field.template.cjs"),i=require("../bundled/calendar-picker.template.cjs"),s=require("../bundled/vivid-element.cjs"),r=require("../bundled/time-selection-picker.template.cjs"),f=require("../bundled/definition12.cjs"),x=require("../bundled/single-value-picker.cjs"),V=require("../bundled/single-date-picker.cjs"),S=".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}",c=e=>e.split("T")[0]||"",u=e=>e.split("T")[1]||"",T=e=>{const[t="",n=""]=e.split("T");return i.isValidDateStr(t)&&r.isValidTimeStr(n)},g=(e,t,n,d)=>{const[a,l]=e.split("T");return`${i.formatPresentationDate(a,t)} ${r.formatPresentationTime(l,n,d)}`},M=(e,t,n)=>{const[d,...a]=e.split(" "),l=i.parsePresentationDate(d,t),h=r.parsePresentationTime(a.join(" "),n);return`${l}T${h}`};var y=Object.defineProperty,m=(e,t,n,d)=>{for(var a=void 0,l=e.length-1,h;l>=0;l--)(h=e[l])&&(a=h(t,n,a)||a);return a&&y(t,n,a),a};const _={fromView:e=>e&&T(e)?e:"",toView(e){return e}};class o extends r.TimeSelectionPicker(V.SingleDatePickerMixin(x.SingleValuePicker(i.CalendarPicker(p.PickerField)))){constructor(){super(),this._isValidValue=T,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||c(this.min)}get _resolvedMaxDate(){return this.maxDate||c(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&c(this.min)===this._dateValue()&&u(this.min)||""}get _resolvedMaxTime(){return this.maxTime||this.max&&c(this.max)===this._dateValue()&&u(this.max)||""}_toPresentationValue(t){return g(t,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return M(t,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return c(this.value)}_withUpdatedDate(t){return`${t}T${u(this.value)||"00:00:00"}`}get _timeValue(){return u(this.value)}_withUpdatedTime(t){return`${c(this.value)||i.currentDateStr()}T${t}`}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&i.compareDateStr(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(i.formatPresentationDate(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&i.compareDateStr(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(i.formatPresentationDate(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&r.compareTimeStr(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(r.formatPresentationTime(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&r.compareTimeStr(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(r.formatPresentationTime(this._resolvedMaxTime,this._displaySeconds,this._use12hClock)):null}get _textFieldPlaceholder(){return`${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`}get _pickerButtonLabel(){return this.value?this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value)):this.locale.dateTimePicker.chooseDateTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button")}get _pickerButtonIcon(){return"calendar-clock-line"}get _dialogLabel(){return this.locale.dateTimePicker.chooseDateTimeLabel}}m([s.attr({converter:_})],o.prototype,"min");m([s.attr({converter:r.ValidTimeFilter,attribute:"min-time"})],o.prototype,"minTime");m([s.attr({converter:i.ValidDateFilter,attribute:"min-date"})],o.prototype,"minDate");m([s.attr({converter:_})],o.prototype,"max");m([s.attr({converter:r.ValidTimeFilter,attribute:"max-time"})],o.prototype,"maxTime");m([s.attr({converter:i.ValidDateFilter,attribute:"max-date"})],o.prototype,"maxDate");const $=e=>p.PickerFieldTemplate(e,s.html`
+			<div class="date-time-picker">
+				${()=>i.CalendarPickerTemplate(e)}
+				<div class="time-picker">
+					${()=>r.TimeSelectionPickerTemplate(e,9)}
+				</div>
+			</div>
+		`,{withSeparator:!1,padded:!1}),b=s.defineVividComponent("date-time-picker",o,$,[D.buttonDefinition,P.popupDefinition,k.textFieldDefinition,v.dividerDefinition,r.inlineTimePickerDefinition,f.visuallyHiddenDefinition],{styles:[p.pickerFieldStyles,i.calendarStyles,S],shadowOptions:{delegatesFocus:!0}}),F=s.createRegisterFunction(b);F();