@vonage/vivid 3.37.0 → 3.38.0

package/shared/definition51.js

@@ -1,10 +1,17 @@
-import { a as attr, F as FoundationElement, D as DOM, h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition57.js';
+import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition56.js';
+import { a as iconRegistries } from './definition25.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
+import { T as TextField$1 } from './text-field2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { s as styles } from './text-field.js';
+import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
+import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.control {\n  display: inline-block;\n}\n\n.content-wrapper {\n  width: var(--toggletip-inline-size, auto);\n  padding: 16px;\n}\n\n.headline {\n  font: var(--vvd-typography-base-bold);\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n::slotted([slot=action-items]) {\n  margin-block-start: 16px;\n}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,135 +23,144 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Toggletip extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.#anchorEl = null;
-    this.#observeMissingAnchor = (anchorId) => {
-      this.#observer = new MutationObserver(() => {
-        const anchor = document.getElementById(anchorId);
-        if (anchor) {
-          this.#anchorEl = anchor;
-          this.#setupAnchor(this.#anchorEl);
-          this.#observer.disconnect();
-          this.#observer = void 0;
-        }
-      });
-      this.#observer.observe(document.body, { childList: true, subtree: true });
-    };
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
-    this.alternate = false;
-    this.placement = "right";
-    this.anchor = "";
-    this.open = false;
-    this.#openIfClosed = () => {
-      if (!this.open)
-        DOM.queueUpdate(() => this.open = true);
-    };
-    this.#closeOnClickOutside = (e) => {
-      if (!this.contains(e.target))
-        this.open = false;
-    };
-    this.#closeOnEscape = (e) => {
-      if (e.key === "Escape")
-        this.open = false;
-    };
-  }
-  #observer;
-  #anchorEl;
-  #observeMissingAnchor;
-  #ANCHOR_ARIA_LABEL_SUFFIX;
-  anchorChanged(_, newValue) {
-    if (this.#anchorEl)
-      this.#cleanupAnchor(this.#anchorEl);
-    this.#observer?.disconnect();
-    this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
-    if (this.#anchorEl) {
-      this.#setupAnchor(this.#anchorEl);
-    } else {
-      this.#observeMissingAnchor(newValue);
-    }
-  }
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0)
-      return;
-    if (newValue) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
-      this.setAttribute("role", "status");
-    } else {
-      document.removeEventListener("click", this.#closeOnClickOutside);
-      document.removeEventListener("keydown", this.#closeOnEscape);
-      this.removeAttribute("role");
-    }
-    if (this.#anchorEl) {
-      this.#anchorEl.ariaExpanded = this.open.toString();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#anchorEl)
-      this.#cleanupAnchor(this.#anchorEl);
-    this.#observer?.disconnect();
-    document.removeEventListener("keydown", this.#closeOnEscape);
-  }
-  #setupAnchor(a) {
-    a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
-  }
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
-  }
-  #openIfClosed;
-  #closeOnClickOutside;
-  #closeOnEscape;
-}
+let TextField = class extends TextField$1 {
+};
 __decorateClass([
   attr
-], Toggletip.prototype, "headline", 2);
+], TextField.prototype, "appearance", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate", 2);
+  attr
+], TextField.prototype, "shape", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Toggletip.prototype, "placement", 2);
+  attr
+], TextField.prototype, "autoComplete", 2);
 __decorateClass([
-  attr({ mode: "fromView" })
-], Toggletip.prototype, "anchor", 2);
+  observable
+], TextField.prototype, "actionItemsSlottedContent", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "open", 2);
+  observable
+], TextField.prototype, "leadingActionItemsSlottedContent", 2);
+TextField = __decorateClass([
+  errorText,
+  formElements
+], TextField);
+applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
 
-const getClasses = (_) => classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(Popup);
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent,
+  leadingActionItemsSlottedContent,
+  icon
+}) => 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],
+  ["has-icon", !!icon],
+  ["success connotation-success", Boolean(successText)],
+  ["action-items", !!actionItemsSlottedContent?.length],
+  ["leading-action-items", !!leadingActionItemsSlottedContent?.length],
+  ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)]
+);
+function renderLabel() {
   return html`
-		<${popup}
-			class="${getClasses}"
-			arrow
-			:anchor="${(x) => x.anchor}"
-			:open="${(x) => x.open}"
-			?alternate="${(x) => !x.alternate}"
-			placement="${(x) => x.placement}"
-			exportparts="vvd-theme-alternate"
-		>
-			<div class="content-wrapper">
-				${when((x) => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
-				<slot></slot>
-				<footer class="action-items"><slot name="action-items"></slot></footer>
-			</div>
-		</${popup}>
+	  <label for="control" class="label">
+		  ${(x) => x.label}
+	  </label>`;
+}
+function renderCharCount() {
+  return html`
+		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
 	`;
+}
+const TextfieldTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html`
+	<div class="base ${getStateClasses}">
+    ${when((x) => x.charCount && x.maxlength, renderCharCount())}
+    ${when((x) => x.label, renderLabel())}
+    <div class="fieldset">
+			<div class="leading-items-wrapper">
+				<slot name="leading-action-items"  ${slotted("leadingActionItemsSlottedContent")}></slot>
+				${(x) => affixIconTemplate(x.icon)}
+			</div>
+
+			<div class="wrapper">
+				<input class="control"
+            id="control"
+            @input="${(x) => x.handleTextInput()}"
+            @change="${(x) => x.handleChange()}"
+            ?autofocus="${(x) => x.autofocus}"
+            ?disabled="${(x) => x.disabled}"
+            list="${(x) => x.list}"
+            maxlength="${(x) => x.maxlength}"
+            minlength="${(x) => x.minlength}"
+            pattern="${(x) => x.pattern}"
+            placeholder="${(x) => x.placeholder}"
+            ?readonly="${(x) => x.readOnly}"
+            ?required="${(x) => x.required}"
+            size="${(x) => x.size}"
+            autocomplete="${(x) => x.autoComplete}"
+            name="${(x) => x.name}"
+            ?spellcheck="${(x) => x.spellcheck}"
+            :value="${(x) => x.value}"
+            type="${(x) => x.type}"
+            aria-atomic="${(x) => x.ariaAtomic}"
+            aria-busy="${(x) => x.ariaBusy}"
+            aria-controls="${(x) => x.ariaControls}"
+            aria-current="${(x) => x.ariaCurrent}"
+            aria-describedby="${(x) => x.ariaDescribedby}"
+            aria-details="${(x) => x.ariaDetails}"
+            aria-disabled="${(x) => x.ariaDisabled}"
+            aria-errormessage="${(x) => x.ariaErrormessage}"
+            aria-flowto="${(x) => x.ariaFlowto}"
+            aria-haspopup="${(x) => x.ariaHaspopup}"
+            aria-hidden="${(x) => x.ariaHidden}"
+            aria-invalid="${(x) => x.ariaInvalid}"
+            aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+            aria-label="${(x) => x.ariaLabel}"
+            aria-labelledby="${(x) => x.ariaLabelledby}"
+            aria-live="${(x) => x.ariaLive}"
+            aria-owns="${(x) => x.ariaOwns}"
+            aria-relevant="${(x) => x.ariaRelevant}"
+            aria-roledescription="${(x) => x.ariaRoledescription}"
+            ${ref("control")}
+      />
+				${() => focusTemplate}
+			</div>
+			<div class="action-items-wrapper">
+				<slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot>
+			</div>
+
+    </div>
+	  ${when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
+	  ${when((x) => !x.successText && x.errorValidationMessage, getFeedbackTemplate("error", context))}
+	  ${when((x) => x.successText, getFeedbackTemplate("success", context))}
+	</div>`;
 };
 
-const toggletipDefinition = Toggletip.compose({
-  baseName: "toggletip",
-  template: ToggletipTemplate,
-  styles
+const textFieldDefinition = TextField.compose({
+  baseName: "text-field",
+  template: TextfieldTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
-const registerToggletip = registerFactory(toggletipRegistries);
+const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTextField = registerFactory(textFieldRegistries);
 
-export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };
+export { TextField as T, textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };

package/shared/definition52.js

@@ -1,8 +1,9 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition57.js';
+import { a as attr, F as FoundationElement, D as DOM, h as html, r as registerFactory } from './index.js';
+import { P as Popup, p as popupRegistries } from './definition58.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 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}";
+const styles = "/**\n * Do not edit directly\n * Generated on Fri, 13 Oct 2023 14:45:50 GMT\n */\n.control {\n  display: inline-block;\n}\n\n.content-wrapper {\n  width: var(--toggletip-inline-size, auto);\n  padding: 16px;\n}\n\n.headline {\n  font: var(--vvd-typography-base-bold);\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n::slotted([slot=action-items]) {\n  margin-block-start: 16px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,126 +16,135 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Tooltip extends FoundationElement {
+class Toggletip extends FoundationElement {
   constructor() {
     super(...arguments);
     this.#anchorEl = null;
-    this.open = false;
     this.#observeMissingAnchor = (anchorId) => {
       this.#observer = new MutationObserver(() => {
         const anchor = document.getElementById(anchorId);
         if (anchor) {
           this.#anchorEl = anchor;
-          this.#anchorUpdated();
+          this.#setupAnchor(this.#anchorEl);
           this.#observer.disconnect();
           this.#observer = void 0;
         }
       });
       this.#observer.observe(document.body, { childList: true, subtree: true });
     };
-    this.#show = () => {
-      this.open = true;
+    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.alternate = false;
+    this.placement = "right";
+    this.anchor = "";
+    this.open = false;
+    this.#openIfClosed = () => {
+      if (!this.open)
+        DOM.queueUpdate(() => this.open = true);
     };
-    this.#hide = () => {
-      this.open = false;
+    this.#closeOnClickOutside = (e) => {
+      if (!this.contains(e.target))
+        this.open = false;
     };
     this.#closeOnEscape = (e) => {
       if (e.key === "Escape")
-        this.#hide();
+        this.open = false;
     };
   }
-  #anchorEl;
   #observer;
+  #anchorEl;
+  #observeMissingAnchor;
+  #ANCHOR_ARIA_LABEL_SUFFIX;
   anchorChanged(_, newValue) {
     if (this.#anchorEl)
-      this.#removeEventListener();
+      this.#cleanupAnchor(this.#anchorEl);
     this.#observer?.disconnect();
     this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
     if (this.#anchorEl) {
-      this.#anchorUpdated();
+      this.#setupAnchor(this.#anchorEl);
     } else {
       this.#observeMissingAnchor(newValue);
     }
   }
-  #observeMissingAnchor;
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0)
+      return;
+    if (newValue) {
+      document.addEventListener("click", this.#closeOnClickOutside);
+      document.addEventListener("keydown", this.#closeOnEscape);
+      this.setAttribute("role", "status");
+    } else {
+      document.removeEventListener("click", this.#closeOnClickOutside);
+      document.removeEventListener("keydown", this.#closeOnEscape);
+      this.removeAttribute("role");
+    }
+    if (this.#anchorEl) {
+      this.#anchorEl.ariaExpanded = this.open.toString();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#removeEventListener();
+    if (this.#anchorEl)
+      this.#cleanupAnchor(this.#anchorEl);
     this.#observer?.disconnect();
     document.removeEventListener("keydown", this.#closeOnEscape);
   }
-  #anchorUpdated() {
-    this.#removeEventListener();
-    this.#addEventListener();
+  #setupAnchor(a) {
+    a.addEventListener("click", this.#openIfClosed, true);
+    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
   }
-  #addEventListener() {
-    if (this.#anchorEl) {
-      this.#anchorEl.addEventListener("mouseover", this.#show);
-      this.#anchorEl.addEventListener("mouseout", this.#hide);
-      this.#anchorEl.addEventListener("focusin", this.#show);
-      this.#anchorEl.addEventListener("focusout", this.#hide);
-    }
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#openIfClosed, true);
+    if (a.ariaLabel)
+      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
   }
-  #removeEventListener() {
-    this.#anchorEl?.removeEventListener("mouseover", this.#show);
-    this.#anchorEl?.removeEventListener("mouseout", this.#hide);
-    this.#anchorEl?.removeEventListener("focusin", this.#show);
-    this.#anchorEl?.removeEventListener("focusout", this.#hide);
-  }
-  #show;
-  #hide;
+  #openIfClosed;
+  #closeOnClickOutside;
   #closeOnEscape;
-  openChanged(_, newValue) {
-    if (_ === void 0)
-      return;
-    if (newValue) {
-      document.addEventListener("keydown", this.#closeOnEscape);
-    } else {
-      document.removeEventListener("keydown", this.#closeOnEscape);
-    }
-  }
 }
 __decorateClass([
   attr
-], Tooltip.prototype, "text", 2);
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tooltip.prototype, "placement", 2);
+], Toggletip.prototype, "headline", 2);
 __decorateClass([
   attr({ mode: "boolean" })
-], Tooltip.prototype, "open", 2);
+], Toggletip.prototype, "alternate", 2);
 __decorateClass([
   attr({ mode: "fromView" })
-], Tooltip.prototype, "anchor", 2);
+], Toggletip.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "anchor", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "open", 2);
 
-const getClasses = ({
-  open
-}) => classNames(
-  "control",
-  ["open", Boolean(open)]
-);
-const TooltipTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
+const getClasses = (_) => classNames("control");
+const ToggletipTemplate = (context) => {
+  const popup = context.tagFor(Popup);
   return html`
-<${popupTag} class="${getClasses}" arrow alternate
-	:placement=${(x) => x.placement}
-	:anchor="${(x) => x.anchor}"
-	:open=${(x) => x.open}
-  exportparts="vvd-theme-alternate">
-  <div class="tooltip" role="tooltip">
-    <header part="vvd-theme-alternate" class="tooltip-header">
-      <div class="tooltip-text">${(x) => x.text}</div>
-    </header>
-  </div>
-</${popupTag}>`;
+		<${popup}
+			class="${getClasses}"
+			arrow
+			:anchor="${(x) => x.anchor}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${when((x) => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
+				<slot></slot>
+				<footer class="action-items"><slot name="action-items"></slot></footer>
+			</div>
+		</${popup}>
+	`;
 };
 
-const tooltipDefinition = Tooltip.compose({
-  baseName: "tooltip",
-  template: TooltipTemplate,
+const toggletipDefinition = Toggletip.compose({
+  baseName: "toggletip",
+  template: ToggletipTemplate,
   styles
 });
-const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
-const registerTooltip = registerFactory(tooltipRegistries);
+const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
+const registerToggletip = registerFactory(toggletipRegistries);
 
-export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
+export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };