@vonage/vivid 5.7.0 → 5.9.0

package/popover/definition.cjs

@@ -0,0 +1,363 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const elevation_definition = require('../unbundled/definition6.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const dom = require('@floating-ui/dom');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const icon_definition = require('../icon/definition.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+
+const styles = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+
+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;
+};
+class Popover extends localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement)) {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.manual = false;
+    this.layout = "default";
+    this.offset = 8;
+    this.alternate = false;
+    this.dismissButtonAriaLabel = null;
+    this.arrow = false;
+    this.open = false;
+    /**
+     * @internal
+     */
+    this.#currentAnchor = null;
+    /**
+     * @internal
+     */
+    this.#manualToggle = () => {
+      this._popoverEl.togglePopover();
+    };
+    /**
+     * @internal
+     */
+    this.#autoUpdateCallback = () => {
+      this.#lastPositionUpdate = this.updatePosition();
+    };
+    // --- Lifecycle & Events ---
+    /**
+     * Syncs native toggle state (Esc key, light dismiss) back to the 'open' attribute.
+     * @internal
+     */
+    this.#handleNativeToggle = (e) => {
+      const isOpen = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+      if (this.open !== isOpen) {
+        this.open = isOpen;
+      }
+      this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
+    };
+  }
+  placementChanged() {
+    this.#updateAutoUpdate();
+  }
+  arrowChanged() {
+    this.#updateAutoUpdate();
+  }
+  openChanged(_oldValue, newValue) {
+    if (!this._popoverEl) return;
+    const isOpen = this._popoverEl.matches(":popover-open");
+    if (newValue && !isOpen) {
+      this._popoverEl.showPopover();
+    } else if (!newValue && isOpen) {
+      this._popoverEl.hidePopover();
+    }
+    this.#updateAutoUpdate();
+  }
+  anchorChanged() {
+    this.#updateAnchor();
+  }
+  _slottedAnchorChanged() {
+    this.#updateAnchor();
+  }
+  #currentAnchor;
+  /**
+   * @internal
+   */
+  #updateAnchor() {
+    if (!this._popoverEl) return;
+    const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
+    if (this.#currentAnchor === newAnchor) return;
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+    }
+    this.#currentAnchor = newAnchor;
+    if (this.#currentAnchor && this._popoverEl) {
+      this.#bindTrigger(this.#currentAnchor);
+      this.#updateAutoUpdate();
+    }
+  }
+  /**
+   * @internal
+   */
+  #bindTrigger(anchor) {
+    anchor.setAttribute("aria-haspopup", "dialog");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = this._popoverEl;
+    } else {
+      anchor.addEventListener("click", this.#manualToggle);
+    }
+  }
+  /**
+   * @internal
+   */
+  #unbindTrigger(anchor) {
+    anchor.removeAttribute("aria-haspopup");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = null;
+    } else {
+      anchor.removeEventListener("click", this.#manualToggle);
+    }
+  }
+  #manualToggle;
+  // --- Floating UI Logic ---
+  /**
+   * @internal
+   */
+  get #middleware() {
+    let middleware = [dom.inline(), dom.flip(), dom.shift(), dom.hide()];
+    /* v8 ignore next -- @preserve */
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow && this._arrowEl) {
+      offsetValue = 12;
+      middleware = [
+        ...middleware,
+        dom.arrow({ element: this._arrowEl, padding: 10 })
+      ];
+    }
+    /* v8 ignore else -- @preserve */
+    if (offsetValue > 0) {
+      middleware.unshift(dom.offset(offsetValue));
+    }
+    return middleware;
+  }
+  /**
+   * @internal
+   */
+  #cleanup;
+  /**
+   * @internal
+   */
+  #updateAutoUpdate() {
+    this.#cleanup?.();
+    if (this.open && this.#currentAnchor && this._popoverEl) {
+      this.#cleanup = dom.autoUpdate(
+        this.#currentAnchor,
+        this._popoverEl,
+        this.#autoUpdateCallback
+      );
+    }
+  }
+  /**
+   * Tracks the promise of the last position update.
+   * @internal
+   */
+  #lastPositionUpdate;
+  #autoUpdateCallback;
+  /**
+   * Updates the position of the popover
+   * @public
+   */
+  async updatePosition() {
+    /* v8 ignore if -- @preserve */
+    if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+    const positionData = await dom.computePosition(
+      this.#currentAnchor,
+      this._popoverEl,
+      {
+        placement: this.placement,
+        strategy: "fixed",
+        middleware: this.#middleware
+      }
+    );
+    /* v8 ignore if -- @preserve */
+    if (!this.open) return;
+    this.#assignPopoverPosition(positionData);
+    if (this.arrow && this._arrowEl) {
+      this.#assignArrowPosition(positionData);
+    }
+  }
+  /**
+   * @internal
+   */
+  #assignPopoverPosition(data) {
+    const { x, y } = data;
+    Object.assign(this._popoverEl.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+    });
+  }
+  /**
+   * @internal
+   */
+  #assignArrowPosition(data) {
+    /* v8 ignore if -- @preserve */
+    if (!this._arrowEl) return;
+    const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+    const styles = {
+      left: "calc(100% - 4px)",
+      right: "-4px",
+      top: "calc(100% - 4px)",
+      bottom: "-4px"
+    };
+    const staticAxis = data.placement.split("-")[0];
+    Object.assign(this._arrowEl.style, {
+      left: arrowX ? `${arrowX}px` : styles[staticAxis],
+      top: arrowY ? `${arrowY}px` : styles[staticAxis]
+    });
+  }
+  #handleNativeToggle;
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateAnchor();
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
+      if (this.open && !this._popoverEl.matches(":popover-open")) {
+        this._popoverEl.showPopover();
+        this.#updateAutoUpdate();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#cleanup?.();
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+      this.#currentAnchor = null;
+    }
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
+    }
+  }
+  // --- Methods ---
+  show() {
+    this.open = true;
+    return this.#lastPositionUpdate ?? Promise.resolve();
+  }
+  hide() {
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+}
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], Popover.prototype, "placement");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "manual");
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], Popover.prototype, "layout");
+__decorateClass([
+  fastElement.attr({
+    attribute: "offset",
+    mode: "fromView",
+    converter: fastElement.nullableNumberConverter
+  })
+], Popover.prototype, "offset");
+__decorateClass([
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popover.prototype, "alternate");
+__decorateClass([
+  fastElement.attr({ attribute: "dismiss-button-aria-label" })
+], Popover.prototype, "dismissButtonAriaLabel");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "arrow");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "open");
+__decorateClass([
+  fastElement.observable
+], Popover.prototype, "anchor");
+__decorateClass([
+  fastElement.observable
+], Popover.prototype, "_slottedAnchor");
+
+const getClasses = ({ open, manual, layout }) => fastWebUtilities.classNames(
+  "control",
+  ["open", Boolean(open)],
+  ["manual", Boolean(manual)],
+  ["condensed", layout === "condensed"]
+);
+const popoverTemplate = (context) => {
+  const elevationTag = context.tagFor(elevation_definition.Elevation);
+  const buttonTag = context.tagFor(button_definition.Button);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<slot name="anchor" ${fastElement.slotted("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base" 
+				${fastElement.ref("_popoverEl")} 
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${delegatesAria.delegateAria({
+    role: "dialog",
+    ariaModal: "false"
+  })}
+			>
+				<div class="${getClasses}" 
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${fastElement.when(
+    (x) => x.manual,
+    fastElement.html`<${buttonTag}
+							aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(x) => x.hide()}">
+							<${iconTag} name="close-line" slot="icon"></${iconTag}>
+						</${buttonTag}>`
+  )}
+					${fastElement.when(
+    (x) => x.arrow,
+    fastElement.html`<div class="arrow" ${fastElement.ref("_arrowEl")}></div>`
+  )}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
+
+const popoverDefinition = vividElement.defineVividComponent(
+  "popover",
+  Popover,
+  popoverTemplate,
+  [button_definition.buttonDefinition, icon_definition.iconDefinition, elevation_definition.elevationDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerPopover = vividElement.createRegisterFunction(popoverDefinition);
+
+exports.VwcPopoverElement = Popover;
+exports.popoverDefinition = popoverDefinition;
+exports.registerPopover = registerPopover;