@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition51.js

@@ -1,117 +1,150 @@
-import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { I as Icon } from './icon.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 './definition57.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var _Tag_select;
-class Tag extends FoundationElement {
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 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) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Toggletip extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.removable = false;
-    this.disabled = false;
-    this.selectable = false;
-    this.selected = false;
-    _Tag_select.set(this, () => {
-      if (!this.selectable || this.disabled) {
-        return;
-      }
-      this.selected = !this.selected;
-      this.$emit('selected-change');
-    });
+    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;
+    };
   }
-  remove() {
-    if (!this.removable || this.selectable) {
-      return;
+  #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);
     }
-    this.$emit('removed');
-    this.parentElement && this.parentElement.removeChild(this);
   }
-  handleKeydown(e) {
-    if (e.key === 'Enter') {
-      __classPrivateFieldGet(this, _Tag_select, "f").call(this);
+  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 (e.key === 'Delete' || e.key === 'Backspace') {
-      this.remove();
+    if (this.#anchorEl) {
+      this.#anchorEl.ariaExpanded = this.open.toString();
     }
-    return true;
   }
-  handleClick() {
-    __classPrivateFieldGet(this, _Tag_select, "f").call(this);
+  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;
 }
-_Tag_select = new WeakMap();
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "shape", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "appearance", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "label", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "removable", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "disabled", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "selectable", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "selected", void 0);
-applyMixins(Tag, AffixIcon);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.base {\n  --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--tag-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-bold);\n  max-inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n  /* Shape */\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tag-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-tag-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-tag-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-tag-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tag-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tag-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tag-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tag-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tag-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-tag-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-tag-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tag-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tag-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tag-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-100);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n.base.shape-pill {\n  border-radius: 14px;\n}\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.base.removable {\n  cursor: auto;\n}\n\n.label {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.icon {\n  font-size: calc(var(--tag-block-size) / 1.5);\n  line-height: 1;\n}\n.icon > * {\n  vertical-align: middle;\n}\n\n.dismiss-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  cursor: pointer;\n}\n\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+__decorateClass([
+  attr
+], Toggletip.prototype, "headline", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "alternate", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Toggletip.prototype, "anchor", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "open", 2);
 
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  selectable,
-  removable,
-  selected
-}) => classNames('base', ['disabled', disabled], ['selectable', selectable], ['active', selectable && selected], ['removable', removable && !selectable], [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
-function renderDismissButton(iconTag) {
+const getClasses = (_) => classNames("control");
+const ToggletipTemplate = (context) => {
+  const popup = context.tagFor(Popup);
   return html`
-	<span
-		aria-hidden="true"
-		class="dismiss-button"
-		@click="${x => x.remove()}">
-		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
-}
-const tagTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-	<span class="${getClasses}"
-	role="option"
-	aria-disabled="${x => x.disabled}"
-	aria-selected="${x => x.selectable}"
-	tabindex="${x => x.disabled ? null : 0}"
-	@keydown="${(x, c) => x.handleKeydown(c.event)}"
-	@click="${x => x.handleClick()}">
-		${x => affixIconTemplate(x.icon)}
-		${when(x => x.label, x => html`<span class="label">${x.label}</span>`)}
-		${when(x => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${when(x => x.selectable && x.selected, html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`)}
-		${() => focusTemplate}
-	</span>`;
+		<${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 tagDefinition = Tag.compose({
-  baseName: 'tag',
-  template: tagTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const toggletipDefinition = Toggletip.compose({
+  baseName: "toggletip",
+  template: ToggletipTemplate,
+  styles
 });
-const tagRegistries = [tagDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTag = registerFactory(tagRegistries);
+const toggletipRegistries = [toggletipDefinition(), ...popupRegistries];
+const registerToggletip = registerFactory(toggletipRegistries);
 
-export { registerTag as r, tagDefinition as t };
+export { toggletipRegistries as a, registerToggletip as r, toggletipDefinition as t };

package/shared/definition52.js

@@ -1,25 +1,140 @@
-import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
+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 { c as classNames } from './class-names.js';
 
-var css_248z = ".base {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 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}";
 
-class TagGroup extends FoundationElement {}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Tooltip 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.#observer.disconnect();
+          this.#observer = void 0;
+        }
+      });
+      this.#observer.observe(document.body, { childList: true, subtree: true });
+    };
+    this.#show = () => {
+      this.open = true;
+    };
+    this.#hide = () => {
+      this.open = false;
+    };
+    this.#closeOnEscape = (e) => {
+      if (e.key === "Escape")
+        this.#hide();
+    };
+  }
+  #anchorEl;
+  #observer;
+  anchorChanged(_, newValue) {
+    if (this.#anchorEl)
+      this.#removeEventListener();
+    this.#observer?.disconnect();
+    this.#anchorEl = newValue instanceof HTMLElement ? newValue : document.getElementById(newValue);
+    if (this.#anchorEl) {
+      this.#anchorUpdated();
+    } else {
+      this.#observeMissingAnchor(newValue);
+    }
+  }
+  #observeMissingAnchor;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#removeEventListener();
+    this.#observer?.disconnect();
+    document.removeEventListener("keydown", this.#closeOnEscape);
+  }
+  #anchorUpdated() {
+    this.#removeEventListener();
+    this.#addEventListener();
+  }
+  #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);
+    }
+  }
+  #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;
+  #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);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tooltip.prototype, "open", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Tooltip.prototype, "anchor", 2);
 
-const getClasses = _ => classNames('base');
-const TagGroupTemplate = () => {
+const getClasses = ({
+  open
+}) => classNames(
+  "control",
+  ["open", Boolean(open)]
+);
+const TooltipTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
   return html`
-		<div class="${getClasses}" role="listbox" aria-orientation="horizontal">
-			<slot></slot>
-		</div>
-	`;
+<${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}>`;
 };
 
-const tagGroupDefinition = TagGroup.compose({
-  baseName: 'tag-group',
-  template: TagGroupTemplate,
-  styles: css_248z
+const tooltipDefinition = Tooltip.compose({
+  baseName: "tooltip",
+  template: TooltipTemplate,
+  styles
 });
-const tagGroupRegistries = [tagGroupDefinition()];
-const registerTagGroup = registerFactory(tagGroupRegistries);
+const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
+const registerTooltip = registerFactory(tooltipRegistries);
 
-export { tagGroupRegistries as a, registerTagGroup as r, tagGroupDefinition as t };
+export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };