@vonage/vivid 5.15.1 → 5.16.0

package/text-field/definition.js

@@ -1,417 +1,3 @@
-import { iconDefinition } from '../icon/definition.js';
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { contextualHelpDefinition } from '../contextual-help/definition.js';
-import { Updates, ElementStyles, attr, nullableNumberConverter, observable, when, slotted, html, ref } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { F as FormAssociated } from '../unbundled/form-associated.js';
-import { W as WithCharCount } from '../unbundled/char-count.js';
-import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
-import { W as WithErrorText } from '../unbundled/with-error-text.js';
-import { W as WithSuccessText } from '../unbundled/with-success-text.js';
-import { F as FormElement } from '../unbundled/form-element.js';
-import { A as AffixIcon, a as affixIconTemplateFactory } from '../unbundled/affix.js';
-import { s as styles } from '../unbundled/text-field.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-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 safariWorkaroundStyles = new ElementStyles([
-  `
-	.${safariWorkaroundClassName}::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`
-]);
-const installSafariWorkaroundStyleIfNeeded = (forElement) => {
-  const root = forElement.getRootNode();
-  if (!safariWorkaroundStyles.isAttachedTo(root)) {
-    safariWorkaroundStyles.addStylesTo(root);
-  }
-};
-class TextField extends WithContextualHelp(
-  WithLightDOMFeedback(
-    WithCharCount(
-      WithErrorText(
-        WithSuccessText(
-          FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
-        )
-      )
-    )
-  )
-) {
-  constructor() {
-    super(...arguments);
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    // eslint-disable-next-line @repo/repo/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) {
-      Updates.enqueue(() => {
-        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)
-  )}
-			<div
-				class="label-wrapper"
-				?hidden=${(x) => !x.label && !x._hasContextualHelp}
-			>
-				<slot class="label" name="_label"></slot>
-				<slot
-					name="contextual-help"
-					${slotted("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			${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 textFieldDefinition = defineVividComponent(
-  "text-field",
-  TextField,
-  TextfieldTemplate,
-  [
-    iconDefinition,
-    feedbackMessageDefinition,
-    visuallyHiddenDefinition,
-    contextualHelpDefinition
-  ],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerTextField = createRegisterFunction(textFieldDefinition);
-
+import "../unbundled/definition2.js";
+import { n as textFieldDefinition, r as TextField, t as registerTextField } from "../unbundled/definition25.js";
 export { TextField as VwcTextFieldElement, registerTextField, textFieldDefinition };

package/text-field/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition10.cjs");e.registerTextField();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition15.cjs`).t();

package/text-field/index.js

@@ -1,2 +1,6 @@
-import { r } from "../bundled/definition10.js";
-r();
+import "../bundled/vivid-element.js";
+import "../bundled/definition2.js";
+import { t as e } from "../bundled/definition15.js";
+//#region src/lib/text-field/index.ts
+e();
+//#endregion

package/time-picker/definition.cjs

@@ -1,43 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const textField_definition = require('../text-field/definition.cjs');
-const popup_definition = require('../unbundled/definition5.cjs');
-const button_definition = require('../unbundled/definition2.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const pickerField_template = require('../unbundled/picker-field.template.cjs');
-const timeSelectionPicker_template = require('../unbundled/time-selection-picker.template.cjs');
-const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
-require('@microsoft/fast-element');
-
-const TimePickerTemplate = (context) => {
-  return pickerField_template.PickerFieldTemplate(context, timeSelectionPicker_template.TimeSelectionPickerTemplate(context, 6), {
-    withSeparator: true,
-    padded: false
-  });
-};
-
-const timePickerDefinition = vividElement.defineVividComponent(
-  "time-picker",
-  timeSelectionPicker_template.TimePicker,
-  TimePickerTemplate,
-  [
-    textField_definition.textFieldDefinition,
-    popup_definition.popupDefinition,
-    button_definition.buttonDefinition,
-    timeSelectionPicker_template.inlineTimePickerDefinition,
-    visuallyHidden_definition.visuallyHiddenDefinition
-  ],
-  {
-    styles: pickerField_template.pickerFieldStyles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerTimePicker = vividElement.createRegisterFunction(timePickerDefinition);
-
-exports.VwcTimePickerElement = timeSelectionPicker_template.TimePicker;
-exports.registerTimePicker = registerTimePicker;
-exports.timePickerDefinition = timePickerDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_time_selection_picker_template = require("../unbundled/time-selection-picker.template.cjs");
+const require_definition$1 = require("../unbundled/definition72.cjs");
+exports.VwcTimePickerElement = require_time_selection_picker_template.TimePicker;
+exports.registerTimePicker = require_definition$1.registerTimePicker;
+exports.timePickerDefinition = require_definition$1.timePickerDefinition;

package/time-picker/definition.js

@@ -1,37 +1,4 @@
-import { textFieldDefinition } from '../text-field/definition.js';
-import { p as popupDefinition } from '../unbundled/definition5.js';
-import { b as buttonDefinition } from '../unbundled/definition2.js';
-import { c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';
-import { a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition, T as TimePicker } from '../unbundled/time-selection-picker.template.js';
-import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import '@microsoft/fast-element';
-
-const TimePickerTemplate = (context) => {
-  return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
-    withSeparator: true,
-    padded: false
-  });
-};
-
-const timePickerDefinition = defineVividComponent(
-  "time-picker",
-  TimePicker,
-  TimePickerTemplate,
-  [
-    textFieldDefinition,
-    popupDefinition,
-    buttonDefinition,
-    inlineTimePickerDefinition,
-    visuallyHiddenDefinition
-  ],
-  {
-    styles: pickerFieldStyles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerTimePicker = createRegisterFunction(timePickerDefinition);
-
+import "../unbundled/definition2.js";
+import { n as TimePicker } from "../unbundled/time-selection-picker.template.js";
+import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition72.js";
 export { TimePicker as VwcTimePickerElement, registerTimePicker, timePickerDefinition };

package/time-picker/index.cjs

@@ -1 +1 @@
-"use strict";const r=require("../bundled/definition10.cjs"),o=require("../bundled/definition9.cjs"),c=require("../bundled/definition3.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/picker-field.template.cjs"),e=require("../bundled/time-selection-picker.template.cjs"),s=require("../bundled/definition14.cjs"),l=i=>n.PickerFieldTemplate(i,e.TimeSelectionPickerTemplate(i,6),{withSeparator:!0,padded:!1}),d=t.defineVividComponent("time-picker",e.TimePicker,l,[r.textFieldDefinition,o.popupDefinition,c.buttonDefinition,e.inlineTimePickerDefinition,s.visuallyHiddenDefinition],{styles:n.pickerFieldStyles,shadowOptions:{delegatesFocus:!0}}),u=t.createRegisterFunction(d);u();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/definition6.cjs`),r=require(`../bundled/definition8.cjs`),i=require(`../bundled/definition15.cjs`),a=require(`../bundled/picker-field.template.cjs`),o=require(`../bundled/time-selection-picker.template.cjs`);var s=e.o(`time-picker`,o.n,e=>a.t(e,o.t(e,6),{withSeparator:!0,padded:!1}),[i.n,r.t,n.t,o.s,t.n],{styles:a.r,shadowOptions:{delegatesFocus:!0}});e.s(s)();

package/time-picker/index.js

@@ -1,29 +1,24 @@
-import { t as e } from "../bundled/definition10.js";
-import { p as t } from "../bundled/definition9.js";
-import { b as r } from "../bundled/definition3.js";
-import { c as o, d as n } from "../bundled/vivid-element.js";
-import { a as m, p as s } from "../bundled/picker-field.template.js";
-import { a, b as p, d as c } from "../bundled/time-selection-picker.template.js";
-import { v as f } from "../bundled/definition14.js";
-const d = (i) => m(i, a(i, 6), {
-  withSeparator: !0,
-  padded: !1
-}), l = n(
-  "time-picker",
-  c,
-  d,
-  [
-    e,
-    t,
-    r,
-    p,
-    f
-  ],
-  {
-    styles: s,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), k = o(l);
-k();
+import { o as e, s as t } from "../bundled/vivid-element.js";
+import { n } from "../bundled/definition.js";
+import "../bundled/definition2.js";
+import { t as r } from "../bundled/definition6.js";
+import { t as i } from "../bundled/definition8.js";
+import { n as a } from "../bundled/definition15.js";
+import { r as o, t as s } from "../bundled/picker-field.template.js";
+import { n as c, s as l, t as u } from "../bundled/time-selection-picker.template.js";
+//#endregion
+//#region src/lib/time-picker/index.ts
+t(e("time-picker", c, (e) => s(e, u(e, 6), {
+	withSeparator: !0,
+	padded: !1
+}), [
+	a,
+	i,
+	r,
+	l,
+	n
+], {
+	styles: o,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion