@vonage/vivid 4.23.0 → 4.25.0

package/shared/definition58.cjs

@@ -1,37 +1,424 @@
 'use strict';
 
-const definition = require('./definition57.cjs');
-const definition$1 = require('./definition65.cjs');
-const definition$2 = require('./definition11.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const pickerField_template = require('./picker-field.template.cjs');
-const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
+const mixins = require('./mixins.cjs');
+const definition$1 = require('./definition66.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const formAssociated = require('./form-associated.cjs');
+const charCount = require('./char-count.cjs');
+const withErrorText = require('./with-error-text.cjs');
+const withSuccessText = require('./with-success-text.cjs');
+const formElement = require('./form-element.cjs');
+const affix = require('./affix.cjs');
+const textField = require('./text-field.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
+const slotted = require('./slotted.cjs');
+const ref = require('./ref.cjs');
 
-const TimePickerTemplate = (context) => {
-  return pickerField_template.PickerFieldTemplate(context, timeSelectionPicker_template.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 = definition.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 mixins.WithLightDOMFeedback(
+  charCount.WithCharCount(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(
+        formElement.FormElement(affix.AffixIcon(delegatesAria.DelegatesAria(formAssociated.FormAssociated(vividElement.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 = mixins.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) {
+      vividElement.DOM.queueUpdate(() => {
+        this.focus();
+      });
+    }
+    this._updateControlValueIfNeeded();
+    installSafariWorkaroundStyleIfNeeded(this);
+    this._renderCharCountRemaining();
+  }
+  focus() {
+    this.control?.focus();
+  }
+  #randomId;
+  /**
+   * @internal
+   */
+  get _uniqueId() {
+    return this.id || this.#randomId;
+  }
+}
+__decorateClass([
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], TextField.prototype, "readOnly");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], TextField.prototype, "autofocus");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "placeholder");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "type");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "list");
+__decorateClass([
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+], TextField.prototype, "maxlength");
+__decorateClass([
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+], TextField.prototype, "minlength");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "pattern");
+__decorateClass([
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+], TextField.prototype, "size");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], TextField.prototype, "spellcheck");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "appearance");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "shape");
+__decorateClass([
+  vividElement.attr
+], TextField.prototype, "autoComplete");
+__decorateClass([
+  vividElement.attr()
+], TextField.prototype, "scale");
+__decorateClass([
+  vividElement.attr({ attribute: "inputmode" })
+], TextField.prototype, "inputMode");
+__decorateClass([
+  vividElement.observable
+], TextField.prototype, "actionItemsSlottedContent");
+__decorateClass([
+  vividElement.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.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 = affix.affixIconTemplateFactory(context);
+  return vividElement.html`
+		<div class="base ${getStateClasses}">
+			${when.when(
+    (x) => x.charCount && x.maxlength,
+    (x) => x._getCharCountTemplate(context)
+  )}
+			<slot class="label" name="_label"></slot>
+			${mixins.renderInLightDOM(vividElement.html`
+				${when.when(
+    (x) => x.label,
+    vividElement.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.slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${mixins.renderInLightDOM(
+    vividElement.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}"
+							${delegatesAria.delegateAria()}
+							${ref.ref("control")}
+						/>`
+  )}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted.slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(x) => x._getFeedbackTemplate(context)}
+		</div>
+	`;
 };
 
-const timePickerDefinition = vividElement.defineVividComponent(
-  "time-picker",
-  timeSelectionPicker_template.TimePicker,
-  TimePickerTemplate,
-  [
-    definition.textFieldDefinition,
-    definition$1.popupDefinition,
-    definition$2.buttonDefinition,
-    timeSelectionPicker_template.inlineTimePickerDefinition
-  ],
+const textFieldDefinition = vividElement.defineVividComponent(
+  "text-field",
+  TextField,
+  TextfieldTemplate,
+  [definition.iconDefinition, mixins.feedbackMessageDefinition, definition$1.visuallyHiddenDefinition],
   {
-    styles: pickerField_template.pickerFieldStyles,
+    styles: textField.styles,
     shadowOptions: {
       delegatesFocus: true
     }
   }
 );
-const registerTimePicker = vividElement.createRegisterFunction(timePickerDefinition);
+const registerTextField = vividElement.createRegisterFunction(textFieldDefinition);
 
-exports.registerTimePicker = registerTimePicker;
-exports.timePickerDefinition = timePickerDefinition;
+exports.TextField = TextField;
+exports.registerTextField = registerTextField;
+exports.textFieldDefinition = textFieldDefinition;