@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition58.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition = require('./definition64.cjs');
+const definition = require('./definition63.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const anchored = require('./anchored.cjs');
-const index$1 = require('./index2.cjs');
-const when = require('./when.cjs');
+const vividElement = require('./vivid-element.cjs');
+const index = require('./index.cjs');
 const classNames = require('./class-names.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}";
+const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,140 +26,114 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _ANCHOR_ARIA_LABEL_SUFFIX, _Toggletip_instances, setupAnchor_fn, updateAnchor_fn, cleanupAnchor_fn, _openIfClosed, updateListeners_fn, _closeOnClickOutside, _closeOnEscape;
-let Toggletip = class extends index.FoundationElement {
+var _Tooltip_instances, setupAnchor_fn, cleanupAnchor_fn, _show, _hide, updateListeners_fn, _closeOnEscape;
+let Tooltip = class extends vividElement.VividElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _Toggletip_instances);
-    __privateAdd(this, _ANCHOR_ARIA_LABEL_SUFFIX, " ; Show more information");
-    this.alternate = false;
-    this.placement = "right";
+    __privateAdd(this, _Tooltip_instances);
     this.open = false;
-    __privateAdd(this, _openIfClosed, () => {
-      if (!this.open) index.DOM.queueUpdate(() => this.open = true);
+    __privateAdd(this, _show, () => {
+      this.open = true;
     });
-    __privateAdd(this, _closeOnClickOutside, (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
+    __privateAdd(this, _hide, () => {
+      this.open = false;
     });
     __privateAdd(this, _closeOnEscape, (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
+      if (e.key === "Escape") __privateGet(this, _hide).call(this);
     });
   }
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    if (newValue) {
-      this.setAttribute("role", "status");
-    } else {
-      this.removeAttribute("role");
-    }
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
-    if (this._anchorEl) {
-      __privateMethod(this, _Toggletip_instances, updateAnchor_fn).call(this, this._anchorEl);
-    }
-  }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue) __privateMethod(this, _Toggletip_instances, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue) __privateMethod(this, _Toggletip_instances, setupAnchor_fn).call(this, newValue);
+    if (oldValue) __privateMethod(this, _Tooltip_instances, cleanupAnchor_fn).call(this, oldValue);
+    if (newValue) __privateMethod(this, _Tooltip_instances, setupAnchor_fn).call(this, newValue);
+  }
+  /**
+   * @internal
+   */
+  openChanged(oldValue) {
+    if (oldValue === void 0) return;
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
 };
-_ANCHOR_ARIA_LABEL_SUFFIX = new WeakMap();
-_Toggletip_instances = new WeakSet();
+_Tooltip_instances = new WeakSet();
 setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _openIfClosed), true);
-  a.ariaLabel = (a.ariaLabel ?? "") + __privateGet(this, _ANCHOR_ARIA_LABEL_SUFFIX);
-  __privateMethod(this, _Toggletip_instances, updateAnchor_fn).call(this, a);
-};
-updateAnchor_fn = function(a) {
-  a.setAttribute("aria-expanded", this.open.toString());
+  a.addEventListener("mouseover", __privateGet(this, _show));
+  a.addEventListener("mouseout", __privateGet(this, _hide));
+  a.addEventListener("focusin", __privateGet(this, _show));
+  a.addEventListener("focusout", __privateGet(this, _hide));
 };
 cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _openIfClosed), true);
-  if (a.ariaLabel)
-    a.ariaLabel = a.ariaLabel.replace(__privateGet(this, _ANCHOR_ARIA_LABEL_SUFFIX), "");
+  a.removeEventListener("mouseover", __privateGet(this, _show));
+  a.removeEventListener("mouseout", __privateGet(this, _hide));
+  a.removeEventListener("focusin", __privateGet(this, _show));
+  a.removeEventListener("focusout", __privateGet(this, _hide));
 };
-_openIfClosed = new WeakMap();
+_show = new WeakMap();
+_hide = new WeakMap();
 updateListeners_fn = function() {
-  document.removeEventListener("click", __privateGet(this, _closeOnClickOutside));
   document.removeEventListener("keydown", __privateGet(this, _closeOnEscape));
   if (this.open && this.isConnected) {
-    document.addEventListener("click", __privateGet(this, _closeOnClickOutside));
     document.addEventListener("keydown", __privateGet(this, _closeOnEscape));
   }
 };
-_closeOnClickOutside = new WeakMap();
 _closeOnEscape = new WeakMap();
 __decorateClass([
-  index.attr
-], Toggletip.prototype, "headline", 2);
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate", 2);
+  defineVividComponent.attr
+], Tooltip.prototype, "text", 2);
 __decorateClass([
-  index.attr({ mode: "fromView" })
-], Toggletip.prototype, "placement", 2);
+  defineVividComponent.attr({ mode: "fromView" })
+], Tooltip.prototype, "placement", 2);
 __decorateClass([
-  index.attr({ mode: "boolean" })
-], Toggletip.prototype, "open", 2);
-Toggletip = __decorateClass([
+  defineVividComponent.attr({ mode: "boolean" })
+], Tooltip.prototype, "open", 2);
+Tooltip = __decorateClass([
   anchored.anchored
-], Toggletip);
+], Tooltip);
 
-const getClasses = (_) => classNames.classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(definition.Popup);
+const getClasses = ({ open }) => classNames.classNames("control", ["open", Boolean(open)]);
+const TooltipTemplate = (context) => {
+  const popupTag = context.tagFor(definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return index.html`
-		${anchorSlotTemplate}
-		<${popup}
-			@keydown="${(x, { event }) => {
-    if (x.open && index$1.handleEscapeKeyAndStopPropogation(event)) {
-      return false;
+  return defineVividComponent.html`
+${anchorSlotTemplate}
+<${popupTag} class="${getClasses}" arrow alternate
+	:placement=${(x) => x.placement}
+	:anchor="${(x) => x._anchorEl}"
+	:open="${(x) => x.open}"
+	@keydown="${(x, c) => {
+    if (x.open && index.handleEscapeKeyAndStopPropogation(c.event)) {
+      x.open = 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,
-    index.html`<header class="headline">${(x) => x.headline}</header>`
-  )}
-				<slot></slot>
-				<footer class="action-items"><slot name="action-items"></slot></footer>
-			</div>
-		</${popup}>
-	`;
+  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}>`;
 };
 
-const toggletipDefinition = Toggletip.compose({
-  baseName: "toggletip",
-  template: ToggletipTemplate,
-  styles
-});
-const toggletipRegistries = [toggletipDefinition(), ...definition.popupRegistries];
-const registerToggletip = index.registerFactory(toggletipRegistries);
+const tooltipDefinition = defineVividComponent.defineVividComponent(
+  "tooltip",
+  Tooltip,
+  TooltipTemplate,
+  [definition.popupDefinition],
+  {
+    styles
+  }
+);
+const registerTooltip = defineVividComponent.createRegisterFunction(tooltipDefinition);
 
-exports.registerToggletip = registerToggletip;
-exports.toggletipDefinition = toggletipDefinition;
-exports.toggletipRegistries = toggletipRegistries;
+exports.registerTooltip = registerTooltip;
+exports.tooltipDefinition = tooltipDefinition;

package/shared/definition58.js

@@ -1,11 +1,11 @@
-import { F as FoundationElement, a as attr, D as DOM, h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition64.js';
-import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
-import { w as when } from './when.js';
+import { P as Popup, p as popupDefinition } from './definition63.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
+import { V as VividElement } from './vivid-element.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 
-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}";
+const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,138 +24,113 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _ANCHOR_ARIA_LABEL_SUFFIX, _Toggletip_instances, setupAnchor_fn, updateAnchor_fn, cleanupAnchor_fn, _openIfClosed, updateListeners_fn, _closeOnClickOutside, _closeOnEscape;
-let Toggletip = class extends FoundationElement {
+var _Tooltip_instances, setupAnchor_fn, cleanupAnchor_fn, _show, _hide, updateListeners_fn, _closeOnEscape;
+let Tooltip = class extends VividElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _Toggletip_instances);
-    __privateAdd(this, _ANCHOR_ARIA_LABEL_SUFFIX, " ; Show more information");
-    this.alternate = false;
-    this.placement = "right";
+    __privateAdd(this, _Tooltip_instances);
     this.open = false;
-    __privateAdd(this, _openIfClosed, () => {
-      if (!this.open) DOM.queueUpdate(() => this.open = true);
+    __privateAdd(this, _show, () => {
+      this.open = true;
     });
-    __privateAdd(this, _closeOnClickOutside, (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
+    __privateAdd(this, _hide, () => {
+      this.open = false;
     });
     __privateAdd(this, _closeOnEscape, (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
+      if (e.key === "Escape") __privateGet(this, _hide).call(this);
     });
   }
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    if (newValue) {
-      this.setAttribute("role", "status");
-    } else {
-      this.removeAttribute("role");
-    }
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
-    if (this._anchorEl) {
-      __privateMethod(this, _Toggletip_instances, updateAnchor_fn).call(this, this._anchorEl);
-    }
-  }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateMethod(this, _Toggletip_instances, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue) __privateMethod(this, _Toggletip_instances, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue) __privateMethod(this, _Toggletip_instances, setupAnchor_fn).call(this, newValue);
+    if (oldValue) __privateMethod(this, _Tooltip_instances, cleanupAnchor_fn).call(this, oldValue);
+    if (newValue) __privateMethod(this, _Tooltip_instances, setupAnchor_fn).call(this, newValue);
+  }
+  /**
+   * @internal
+   */
+  openChanged(oldValue) {
+    if (oldValue === void 0) return;
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
 };
-_ANCHOR_ARIA_LABEL_SUFFIX = new WeakMap();
-_Toggletip_instances = new WeakSet();
+_Tooltip_instances = new WeakSet();
 setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _openIfClosed), true);
-  a.ariaLabel = (a.ariaLabel ?? "") + __privateGet(this, _ANCHOR_ARIA_LABEL_SUFFIX);
-  __privateMethod(this, _Toggletip_instances, updateAnchor_fn).call(this, a);
-};
-updateAnchor_fn = function(a) {
-  a.setAttribute("aria-expanded", this.open.toString());
+  a.addEventListener("mouseover", __privateGet(this, _show));
+  a.addEventListener("mouseout", __privateGet(this, _hide));
+  a.addEventListener("focusin", __privateGet(this, _show));
+  a.addEventListener("focusout", __privateGet(this, _hide));
 };
 cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _openIfClosed), true);
-  if (a.ariaLabel)
-    a.ariaLabel = a.ariaLabel.replace(__privateGet(this, _ANCHOR_ARIA_LABEL_SUFFIX), "");
+  a.removeEventListener("mouseover", __privateGet(this, _show));
+  a.removeEventListener("mouseout", __privateGet(this, _hide));
+  a.removeEventListener("focusin", __privateGet(this, _show));
+  a.removeEventListener("focusout", __privateGet(this, _hide));
 };
-_openIfClosed = new WeakMap();
+_show = new WeakMap();
+_hide = new WeakMap();
 updateListeners_fn = function() {
-  document.removeEventListener("click", __privateGet(this, _closeOnClickOutside));
   document.removeEventListener("keydown", __privateGet(this, _closeOnEscape));
   if (this.open && this.isConnected) {
-    document.addEventListener("click", __privateGet(this, _closeOnClickOutside));
     document.addEventListener("keydown", __privateGet(this, _closeOnEscape));
   }
 };
-_closeOnClickOutside = new WeakMap();
 _closeOnEscape = new WeakMap();
 __decorateClass([
   attr
-], Toggletip.prototype, "headline", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate", 2);
+], Tooltip.prototype, "text", 2);
 __decorateClass([
   attr({ mode: "fromView" })
-], Toggletip.prototype, "placement", 2);
+], Tooltip.prototype, "placement", 2);
 __decorateClass([
   attr({ mode: "boolean" })
-], Toggletip.prototype, "open", 2);
-Toggletip = __decorateClass([
+], Tooltip.prototype, "open", 2);
+Tooltip = __decorateClass([
   anchored
-], Toggletip);
+], Tooltip);
 
-const getClasses = (_) => classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(Popup);
+const getClasses = ({ open }) => classNames("control", ["open", Boolean(open)]);
+const TooltipTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
   const anchorSlotTemplate = anchorSlotTemplateFactory();
   return html`
-		${anchorSlotTemplate}
-		<${popup}
-			@keydown="${(x, { event }) => {
-    if (x.open && handleEscapeKeyAndStopPropogation(event)) {
-      return false;
+${anchorSlotTemplate}
+<${popupTag} class="${getClasses}" arrow alternate
+	:placement=${(x) => x.placement}
+	:anchor="${(x) => x._anchorEl}"
+	:open="${(x) => x.open}"
+	@keydown="${(x, c) => {
+    if (x.open && handleEscapeKeyAndStopPropogation(c.event)) {
+      x.open = 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(
-    (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}>
-	`;
+  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}>`;
 };
 
-const toggletipDefinition = Toggletip.compose({
-  baseName: "toggletip",
-  template: ToggletipTemplate,
-  styles
-});
-const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
-const registerToggletip = registerFactory(toggletipRegistries);
+const tooltipDefinition = defineVividComponent(
+  "tooltip",
+  Tooltip,
+  TooltipTemplate,
+  [popupDefinition],
+  {
+    styles
+  }
+);
+const registerTooltip = createRegisterFunction(tooltipDefinition);
 
-export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };
+export { registerTooltip as r, tooltipDefinition as t };