@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition59.js

@@ -1,150 +1,34 @@
-import { P as Popup, p as popupDefinition } from './definition65.js';
-import { D as DOM, V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { t as textFieldDefinition } from './definition58.js';
+import { p as popupDefinition } from './definition67.js';
+import { b as buttonDefinition } from './definition11.js';
+import { d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
+import { a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition, T as TimePicker } from './time-selection-picker.template.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}";
-
-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 TimePickerTemplate = (context) => {
+  return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
+    withSeparator: true,
+    padded: false
+  });
 };
-class Toggletip extends Anchored(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
-    this.alternate = false;
-    this.placement = "right";
-    this.open = false;
-    this.#openIfClosed = () => {
-      if (!this.open) DOM.queueUpdate(() => this.open = true);
-    };
-    this.#closeOnClickOutside = (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
-    };
-    this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
-    };
-  }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    if (newValue) {
-      this.setAttribute("role", "status");
-    } else {
-      this.removeAttribute("role");
-    }
-    this.#updateListeners();
-    if (this._anchorEl) {
-      this.#updateAnchor(this._anchorEl);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#updateListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#updateListeners();
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(oldValue, newValue) {
-    if (oldValue) this.#cleanupAnchor(oldValue);
-    if (newValue) this.#setupAnchor(newValue);
-  }
-  #setupAnchor(a) {
-    a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
-    this.#updateAnchor(a);
-  }
-  #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-  }
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
-  }
-  #openIfClosed;
-  #updateListeners() {
-    document.removeEventListener("click", this.#closeOnClickOutside);
-    document.removeEventListener("keydown", this.#closeOnEscape);
-    if (this.open && this.isConnected) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
-    }
-  }
-  #closeOnClickOutside;
-  #closeOnEscape;
-}
-__decorateClass([
-  attr
-], Toggletip.prototype, "headline");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "alternate");
-__decorateClass([
-  attr({ mode: "fromView" })
-], Toggletip.prototype, "placement");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Toggletip.prototype, "open");
 
-const getClasses = (_) => classNames("control");
-const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(Popup);
-  const anchorSlotTemplate = anchorSlotTemplateFactory();
-  return html`
-		${anchorSlotTemplate}
-		<${popup}
-			@keydown="${(x, { event }) => {
-    if (x.open && handleEscapeKeyAndStopPropogation(event)) {
-      return 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}>
-	`;
-};
-
-const toggletipDefinition = defineVividComponent(
-  "toggletip",
-  Toggletip,
-  ToggletipTemplate,
-  [popupDefinition],
+const timePickerDefinition = defineVividComponent(
+  "time-picker",
+  TimePicker,
+  TimePickerTemplate,
+  [
+    textFieldDefinition,
+    popupDefinition,
+    buttonDefinition,
+    inlineTimePickerDefinition
+  ],
   {
-    styles
+    styles: pickerFieldStyles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerToggletip = createRegisterFunction(toggletipDefinition);
+const registerTimePicker = createRegisterFunction(timePickerDefinition);
 
-export { Toggletip as T, registerToggletip as r, toggletipDefinition as t };
+export { registerTimePicker as r, timePickerDefinition as t };

package/shared/definition6.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 

package/shared/definition60.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
-const definition = require('./definition65.cjs');
+const definition = require('./definition67.cjs');
 const vividElement = require('./vivid-element.cjs');
 const anchored = require('./anchored.cjs');
 const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
-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)}";
+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{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,20 +18,40 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tooltip extends anchored.Anchored(vividElement.VividElement) {
+class Toggletip extends anchored.Anchored(vividElement.VividElement) {
   constructor() {
     super(...arguments);
+    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.alternate = false;
+    this.placement = "right";
     this.open = false;
-    this.#show = () => {
-      this.open = true;
+    this.#openIfClosed = () => {
+      if (!this.open) vividElement.DOM.queueUpdate(() => this.open = true);
     };
-    this.#hide = () => {
-      this.open = false;
+    this.#closeOnClickOutside = (e) => {
+      const clickedOutside = !this.contains(e.target);
+      const clickedOnAnchor = this._anchorEl?.contains(e.target);
+      if (clickedOutside || clickedOnAnchor) this.open = false;
     };
     this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") this.#hide();
+      if (e.key === "Escape") {
+        this.open = false;
+      }
     };
   }
+  #ANCHOR_ARIA_LABEL_SUFFIX;
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0) return;
+    if (newValue) {
+      this.setAttribute("role", "status");
+    } else {
+      this.removeAttribute("role");
+    }
+    this.#updateListeners();
+    if (this._anchorEl) {
+      this.#updateAnchor(this._anchorEl);
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     this.#updateListeners();
@@ -47,79 +68,87 @@ class Tooltip extends anchored.Anchored(vividElement.VividElement) {
     if (newValue) this.#setupAnchor(newValue);
   }
   #setupAnchor(a) {
-    a.addEventListener("mouseover", this.#show);
-    a.addEventListener("mouseout", this.#hide);
-    a.addEventListener("focusin", this.#show);
-    a.addEventListener("focusout", this.#hide);
+    a.addEventListener("click", this.#openIfClosed, true);
+    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#updateAnchor(a);
+  }
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+    a.setAttribute("data-expanded", this.open.toString());
   }
   #cleanupAnchor(a) {
-    a.removeEventListener("mouseover", this.#show);
-    a.removeEventListener("mouseout", this.#hide);
-    a.removeEventListener("focusin", this.#show);
-    a.removeEventListener("focusout", this.#hide);
+    a.removeEventListener("click", this.#openIfClosed, true);
+    if (a.ariaLabel)
+      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    a.removeAttribute("aria-expanded");
+    a.removeAttribute("data-expanded");
   }
-  #show;
-  #hide;
+  #openIfClosed;
   #updateListeners() {
+    document.removeEventListener("click", this.#closeOnClickOutside);
     document.removeEventListener("keydown", this.#closeOnEscape);
     if (this.open && this.isConnected) {
+      document.addEventListener("click", this.#closeOnClickOutside);
       document.addEventListener("keydown", this.#closeOnEscape);
     }
   }
+  #closeOnClickOutside;
   #closeOnEscape;
-  /**
-   * @internal
-   */
-  openChanged(oldValue) {
-    if (oldValue === void 0) return;
-    this.#updateListeners();
-  }
 }
 __decorateClass([
   vividElement.attr
-], Tooltip.prototype, "text");
+], Toggletip.prototype, "headline");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Toggletip.prototype, "alternate");
 __decorateClass([
   vividElement.attr({ mode: "fromView" })
-], Tooltip.prototype, "placement");
+], Toggletip.prototype, "placement");
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
-], Tooltip.prototype, "open");
+], Toggletip.prototype, "open");
 
-const getClasses = ({ open }) => classNames.classNames("control", ["open", Boolean(open)]);
-const TooltipTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
+const getClasses = (_) => classNames.classNames("control");
+const ToggletipTemplate = (context) => {
+  const popup = context.tagFor(definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
   return vividElement.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;
+		${anchorSlotTemplate}
+		<${popup}
+			@keydown="${(x, { event }) => {
+    if (x.open && index.handleEscapeKeyAndStopPropogation(event)) {
+      return false;
     }
+    return true;
   }}"
-  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}>`;
+			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, vividElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${popup}>
+	`;
 };
 
-const tooltipDefinition = vividElement.defineVividComponent(
-  "tooltip",
-  Tooltip,
-  TooltipTemplate,
+const toggletipDefinition = vividElement.defineVividComponent(
+  "toggletip",
+  Toggletip,
+  ToggletipTemplate,
   [definition.popupDefinition],
   {
     styles
   }
 );
-const registerTooltip = vividElement.createRegisterFunction(tooltipDefinition);
+const registerToggletip = vividElement.createRegisterFunction(toggletipDefinition);
 
-exports.Tooltip = Tooltip;
-exports.registerTooltip = registerTooltip;
-exports.tooltipDefinition = tooltipDefinition;
+exports.Toggletip = Toggletip;
+exports.registerToggletip = registerToggletip;
+exports.toggletipDefinition = toggletipDefinition;

package/shared/definition60.js

@@ -1,10 +1,11 @@
-import { P as Popup, p as popupDefinition } from './definition65.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { P as Popup, p as popupDefinition } from './definition67.js';
+import { D as DOM, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
-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)}";
+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{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,20 +16,40 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tooltip extends Anchored(VividElement) {
+class Toggletip extends Anchored(VividElement) {
   constructor() {
     super(...arguments);
+    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.alternate = false;
+    this.placement = "right";
     this.open = false;
-    this.#show = () => {
-      this.open = true;
+    this.#openIfClosed = () => {
+      if (!this.open) DOM.queueUpdate(() => this.open = true);
     };
-    this.#hide = () => {
-      this.open = false;
+    this.#closeOnClickOutside = (e) => {
+      const clickedOutside = !this.contains(e.target);
+      const clickedOnAnchor = this._anchorEl?.contains(e.target);
+      if (clickedOutside || clickedOnAnchor) this.open = false;
     };
     this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") this.#hide();
+      if (e.key === "Escape") {
+        this.open = false;
+      }
     };
   }
+  #ANCHOR_ARIA_LABEL_SUFFIX;
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0) return;
+    if (newValue) {
+      this.setAttribute("role", "status");
+    } else {
+      this.removeAttribute("role");
+    }
+    this.#updateListeners();
+    if (this._anchorEl) {
+      this.#updateAnchor(this._anchorEl);
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     this.#updateListeners();
@@ -45,77 +66,85 @@ class Tooltip extends Anchored(VividElement) {
     if (newValue) this.#setupAnchor(newValue);
   }
   #setupAnchor(a) {
-    a.addEventListener("mouseover", this.#show);
-    a.addEventListener("mouseout", this.#hide);
-    a.addEventListener("focusin", this.#show);
-    a.addEventListener("focusout", this.#hide);
+    a.addEventListener("click", this.#openIfClosed, true);
+    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#updateAnchor(a);
+  }
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+    a.setAttribute("data-expanded", this.open.toString());
   }
   #cleanupAnchor(a) {
-    a.removeEventListener("mouseover", this.#show);
-    a.removeEventListener("mouseout", this.#hide);
-    a.removeEventListener("focusin", this.#show);
-    a.removeEventListener("focusout", this.#hide);
+    a.removeEventListener("click", this.#openIfClosed, true);
+    if (a.ariaLabel)
+      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    a.removeAttribute("aria-expanded");
+    a.removeAttribute("data-expanded");
   }
-  #show;
-  #hide;
+  #openIfClosed;
   #updateListeners() {
+    document.removeEventListener("click", this.#closeOnClickOutside);
     document.removeEventListener("keydown", this.#closeOnEscape);
     if (this.open && this.isConnected) {
+      document.addEventListener("click", this.#closeOnClickOutside);
       document.addEventListener("keydown", this.#closeOnEscape);
     }
   }
+  #closeOnClickOutside;
   #closeOnEscape;
-  /**
-   * @internal
-   */
-  openChanged(oldValue) {
-    if (oldValue === void 0) return;
-    this.#updateListeners();
-  }
 }
 __decorateClass([
   attr
-], Tooltip.prototype, "text");
+], Toggletip.prototype, "headline");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Toggletip.prototype, "alternate");
 __decorateClass([
   attr({ mode: "fromView" })
-], Tooltip.prototype, "placement");
+], Toggletip.prototype, "placement");
 __decorateClass([
   attr({ mode: "boolean" })
-], Tooltip.prototype, "open");
+], Toggletip.prototype, "open");
 
-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);
   const anchorSlotTemplate = anchorSlotTemplateFactory();
   return 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 && handleEscapeKeyAndStopPropogation(c.event)) {
-      x.open = false;
+		${anchorSlotTemplate}
+		<${popup}
+			@keydown="${(x, { event }) => {
+    if (x.open && handleEscapeKeyAndStopPropogation(event)) {
+      return false;
     }
+    return true;
   }}"
-  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}>`;
+			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`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${popup}>
+	`;
 };
 
-const tooltipDefinition = defineVividComponent(
-  "tooltip",
-  Tooltip,
-  TooltipTemplate,
+const toggletipDefinition = defineVividComponent(
+  "toggletip",
+  Toggletip,
+  ToggletipTemplate,
   [popupDefinition],
   {
     styles
   }
 );
-const registerTooltip = createRegisterFunction(tooltipDefinition);
+const registerToggletip = createRegisterFunction(toggletipDefinition);
 
-export { Tooltip as T, registerTooltip as r, tooltipDefinition as t };
+export { Toggletip as T, registerToggletip as r, toggletipDefinition as t };