@vonage/vivid 3.36.0 → 3.38.0

package/shared/definition18.js

@@ -1,15 +1,27 @@
-import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition24.js';
-import { B as Button, a as buttonRegistries } from './definition10.js';
-import { E as Elevation, e as elevationRegistries } from './definition56.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
+import { a as attr, o as observable, v as volatile, r as registerFactory } from './index.js';
+import { a as buttonRegistries } from './definition10.js';
+import { p as popupRegistries } from './definition58.js';
+import { a as textFieldRegistries } from './definition51.js';
+import { f as focusRegistries } from './definition56.js';
+import { a as dividerRegistries } from './definition20.js';
+import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, m as monthOfDate, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
+import './affix.js';
+import { e as errorText, f as formElements } from './index2.js';
 
-const dialogPolyfillStyles = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
-
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
+const formatRange = (from, to) => {
+  return `${from} – ${to}`;
+};
+const formatPresentationDateRange = (dateRange, locale) => {
+  return formatRange(formatPresentationDate(dateRange.start, locale), 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) => parsePresentationDate(fragment, locale));
+  return { start, end };
+};
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,241 +34,366 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
-let dialogPolyfill;
-(async () => {
-  if (!isDialogSupported) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await import('./dialog-polyfill.esm.js');
-  }
-})();
-class Dialog extends FoundationElement {
+const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
+function isDefined(value) {
+  return !!value;
+}
+let DateRangePicker = class extends DatePickerBase {
   constructor() {
     super(...arguments);
-    this.open = false;
-    this.fullWidthBody = false;
-    this.ariaLabelledBy = null;
-    this.ariaLabel = null;
-    this.ariaDescribedBy = null;
-    this.#modal = false;
-    this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog) {
+    this.initialStart = "";
+    this.initialEnd = "";
+    this.#isInternalValueUpdate = false;
+    this.start = "";
+    this.end = "";
+    this.setFormValue = (value, state) => {
+      if (isFormAssociatedTryingToSetFormValue(value)) {
         return;
       }
-      const rect = this.#dialog.getBoundingClientRect();
-      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      this.open = clickedInDialog;
+      super.setFormValue(value, state);
     };
-    this.#handleInternalFormSubmit = (event) => {
-      if (event.target.method !== "dialog") {
+    /**
+     * @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 && !isValidDateStr(this.start)) {
+      this.start = "";
+      return;
+    }
+    this.currentStart = this.start;
+    this.dirtyValue = true;
+    if (!this.#isInternalValueUpdate) {
+      this.#handleChangedValues();
+    }
+  }
+  /**
+   * @internal
+   */
+  endChanged() {
+    if (this.end && !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 (compareDateStr(this.start, this.end) > 0) {
+        this.#updateValues({ start: this.end, end: this.start });
         return;
       }
-      this.open = false;
-    };
+      this._presentationValue = formatPresentationDateRange(
+        {
+          start: this.start,
+          end: this.end
+        },
+        this.locale.datePicker
+      );
+      this.value = formatRange(this.start, this.end);
+    } else {
+      this.value = "";
+      this._presentationValue = "";
+    }
+    if (this.start) {
+      this._selectedMonth = monthOfDate(this.start);
+    } else if (this.end) {
+      this._selectedMonth = monthOfDate(this.end);
+    }
+    this.#updateFormValue();
+  }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    super.nameChanged(previous, next);
+    this.#updateFormValue();
   }
-  #modal;
-  set returnValue(value) {
-    this.#dialog.returnValue = value;
+  #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;
+    }
   }
-  get returnValue() {
-    return this.#dialog?.returnValue;
+  #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(compareDateStr);
+    return { start, end };
   }
-  get modal() {
-    return this.#modal;
+  /**
+   * @internal
+   */
+  _isDateAriaSelected(date) {
+    return date === this.start || date === this.end;
   }
-  #dialogElement;
-  get #dialog() {
-    if (!this.#dialogElement) {
-      this.#dialogElement = this.shadowRoot.querySelector("dialog");
-      if (this.#dialogElement) {
-        this.#dialogElement.open = this.open;
-        if (dialogPolyfill) {
-          dialogPolyfill.registerDialog(this.#dialogElement);
-        }
-      }
+  /**
+   * @internal
+   */
+  _isDateInSelectedRange(date) {
+    const { start, end } = this.#getVisibleRange();
+    if (start && end) {
+      return compareDateStr(date, start) >= 0 && compareDateStr(date, end) <= 0;
     }
-    return this.#dialogElement;
+    return false;
   }
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) {
-      return;
+  /**
+   * @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);
     }
-    if (!newValue) {
-      this.close();
+    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 {
-      if (this.#dialog) {
-        this.#dialog.open = true;
-      }
+      this.#updateValues({ start: date });
     }
   }
-  #handleScrimClick;
-  #handleInternalFormSubmit;
-  close() {
-    if (this.#dialog.open) {
-      this.#dialog.close();
-      this.$emit("close", this.returnValue, { bubbles: false });
+  /**
+   * @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;
     }
-    this.open = false;
-    this.#handleModal(false);
   }
-  #handleModal(show) {
-    this.#modal = show;
-    this.#dialog.toggleAttribute("aria-modal", show);
-    this.#dialog.classList.toggle("modal", show);
+  /**
+   * @internal
+   */
+  _onDateMouseEnter(date) {
+    this._hoverDate = date;
   }
-  show() {
-    this.#dialog.show();
-    this.open = true;
+  /**
+   * @internal
+   */
+  _onDateMouseLeave() {
+    this._hoverDate = void 0;
   }
-  showModal() {
-    this.#handleModal(true);
-    this.#dialog.showModal();
-    this.open = true;
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    if (this._isPresentationValueInvalid()) {
+      return this.locale.datePicker.invalidDateRangeError;
+    }
+    if (this.min && this.start && compareDateStr(this.start, this.min) < 0) {
+      return this.locale.datePicker.startDateAfterMinDateError(
+        formatPresentationDate(this.min, this.locale.datePicker)
+      );
+    }
+    if (this.max && this.end && compareDateStr(this.end, this.max) > 0) {
+      return this.locale.datePicker.endDateBeforeMaxDateError(
+        formatPresentationDate(this.max, this.locale.datePicker)
+      );
+    }
+    return null;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#dialog.addEventListener("click", this.#handleScrimClick);
-    this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
+  /**
+   * @internal
+   */
+  _isPresentationValueInvalid() {
+    if (this._presentationValue === "") {
+      return false;
+    }
+    try {
+      parsePresentationDateRange(
+        this._presentationValue,
+        this.locale.datePicker
+      );
+      return false;
+    } catch (_) {
+      return true;
+    }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#dialog.removeEventListener("click", this.#handleScrimClick);
-    this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
+  /**
+   * @internal
+   */
+  _onClearClick() {
+    this.#updateValues({ start: "", end: "" });
+    super._onClearClick();
   }
-}
-__decorateClass([
-  attr({ mode: "boolean" })
-], Dialog.prototype, "open", 2);
-__decorateClass([
-  attr
-], Dialog.prototype, "icon", 2);
-__decorateClass([
-  attr({ attribute: "icon-placement" })
-], Dialog.prototype, "iconPlacement", 2);
-__decorateClass([
-  attr
-], Dialog.prototype, "subtitle", 2);
+  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([
-  attr
-], Dialog.prototype, "headline", 2);
+  attr({ mode: "fromView", attribute: "start" })
+], DateRangePicker.prototype, "initialStart", 2);
 __decorateClass([
-  attr({ attribute: "full-width-body", mode: "boolean" })
-], Dialog.prototype, "fullWidthBody", 2);
+  attr({ mode: "fromView", attribute: "end" })
+], DateRangePicker.prototype, "initialEnd", 2);
 __decorateClass([
-  attr({ attribute: "aria-labelledby" })
-], Dialog.prototype, "ariaLabelledBy", 2);
+  observable
+], DateRangePicker.prototype, "start", 2);
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Dialog.prototype, "ariaLabel", 2);
+  observable
+], DateRangePicker.prototype, "end", 2);
 __decorateClass([
-  attr({ attribute: "aria-describedby" })
-], Dialog.prototype, "ariaDescribedBy", 2);
+  attr({ attribute: "current-start" })
+], DateRangePicker.prototype, "currentStart", 2);
 __decorateClass([
-  observable
-], Dialog.prototype, "bodySlottedContent", 2);
+  attr({ attribute: "current-end" })
+], DateRangePicker.prototype, "currentEnd", 2);
 __decorateClass([
   observable
-], Dialog.prototype, "footerSlottedContent", 2);
+], DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
-  observable
-], Dialog.prototype, "actionItemsSlottedContent", 2);
+  volatile
+], DateRangePicker.prototype, "_calendarButtonLabel", 1);
+DateRangePicker = __decorateClass([
+  errorText,
+  formElements
+], DateRangePicker);
 
-const getClasses = ({
-  iconPlacement,
-  bodySlottedContent,
-  footerSlottedContent,
-  actionItemsSlottedContent
-}) => classNames(
-  "base",
-  [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
-  ["hide-body", !bodySlottedContent?.length],
-  [
-    "hide-footer",
-    !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
-  ]
-);
-function icon(iconTag) {
-  return html`
-		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
-	`;
-}
-function headline() {
-  return html`
-	  <div class="headline">
-		  ${(x) => x.headline}
-	  </div>
-	`;
-}
-function subtitle() {
-  return html`
-	  <div class="subtitle">
-		  ${(x) => x.subtitle}
-	  </div>
-	`;
-}
-function renderDismissButton(buttonTag) {
-  return html`
-	  <${buttonTag}
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${(x) => {
-    x.open = false;
-  }}">
-	  </${buttonTag}>`;
-}
-function handleEscapeKey(dialog, event) {
-  if (event.key === "Escape" && dialog.modal) {
-    dialog.open = false;
-  }
-  return true;
-}
-const DialogTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
-  return html`
-	<${elevationTag} dp="8">
-		<dialog class="${getClasses}"
-				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
-				returnValue="${(x) => x.returnValue}"
-				aria-labelledby="${(x) => x.ariaLabelledBy}"
-				aria-label="${(x) => x.ariaLabel}"
-				aria-describedby="${(x) => x.ariaDescribedBy}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header ${(x) => x.subtitle ? "border" : ""}">
-							<slot name="graphic">
-								${when((x) => x.icon, icon(iconTag))}
-							</slot>
-							${when((x) => x.headline, headline())}
-							${when((x) => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
-					</div>
-					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
-						<slot name="body" ${slotted("bodySlottedContent")}></slot>
-					</div>
-					<div class="footer">
-						<div>
-							<slot name="footer" ${slotted("footerSlottedContent")}></slot>
-						</div>
-						<div class="actions">
-							<slot name="action-items" ${slotted("actionItemsSlottedContent")}></slot>
-						</div>
-					</div>
-				</div>
-			</slot>
-		</dialog>
-	</${elevationTag}>`;
-};
-
-const dialogDefinition = Dialog.compose({
-  baseName: "dialog",
-  template: DialogTemplate,
-  styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
+const dateRangePickerDefinition = DateRangePicker.compose({
+  baseName: "date-range-picker",
+  template: DatePickerBaseTemplate,
+  styles
 });
-const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
-const registerDialog = registerFactory(dialogRegistries);
+const dateRangePickerRegistries = [
+  dateRangePickerDefinition(),
+  ...buttonRegistries,
+  ...popupRegistries,
+  ...textFieldRegistries,
+  ...focusRegistries,
+  ...dividerRegistries
+];
+const registerDateRangePicker = registerFactory(
+  dateRangePickerRegistries
+);
 
-export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };
+export { dateRangePickerRegistries as a, dateRangePickerDefinition as d, registerDateRangePicker as r };