@vonage/vivid 3.14.0 → 3.15.0

package/shared/definition51.js

@@ -1,100 +1,119 @@
-import { F as FoundationElement, U as __classPrivateFieldGet, V as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition20.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition4.js';
+import { i as iconRegistries } from './definition3.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import './focus.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
+import { T as TextField$1 } from './text-field2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { c as css_248z } from './text-field.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { w as when } from './when.js';
+import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
-
-var _Tooltip_instances, _Tooltip_anchorEl, _Tooltip_anchorUpdated, _Tooltip_addEventListener, _Tooltip_removeEventListener, _Tooltip_show, _Tooltip_hide, _Tooltip_closeOnEscape;
-class Tooltip extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    _Tooltip_instances.add(this);
-    _Tooltip_anchorEl.set(this, null);
-    this.open = false;
-    _Tooltip_show.set(this, () => {
-      this.open = true;
-    });
-    _Tooltip_hide.set(this, () => {
-      this.open = false;
-    });
-    _Tooltip_closeOnEscape.set(this, e => {
-      if (e.key === 'Escape') __classPrivateFieldGet(this, _Tooltip_hide, "f").call(this);
-    });
-  }
-  anchorChanged(_, newValue) {
-    if (__classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
-    __classPrivateFieldSet(this, _Tooltip_anchorEl, newValue instanceof HTMLElement ? newValue : document.getElementById(newValue), "f");
-    if (__classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
-    document.removeEventListener('keydown', __classPrivateFieldGet(this, _Tooltip_closeOnEscape, "f"));
-  }
-  openChanged(_, newValue) {
-    if (_ === undefined) return;
-    if (newValue) {
-      document.addEventListener('keydown', __classPrivateFieldGet(this, _Tooltip_closeOnEscape, "f"));
-    } else {
-      document.removeEventListener('keydown', __classPrivateFieldGet(this, _Tooltip_closeOnEscape, "f"));
-    }
-  }
-}
-_Tooltip_anchorEl = new WeakMap(), _Tooltip_show = new WeakMap(), _Tooltip_hide = new WeakMap(), _Tooltip_closeOnEscape = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_anchorUpdated = function _Tooltip_anchorUpdated() {
-  __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
-  __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_addEventListener).call(this);
-}, _Tooltip_addEventListener = function _Tooltip_addEventListener() {
-  if (__classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) {
-    __classPrivateFieldGet(this, _Tooltip_anchorEl, "f").addEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
-    __classPrivateFieldGet(this, _Tooltip_anchorEl, "f").addEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
-    __classPrivateFieldGet(this, _Tooltip_anchorEl, "f").addEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
-    __classPrivateFieldGet(this, _Tooltip_anchorEl, "f").addEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
-  }
-}, _Tooltip_removeEventListener = function _Tooltip_removeEventListener() {
-  var _a, _b, _c, _d;
-  (_a = __classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
-  (_b = __classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
-  (_c = __classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
-  (_d = __classPrivateFieldGet(this, _Tooltip_anchorEl, "f")) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
-};
-__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", String)], Tooltip.prototype, "placement", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tooltip.prototype, "open", void 0);
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Tooltip.prototype, "anchor", void 0);
+let TextField = class TextField extends TextField$1 {};
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
+TextField = __decorate([errorText, formElements], TextField);
+applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
 
 let _ = t => t,
-  _t;
-const getClasses = ({
-  open
-}) => classNames('control', ['open', Boolean(open)]);
-const TooltipTemplate = context => {
-  const popupTag = context.tagFor(Popup);
+  _t,
+  _t2,
+  _t3;
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText
+}) => classNames(['error connotation-alert', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success connotation-success', Boolean(successText)]);
+function renderLabel() {
   return html(_t || (_t = _`
-<${0} class="${0}" arrow alternate
-	:placement=${0}
-	:anchor="${0}"
-	:open=${0}
-  exportparts="vvd-theme-alternate">
-  <div class="tooltip" role="tooltip">
-    <header part="vvd-theme-alternate" class="tooltip-header">
-      <div class="tooltip-text">${0}</div>
-    </header>
-  </div>
-</${0}>`), popupTag, getClasses, x => x.placement, x => x.anchor, x => x.open, x => x.text, popupTag);
+	  <label for="control" class="label">
+		  ${0}
+	  </label>`), x => x.label);
+}
+function renderCharCount() {
+  return html(_t2 || (_t2 = _`
+		<span class="char-count">${0} / ${0}</span>
+	`), x => x.value ? x.value.length : 0, x => x.maxlength);
+}
+const TextfieldTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t3 || (_t3 = _`
+	<div class="base ${0}">
+    ${0}
+    ${0}
+    <div class="fieldset">
+      ${0}
+      <input class="control"
+            id="control"
+            @input="${0}"
+            @change="${0}"
+            ?autofocus="${0}"
+            ?disabled="${0}"
+            list="${0}"
+            maxlength="${0}"
+            minlength="${0}"
+            pattern="${0}"
+            placeholder="${0}"
+            ?readonly="${0}"
+            ?required="${0}"
+            size="${0}"
+            autocomplete="${0}"
+            name="${0}"
+            ?spellcheck="${0}"
+            :value="${0}"
+            type="${0}"
+            aria-atomic="${0}"
+            aria-busy="${0}"
+            aria-controls="${0}"
+            aria-current="${0}"
+            aria-describedby="${0}"
+            aria-details="${0}"
+            aria-disabled="${0}"
+            aria-errormessage="${0}"
+            aria-flowto="${0}"
+            aria-haspopup="${0}"
+            aria-hidden="${0}"
+            aria-invalid="${0}"
+            aria-keyshortcuts="${0}"
+            aria-label="${0}"
+            aria-labelledby="${0}"
+            aria-live="${0}"
+            aria-owns="${0}"
+            aria-relevant="${0}"
+            aria-roledescription="${0}"
+            ${0}
+      />
+      ${0}
+    </div>
+	  ${0}
+	  ${0}
+	  ${0}
+	</div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, when(x => {
+    var _a;
+    return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
+  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
 };
 
-const tooltipDefinition = Tooltip.compose({
-  baseName: 'tooltip',
-  template: TooltipTemplate,
-  styles: css_248z
+const textFieldDefinition = TextField.compose({
+  baseName: 'text-field',
+  template: TextfieldTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
-const registerTooltip = registerFactory(tooltipRegistries);
+const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTextField = registerFactory(textFieldRegistries);
 
-export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
+export { textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };