@vonage/vivid 4.17.0 → 4.18.0

package/shared/picker-field/picker-field.d.ts

@@ -0,0 +1,11 @@
+import { FormElementHelperText, Localized, TrappedFocus } from '../patterns';
+import { FormAssociatedPickerField } from './picker-field.form-associated';
+export declare abstract class PickerField extends FormAssociatedPickerField {
+    #private;
+    initialValue: string;
+    currentValue: string;
+    readOnly: boolean;
+    constructor();
+}
+export interface PickerField extends Localized, FormElementHelperText, TrappedFocus {
+}

package/shared/picker-field/picker-field.form-associated.d.ts

@@ -0,0 +1,11 @@
+import { FormAssociated } from '../foundation/form-associated/form-associated';
+import { VividElement } from '../foundation/vivid-element/vivid-element';
+declare class _PickerField extends VividElement {
+}
+interface _PickerField extends FormAssociated {
+}
+declare const FormAssociatedPickerField_base: typeof _PickerField;
+export declare class FormAssociatedPickerField extends FormAssociatedPickerField_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/shared/picker-field/picker-field.template.d.ts

@@ -0,0 +1,7 @@
+import { type ViewTemplate } from '@microsoft/fast-element';
+import type { VividElementDefinitionContext } from '../design-system/defineVividComponent';
+import { PickerField } from './picker-field';
+export declare const PickerFieldTemplate: (context: VividElementDefinitionContext, popupContentTemplate: ViewTemplate, { withSeparator, padded }: {
+    withSeparator: boolean;
+    padded: boolean;
+}) => ViewTemplate<PickerField, any>;

package/shared/picker-field.template.cjs

@@ -0,0 +1,315 @@
+'use strict';
+
+const index = require('./index.cjs');
+const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const formAssociated = require('./form-associated.cjs');
+const vividElement = require('./vivid-element.cjs');
+const formElements = require('./form-elements.cjs');
+const localized = require('./localized.cjs');
+const definition = require('./definition65.cjs');
+const definition$1 = require('./definition57.cjs');
+const definition$2 = require('./definition11.cjs');
+const ref = require('./ref.cjs');
+const slotted = require('./slotted.cjs');
+const classNames = require('./class-names.cjs');
+
+class TrappedFocus {
+  static {
+    this.ignoredEvents = /* @__PURE__ */ new WeakSet();
+  }
+  static ignoreEvent(event) {
+    this.ignoredEvents.add(event);
+  }
+  /**
+   * @returns Whether focus was trapped.
+   * @internal
+   */
+  _trappedFocus(event, getFocusableEls) {
+    if (!TrappedFocus.ignoredEvents.has(event) && event.key === "Tab") {
+      const focusableEls = getFocusableEls();
+      const firstFocusableEl = focusableEls[0];
+      const lastFocusableEl = focusableEls[focusableEls.length - 1];
+      if (event.shiftKey) {
+        if (this.shadowRoot.activeElement === firstFocusableEl) {
+          lastFocusableEl.focus();
+          return true;
+        }
+      } else {
+        if (this.shadowRoot.activeElement === lastFocusableEl) {
+          firstFocusableEl.focus();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+}
+
+const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
+
+class _PickerField extends vividElement.VividElement {
+}
+class FormAssociatedPickerField extends formAssociated.FormAssociated(_PickerField) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  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);
+  return result;
+};
+class PickerField extends FormAssociatedPickerField {
+  // --- Core ---
+  constructor() {
+    super();
+    this.readOnly = false;
+    this.#onFocusIn = () => {
+      this.$emit("focus", void 0, { bubbles: false });
+    };
+    this.#onFocusOut = () => {
+      this.$emit("blur", void 0, { bubbles: false });
+    };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
+    this._popupOpen = false;
+    this.#dismissOnClickOutside = (event) => {
+      if (!this._popupOpen) {
+        return;
+      }
+      const path = event.composedPath();
+      const elementsToIgnoreClicksOn = [this._dialogEl, this._pickerButtonEl];
+      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
+        this._closePopup(false);
+      }
+    };
+    this._presentationValue = "";
+    this.value = "";
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.#dismissOnClickOutside);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    this.#startObservingLocaleChanges();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.#dismissOnClickOutside);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.removeEventListener("focusout", this.#onFocusOut);
+    this.#stopObservingLocaleChanges();
+  }
+  #onFocusIn;
+  #onFocusOut;
+  /**
+   * @internal
+   */
+  validate() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
+    }
+    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
+  }
+  #localeChangeHandler;
+  #localeChangeObserver;
+  #startObservingLocaleChanges() {
+    this.#localeChangeObserver = vividElement.Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, vividElement.defaultExecutionContext);
+  }
+  #stopObservingLocaleChanges() {
+    this.#localeChangeObserver.disconnect();
+  }
+  #dismissOnClickOutside;
+  #openPopupIfPossible() {
+    if (!this.readOnly) {
+      this._popupOpen = true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _closePopup(restoreFocusToTextField = true) {
+    this._popupOpen = false;
+    if (restoreFocusToTextField) {
+      this._textFieldEl.focus();
+    }
+  }
+  /**
+   * On keydown anywhere in the picker.
+   * @internal
+   */
+  _onBaseKeyDown(event) {
+    if (this._popupOpen && index.handleEscapeKeyAndStopPropogation(event)) {
+      this._closePopup();
+      return false;
+    }
+    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _presentationValueChanged() {
+    this.dirtyValue = true;
+    this.validate();
+  }
+  /**
+   * @internal
+   */
+  _onTextFieldInput(event) {
+    const textField = event.currentTarget;
+    this._presentationValue = textField.value;
+  }
+  /**
+   * @internal
+   */
+  _onPickerButtonClick() {
+    if (this._popupOpen) {
+      this._closePopup();
+    } else {
+      this.#openPopupIfPossible();
+    }
+  }
+  // --- Dialog footer ---
+  /**
+   * @internal
+   */
+  _onOkClick() {
+    this._closePopup();
+  }
+  /**
+   * @internal
+   */
+  _onClearClick() {
+    this._closePopup();
+    this.$emit("clear-click");
+  }
+}
+__decorateClass([
+  vividElement.attr({ attribute: "value" })
+], PickerField.prototype, "initialValue");
+__decorateClass([
+  vividElement.attr({ attribute: "current-value" })
+], PickerField.prototype, "currentValue");
+__decorateClass([
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], PickerField.prototype, "readOnly");
+__decorateClass([
+  vividElement.observable
+], PickerField.prototype, "_popupOpen");
+__decorateClass([
+  vividElement.observable
+], PickerField.prototype, "_presentationValue");
+applyMixinsWithObservables.applyMixinsWithObservables(
+  PickerField,
+  localized.Localized,
+  formElements.FormElementHelperText,
+  TrappedFocus
+);
+
+const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
+  const popupTag = context.tagFor(definition.Popup);
+  const textFieldTag = context.tagFor(definition$1.TextField);
+  const buttonTag = context.tagFor(definition$2.Button);
+  return vividElement.html`
+		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
+			<${textFieldTag} id='text-field'
+											 ${ref.ref("_textFieldEl")}
+											 class='control'
+											 label='${(x) => x.label}'
+											 helper-text='${(x) => x.helperText}'
+											 error-text='${(x) => x.errorValidationMessage}'
+											 placeholder='${(x) => x._textFieldPlaceholder}'
+											 size='${(x) => x._textFieldSize}'
+											 current-value='${(x) => x._presentationValue}'
+											 ?disabled='${(x) => x.disabled}'
+											 ?readonly='${(x) => x.readOnly}'
+											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
+											 @change='${(x) => x._onTextFieldChange()}'
+			>
+				<slot
+					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
+					name='helper-text'
+					${slotted.slotted("_helperTextSlottedContent")}
+				></slot>
+				<${buttonTag}
+					id='picker-button'
+					${ref.ref("_pickerButtonEl")}
+					slot='action-items'
+					size='condensed'
+					icon='${(x) => x._pickerButtonIcon}'
+					appearance='ghost'
+					?disabled='${(x) => x.disabled || x.readOnly}'
+					aria-label='${(x) => x._pickerButtonLabel}'
+					@click='${(x) => x._onPickerButtonClick()}'
+				></${buttonTag}>
+			</${textFieldTag}>
+			<${popupTag}
+				?open='${(x) => x._popupOpen}'
+				:anchor='${(x) => x._textFieldEl}'
+				placement='bottom-start'
+				class='popup'>
+				<div class="${() => classNames.classNames("dialog", [
+    "dialog--padded",
+    padded
+  ])}" role='dialog' ${ref.ref(
+    "_dialogEl"
+  )} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
+					${() => popupContentTemplate}
+					<div class="${() => classNames.classNames("footer", ["footer--with-separator", withSeparator])}">
+						<${buttonTag}
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							label='${(x) => x.locale.pickerField.clearLabel}'
+							@click='${(x) => x._onClearClick()}'
+						></${buttonTag}>
+						<${buttonTag}
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							appearance='filled'
+							label='${(x) => x.locale.pickerField.okLabel}'
+							@click='${(x) => x._onOkClick()}'
+						></${buttonTag}>
+					</div>
+				</div>
+			</${popupTag}>
+		</div>`;
+};
+
+exports.PickerField = PickerField;
+exports.PickerFieldTemplate = PickerFieldTemplate;
+exports.TrappedFocus = TrappedFocus;
+exports.pickerFieldStyles = pickerFieldStyles;

package/shared/picker-field.template.js

@@ -0,0 +1,310 @@
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
+import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { F as FormAssociated } from './form-associated.js';
+import { V as VividElement, O as Observable, i as defaultExecutionContext, a as attr, o as observable, h as html } from './vivid-element.js';
+import { a as FormElementHelperText } from './form-elements.js';
+import { L as Localized } from './localized.js';
+import { P as Popup } from './definition65.js';
+import { T as TextField } from './definition57.js';
+import { B as Button } from './definition11.js';
+import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
+import { c as classNames } from './class-names.js';
+
+class TrappedFocus {
+  static {
+    this.ignoredEvents = /* @__PURE__ */ new WeakSet();
+  }
+  static ignoreEvent(event) {
+    this.ignoredEvents.add(event);
+  }
+  /**
+   * @returns Whether focus was trapped.
+   * @internal
+   */
+  _trappedFocus(event, getFocusableEls) {
+    if (!TrappedFocus.ignoredEvents.has(event) && event.key === "Tab") {
+      const focusableEls = getFocusableEls();
+      const firstFocusableEl = focusableEls[0];
+      const lastFocusableEl = focusableEls[focusableEls.length - 1];
+      if (event.shiftKey) {
+        if (this.shadowRoot.activeElement === firstFocusableEl) {
+          lastFocusableEl.focus();
+          return true;
+        }
+      } else {
+        if (this.shadowRoot.activeElement === lastFocusableEl) {
+          firstFocusableEl.focus();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+}
+
+const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
+
+class _PickerField extends VividElement {
+}
+class FormAssociatedPickerField extends FormAssociated(_PickerField) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  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);
+  return result;
+};
+class PickerField extends FormAssociatedPickerField {
+  // --- Core ---
+  constructor() {
+    super();
+    this.readOnly = false;
+    this.#onFocusIn = () => {
+      this.$emit("focus", void 0, { bubbles: false });
+    };
+    this.#onFocusOut = () => {
+      this.$emit("blur", void 0, { bubbles: false });
+    };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
+    this._popupOpen = false;
+    this.#dismissOnClickOutside = (event) => {
+      if (!this._popupOpen) {
+        return;
+      }
+      const path = event.composedPath();
+      const elementsToIgnoreClicksOn = [this._dialogEl, this._pickerButtonEl];
+      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
+        this._closePopup(false);
+      }
+    };
+    this._presentationValue = "";
+    this.value = "";
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.#dismissOnClickOutside);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    this.#startObservingLocaleChanges();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.#dismissOnClickOutside);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.removeEventListener("focusout", this.#onFocusOut);
+    this.#stopObservingLocaleChanges();
+  }
+  #onFocusIn;
+  #onFocusOut;
+  /**
+   * @internal
+   */
+  validate() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
+    }
+    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
+  }
+  #localeChangeHandler;
+  #localeChangeObserver;
+  #startObservingLocaleChanges() {
+    this.#localeChangeObserver = Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, defaultExecutionContext);
+  }
+  #stopObservingLocaleChanges() {
+    this.#localeChangeObserver.disconnect();
+  }
+  #dismissOnClickOutside;
+  #openPopupIfPossible() {
+    if (!this.readOnly) {
+      this._popupOpen = true;
+    }
+  }
+  /**
+   * @internal
+   */
+  _closePopup(restoreFocusToTextField = true) {
+    this._popupOpen = false;
+    if (restoreFocusToTextField) {
+      this._textFieldEl.focus();
+    }
+  }
+  /**
+   * On keydown anywhere in the picker.
+   * @internal
+   */
+  _onBaseKeyDown(event) {
+    if (this._popupOpen && handleEscapeKeyAndStopPropogation(event)) {
+      this._closePopup();
+      return false;
+    }
+    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _presentationValueChanged() {
+    this.dirtyValue = true;
+    this.validate();
+  }
+  /**
+   * @internal
+   */
+  _onTextFieldInput(event) {
+    const textField = event.currentTarget;
+    this._presentationValue = textField.value;
+  }
+  /**
+   * @internal
+   */
+  _onPickerButtonClick() {
+    if (this._popupOpen) {
+      this._closePopup();
+    } else {
+      this.#openPopupIfPossible();
+    }
+  }
+  // --- Dialog footer ---
+  /**
+   * @internal
+   */
+  _onOkClick() {
+    this._closePopup();
+  }
+  /**
+   * @internal
+   */
+  _onClearClick() {
+    this._closePopup();
+    this.$emit("clear-click");
+  }
+}
+__decorateClass([
+  attr({ attribute: "value" })
+], PickerField.prototype, "initialValue");
+__decorateClass([
+  attr({ attribute: "current-value" })
+], PickerField.prototype, "currentValue");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], PickerField.prototype, "readOnly");
+__decorateClass([
+  observable
+], PickerField.prototype, "_popupOpen");
+__decorateClass([
+  observable
+], PickerField.prototype, "_presentationValue");
+applyMixinsWithObservables(
+  PickerField,
+  Localized,
+  FormElementHelperText,
+  TrappedFocus
+);
+
+const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
+  const popupTag = context.tagFor(Popup);
+  const textFieldTag = context.tagFor(TextField);
+  const buttonTag = context.tagFor(Button);
+  return html`
+		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
+			<${textFieldTag} id='text-field'
+											 ${ref("_textFieldEl")}
+											 class='control'
+											 label='${(x) => x.label}'
+											 helper-text='${(x) => x.helperText}'
+											 error-text='${(x) => x.errorValidationMessage}'
+											 placeholder='${(x) => x._textFieldPlaceholder}'
+											 size='${(x) => x._textFieldSize}'
+											 current-value='${(x) => x._presentationValue}'
+											 ?disabled='${(x) => x.disabled}'
+											 ?readonly='${(x) => x.readOnly}'
+											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
+											 @change='${(x) => x._onTextFieldChange()}'
+			>
+				<slot
+					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
+					name='helper-text'
+					${slotted("_helperTextSlottedContent")}
+				></slot>
+				<${buttonTag}
+					id='picker-button'
+					${ref("_pickerButtonEl")}
+					slot='action-items'
+					size='condensed'
+					icon='${(x) => x._pickerButtonIcon}'
+					appearance='ghost'
+					?disabled='${(x) => x.disabled || x.readOnly}'
+					aria-label='${(x) => x._pickerButtonLabel}'
+					@click='${(x) => x._onPickerButtonClick()}'
+				></${buttonTag}>
+			</${textFieldTag}>
+			<${popupTag}
+				?open='${(x) => x._popupOpen}'
+				:anchor='${(x) => x._textFieldEl}'
+				placement='bottom-start'
+				class='popup'>
+				<div class="${() => classNames("dialog", [
+    "dialog--padded",
+    padded
+  ])}" role='dialog' ${ref(
+    "_dialogEl"
+  )} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
+					${() => popupContentTemplate}
+					<div class="${() => classNames("footer", ["footer--with-separator", withSeparator])}">
+						<${buttonTag}
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							label='${(x) => x.locale.pickerField.clearLabel}'
+							@click='${(x) => x._onClearClick()}'
+						></${buttonTag}>
+						<${buttonTag}
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							appearance='filled'
+							label='${(x) => x.locale.pickerField.okLabel}'
+							@click='${(x) => x._onOkClick()}'
+						></${buttonTag}>
+					</div>
+				</div>
+			</${popupTag}>
+		</div>`;
+};
+
+export { PickerFieldTemplate as P, TrappedFocus as T, PickerField as a, pickerFieldStyles as p };

package/shared/single-date-picker.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+const SingleDatePickerMixin = (Base) => {
+  class SingleDatePicker extends Base {
+    /**
+     * @internal
+     */
+    valueChanged(previous, next) {
+      super.valueChanged(previous, next);
+      if (this.value) {
+        this._adjustSelectedMonthToEnsureVisibilityOf(this._dateValue());
+      }
+    }
+    /**
+     * @internal
+     */
+    _onDateClick(date) {
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+    }
+    /**
+     * @internal
+     */
+    _isDateSelected(date) {
+      return date === this._dateValue();
+    }
+    /**
+     * @internal
+     */
+    _isDateAriaSelected(date) {
+      return this._isDateSelected(date);
+    }
+    /**
+     * @internal
+     */
+    _getSelectedDates() {
+      const dates = [];
+      if (this.value) {
+        dates.push(this._dateValue());
+      }
+      return dates;
+    }
+  }
+  return SingleDatePicker;
+};
+
+exports.SingleDatePickerMixin = SingleDatePickerMixin;