@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition58.js

@@ -1,34 +1,420 @@
-import { t as textFieldDefinition } from './definition57.js';
-import { p as popupDefinition } from './definition65.js';
-import { b as buttonDefinition } from './definition11.js';
-import { g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
-import { a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition, T as TimePicker } from './time-selection-picker.template.js';
+import { m as memoizeWith, i as iconDefinition } from './definition28.js';
+import { D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from './mixins.js';
+import { v as visuallyHiddenDefinition } from './definition66.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
+import { F as FormAssociated } from './form-associated.js';
+import { W as WithCharCount } from './char-count.js';
+import { W as WithErrorText } from './with-error-text.js';
+import { W as WithSuccessText } from './with-success-text.js';
+import { F as FormElement } from './form-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { s as styles } from './text-field.js';
+import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
+import { r as ref } from './ref.js';
 
-const TimePickerTemplate = (context) => {
-  return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
-    withSeparator: true,
-    padded: false
-  });
+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;
+};
+const TextFieldType = {
+  /**
+   * A text TextField
+   */
+  text: "text"};
+const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
+const getSafariWorkaroundStyleSheet = memoizeWith(
+  () => "",
+  () => {
+    const styleSheet = new CSSStyleSheet();
+    const supportsReplaceSync = "replaceSync" in styleSheet;
+    if (supportsReplaceSync) {
+      styleSheet.replaceSync(`
+.${safariWorkaroundClassName}::placeholder {
+	opacity: 1 !important;
+	-webkit-text-fill-color: var(--_low-ink-color) !important;
+}`);
+    }
+    return styleSheet;
+  }
+);
+const installSafariWorkaroundStyleIfNeeded = (forElement) => {
+  if (forElement._isSafariWorkaroundInstalled) {
+    return;
+  }
+  forElement._isSafariWorkaroundInstalled = true;
+  const root = forElement.getRootNode();
+  const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
+  const supportsAdoptedStyleSheets = "adoptedStyleSheets" in root;
+  if (!supportsAdoptedStyleSheets) {
+    return;
+  }
+  if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
+    root.adoptedStyleSheets = [
+      ...root.adoptedStyleSheets,
+      workaroundStyleSheet
+    ];
+  }
+};
+class TextField extends WithLightDOMFeedback(
+  WithCharCount(
+    WithErrorText(
+      WithSuccessText(
+        FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
+      )
+    )
+  )
+) {
+  constructor() {
+    super(...arguments);
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.type = TextFieldType.text;
+    this.#randomId = generateRandomId();
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  autofocusChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.autofocus = this.autofocus;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  placeholderChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.placeholder = this.placeholder;
+    }
+  }
+  /**
+   * @internal
+   */
+  typeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  listChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.setAttribute("list", this.list);
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  maxlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.maxLength = this.maxlength;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  minlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.minLength = this.minlength;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  patternChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.pattern = this.pattern;
+      this.validate();
+    }
+  }
+  /**
+   * @internal
+   */
+  sizeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.size = this.size;
+    }
+  }
+  /**
+   * @internal
+   */
+  spellcheckChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
+    }
+  }
+  /**
+   * @internal
+   */
+  valueChanged(previous, next) {
+    super.valueChanged(previous, next);
+    this._updateControlValueIfNeeded();
+    if (this.charCount && this.maxlength) {
+      this._updateCharCountRemaining();
+    }
+  }
+  /**
+   * Update the controls value only if it is actually different from the actual value.
+   * This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
+   * constraints.
+   * @internal
+   */
+  _updateControlValueIfNeeded() {
+    if (this.control && this.control.value !== this.value) {
+      this.control.value = this.value;
+    }
+  }
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
+  select() {
+    this.control.select();
+  }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
+  handleTextInput() {
+    this.value = this.control.value;
+  }
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
+  handleChange() {
+    this.$emit("change");
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    this.validate();
+    if (this.autofocus) {
+      DOM.queueUpdate(() => {
+        this.focus();
+      });
+    }
+    this._updateControlValueIfNeeded();
+    installSafariWorkaroundStyleIfNeeded(this);
+    this._renderCharCountRemaining();
+  }
+  focus() {
+    this.control?.focus();
+  }
+  #randomId;
+  /**
+   * @internal
+   */
+  get _uniqueId() {
+    return this.id || this.#randomId;
+  }
+}
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], TextField.prototype, "readOnly");
+__decorateClass([
+  attr({ mode: "boolean" })
+], TextField.prototype, "autofocus");
+__decorateClass([
+  attr
+], TextField.prototype, "placeholder");
+__decorateClass([
+  attr
+], TextField.prototype, "type");
+__decorateClass([
+  attr
+], TextField.prototype, "list");
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], TextField.prototype, "maxlength");
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], TextField.prototype, "minlength");
+__decorateClass([
+  attr
+], TextField.prototype, "pattern");
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], TextField.prototype, "size");
+__decorateClass([
+  attr({ mode: "boolean" })
+], TextField.prototype, "spellcheck");
+__decorateClass([
+  attr
+], TextField.prototype, "appearance");
+__decorateClass([
+  attr
+], TextField.prototype, "shape");
+__decorateClass([
+  attr
+], TextField.prototype, "autoComplete");
+__decorateClass([
+  attr()
+], TextField.prototype, "scale");
+__decorateClass([
+  attr({ attribute: "inputmode" })
+], TextField.prototype, "inputMode");
+__decorateClass([
+  observable
+], TextField.prototype, "actionItemsSlottedContent");
+__decorateClass([
+  observable
+], TextField.prototype, "leadingActionItemsSlottedContent");
+
+const getControlId = (id) => `vvd-text-field-control-${id}`;
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent,
+  leadingActionItemsSlottedContent,
+  icon,
+  scale
+}) => classNames(
+  ["error", Boolean(errorValidationMessage)],
+  ["disabled", disabled],
+  ["has-value", Boolean(value)],
+  ["readonly", readOnly],
+  ["placeholder", Boolean(placeholder)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["no-label", !label],
+  ["has-icon", !!icon],
+  ["success", Boolean(successText)],
+  ["action-items", !!actionItemsSlottedContent?.length],
+  ["leading-action-items", !!leadingActionItemsSlottedContent?.length],
+  ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)],
+  [`size-${scale}`, Boolean(scale)]
+);
+const TextfieldTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<div class="base ${getStateClasses}">
+			${when(
+    (x) => x.charCount && x.maxlength,
+    (x) => x._getCharCountTemplate(context)
+  )}
+			<slot class="label" name="_label"></slot>
+			${renderInLightDOM(html`
+				${when(
+    (x) => x.label,
+    html`
+						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
+							${(x) => x.label}
+						</label>
+					`
+  )}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${renderInLightDOM(
+    html`<input
+							slot="_control"
+							id="${(x) => getControlId(x._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(x) => x.handleTextInput()}"
+							@change="${(x) => x.handleChange()}"
+							@blur="${(x) => {
+      x.$emit("blur", void 0, { bubbles: false });
+    }}"
+							@focus="${(x) => {
+      x.$emit("focus", void 0, { bubbles: false });
+    }}"
+							?autofocus="${(x) => x.autofocus}"
+							?disabled="${(x) => x.disabled}"
+							?readonly="${(x) => x.readOnly}"
+							?required="${(x) => x.required}"
+							?spellcheck="${(x) => x.spellcheck}"
+							list="${(x) => x.list}"
+							maxlength="${(x) => x.maxlength}"
+							minlength="${(x) => x.minlength}"
+							pattern="${(x) => x.pattern}"
+							placeholder="${(x) => x.placeholder}"
+							size="${(x) => x.size}"
+							autocomplete="${(x) => x.autoComplete}"
+							type="${(x) => x.type}"
+							inputmode="${(x) => x.inputMode}"
+							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
+							value="${(x) => x.initialValue}"
+							${delegateAria()}
+							${ref("control")}
+						/>`
+  )}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(x) => x._getFeedbackTemplate(context)}
+		</div>
+	`;
 };
 
-const timePickerDefinition = defineVividComponent(
-  "time-picker",
-  TimePicker,
-  TimePickerTemplate,
-  [
-    textFieldDefinition,
-    popupDefinition,
-    buttonDefinition,
-    inlineTimePickerDefinition
-  ],
+const textFieldDefinition = defineVividComponent(
+  "text-field",
+  TextField,
+  TextfieldTemplate,
+  [iconDefinition, feedbackMessageDefinition, visuallyHiddenDefinition],
   {
-    styles: pickerFieldStyles,
+    styles,
     shadowOptions: {
       delegatesFocus: true
     }
   }
 );
-const registerTimePicker = createRegisterFunction(timePickerDefinition);
+const registerTextField = createRegisterFunction(textFieldDefinition);
 
-export { registerTimePicker as r, timePickerDefinition as t };
+export { TextField as T, registerTextField as r, textFieldDefinition as t };

package/shared/definition59.cjs

@@ -1,154 +1,37 @@
 'use strict';
 
-const definition = require('./definition65.cjs');
+const definition = require('./definition58.cjs');
+const definition$1 = require('./definition67.cjs');
+const definition$2 = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
-const anchored = require('./anchored.cjs');
-const index = require('./index.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+const pickerField_template = require('./picker-field.template.cjs');
+const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
 
-const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
-
-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;
+const TimePickerTemplate = (context) => {
+  return pickerField_template.PickerFieldTemplate(context, timeSelectionPicker_template.TimeSelectionPickerTemplate(context, 6), {
+    withSeparator: true,
+    padded: false
+  });
 };
-class Toggletip extends anchored.Anchored(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
-    this.alternate = false;
-    this.placement = "right";
-    this.open = false;
-    this.#openIfClosed = () => {
-      if (!this.open) vividElement.DOM.queueUpdate(() => this.open = true);
-    };
-    this.#closeOnClickOutside = (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
-    };
-    this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
-    };
-  }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    if (newValue) {
-      this.setAttribute("role", "status");
-    } else {
-      this.removeAttribute("role");
-    }
-    this.#updateListeners();
-    if (this._anchorEl) {
-      this.#updateAnchor(this._anchorEl);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#updateListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#updateListeners();
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(oldValue, newValue) {
-    if (oldValue) this.#cleanupAnchor(oldValue);
-    if (newValue) this.#setupAnchor(newValue);
-  }
-  #setupAnchor(a) {
-    a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
-    this.#updateAnchor(a);
-  }
-  #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-  }
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
-  }
-  #openIfClosed;
-  #updateListeners() {
-    document.removeEventListener("click", this.#closeOnClickOutside);
-    document.removeEventListener("keydown", this.#closeOnEscape);
-    if (this.open && this.isConnected) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
-    }
-  }
-  #closeOnClickOutside;
-  #closeOnEscape;
-}
-__decorateClass([
-  vividElement.attr
-], Toggletip.prototype, "headline");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate");
-__decorateClass([
-  vividElement.attr({ mode: "fromView" })
-], Toggletip.prototype, "placement");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Toggletip.prototype, "open");
 
-const getClasses = (_) => classNames.classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(definition.Popup);
-  const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return vividElement.html`
-		${anchorSlotTemplate}
-		<${popup}
-			@keydown="${(x, { event }) => {
-    if (x.open && index.handleEscapeKeyAndStopPropogation(event)) {
-      return false;
-    }
-    return true;
-  }}"
-			class="${getClasses}"
-			arrow
-			:anchor="${(x) => x._anchorEl}"
-			:open="${(x) => x.open}"
-			?alternate="${(x) => !x.alternate}"
-			placement="${(x) => x.placement}"
-			exportparts="vvd-theme-alternate"
-		>
-			<div class="content-wrapper">
-				${when.when(
-    (x) => x.headline,
-    vividElement.html`<header class="headline">${(x) => x.headline}</header>`
-  )}
-				<slot></slot>
-				<footer class="action-items"><slot name="action-items"></slot></footer>
-			</div>
-		</${popup}>
-	`;
-};
-
-const toggletipDefinition = vividElement.defineVividComponent(
-  "toggletip",
-  Toggletip,
-  ToggletipTemplate,
-  [definition.popupDefinition],
+const timePickerDefinition = vividElement.defineVividComponent(
+  "time-picker",
+  timeSelectionPicker_template.TimePicker,
+  TimePickerTemplate,
+  [
+    definition.textFieldDefinition,
+    definition$1.popupDefinition,
+    definition$2.buttonDefinition,
+    timeSelectionPicker_template.inlineTimePickerDefinition
+  ],
   {
-    styles
+    styles: pickerField_template.pickerFieldStyles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerToggletip = vividElement.createRegisterFunction(toggletipDefinition);
+const registerTimePicker = vividElement.createRegisterFunction(timePickerDefinition);
 
-exports.Toggletip = Toggletip;
-exports.registerToggletip = registerToggletip;
-exports.toggletipDefinition = toggletipDefinition;
+exports.registerTimePicker = registerTimePicker;
+exports.timePickerDefinition = timePickerDefinition;