@m3e/web 2.0.5 → 2.1.1

package/dist/core-anchoring.js

@@ -3,6 +3,49 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
+import { LitElement, html, unsafeCSS, css } from 'lit';
+import { AttachInternals, addCustomState, deleteCustomState, DesignToken, customElement, setCustomState } from '@m3e/web/core';
+import { M3eDirectionality } from '@m3e/web/core/bidi';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+function __classPrivateFieldGet(receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1743,5 +1786,154 @@ async function positionAnchor(target, anchor, options, update) {
   return autoUpdate(anchor, target, async () => await computeAnchorPosition());
 }
 
-export { positionAnchor };
+var _M3eFloatingPanelElement_instances, _M3eFloatingPanelElement_trigger, _M3eFloatingPanelElement_anchor, _M3eFloatingPanelElement_anchorCleanup, _M3eFloatingPanelElement_documentClickHandler, _M3eFloatingPanelElement_toggleHandler, _M3eFloatingPanelElement_handleDocumentClick;
+/**
+ * A lightweight, generic floating surface used to present content above the page.
+ *
+ * @tag m3e-floating-panel
+ *
+ * @slot - Renders the contents of the panel.
+ *
+ * @fires beforetoggle - Dispatched before the toggle state changes.
+ * @fires toggle - Dispatched after the toggle state has changed.
+ *
+ * @cssprop --m3e-floating-panel-container-shape - Corner radius of the panel container.
+ * @cssprop --m3e-floating-panel-container-min-width - Minimum width of the panel container.
+ * @cssprop --m3e-floating-panel-container-max-width - Maximum width of the panel container.
+ * @cssprop --m3e-floating-panel-container-max-height - Maximum height of the panel container.
+ * @cssprop --m3e-floating-panel-container-padding-block - Vertical padding inside the panel container.
+ * @cssprop --m3e-floating-panel-container-padding-inline - Horizontal padding inside the panel container.
+ * @cssprop --m3e-floating-panel-container-color - Background color of the panel container.
+ * @cssprop --m3e-floating-panel-container-elevation - Box shadow elevation of the panel container.
+ */
+let M3eFloatingPanelElement = class M3eFloatingPanelElement extends AttachInternals(LitElement) {
+  constructor() {
+    super(...arguments);
+    _M3eFloatingPanelElement_instances.add(this);
+    /** @private */
+    _M3eFloatingPanelElement_trigger.set(this, void 0);
+    /** @private */
+    _M3eFloatingPanelElement_anchor.set(this, void 0);
+    /** @private */
+    _M3eFloatingPanelElement_anchorCleanup.set(this, void 0);
+    /** @private */
+    _M3eFloatingPanelElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFloatingPanelElement_instances, "m", _M3eFloatingPanelElement_handleDocumentClick).call(this, e));
+    /** @private */
+    _M3eFloatingPanelElement_toggleHandler.set(this, e => {
+      if (e.newState === "closed") {
+        __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchorCleanup, "f")?.call(this);
+        __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorCleanup, undefined, "f");
+        __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchor, undefined, "f");
+      }
+    });
+  }
+  /** Whether the panel is open. */
+  get isOpen() {
+    return __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") !== undefined;
+  }
+  /** The element that triggered the panel to open. */
+  get trigger() {
+    return __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") ?? null;
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    addCustomState(this, "-no-animate");
+    this.setAttribute("popover", "manual");
+    this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eFloatingPanelElement_toggleHandler, "f"));
+    document.addEventListener("click", __classPrivateFieldGet(this, _M3eFloatingPanelElement_documentClickHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eFloatingPanelElement_toggleHandler, "f"));
+    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eFloatingPanelElement_documentClickHandler, "f"));
+  }
+  /**
+   * Opens the panel.
+   * @param {HTMLElement} trigger The element that triggered the panel.
+   * @param {HTMLElement | undefined} anchor The element used to position the panel.
+   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened.
+   */
+  async show(trigger, anchor) {
+    if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") && __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") !== trigger) {
+      this.hide();
+    }
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchorCleanup, await positionAnchor(this, anchor ?? trigger, {
+      position: "bottom-start",
+      inline: true,
+      flip: true
+    }, (x, y, position) => {
+      setCustomState(this, "-top", position.includes("top"));
+      setCustomState(this, "-bottom", position.includes("bottom"));
+      if (M3eDirectionality.current === "rtl") {
+        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+        this.style.left = "";
+      } else {
+        this.style.left = `${x}px`;
+        this.style.right = "";
+      }
+      this.style.top = `${y}px`;
+    }), "f");
+    this.showPopover();
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_trigger, trigger, "f");
+    __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").ariaExpanded = "true";
+    __classPrivateFieldSet(this, _M3eFloatingPanelElement_anchor, anchor, "f");
+  }
+  /**
+   * Hides the panel.
+   * @param {boolean} [restoreFocus=false] Whether to restore focus to the panel's trigger.
+   */
+  hide(restoreFocus = false) {
+    this.hidePopover();
+    if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f")) {
+      __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").ariaExpanded = "false";
+      if (restoreFocus) {
+        __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f").focus();
+      }
+      __classPrivateFieldSet(this, _M3eFloatingPanelElement_trigger, undefined, "f");
+    }
+  }
+  /**
+   * Toggles the panel.
+   * @param {HTMLElement} trigger The element that triggered the panel.
+   * @param {HTMLElement | undefined} anchor The element used to position the panel.
+   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened or closed.
+   */
+  async toggle(trigger, anchor) {
+    if (__classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f")) {
+      this.hide();
+    } else {
+      await this.show(trigger, anchor);
+    }
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><slot></slot></div>`;
+  }
+};
+_M3eFloatingPanelElement_trigger = new WeakMap();
+_M3eFloatingPanelElement_anchor = new WeakMap();
+_M3eFloatingPanelElement_anchorCleanup = new WeakMap();
+_M3eFloatingPanelElement_documentClickHandler = new WeakMap();
+_M3eFloatingPanelElement_toggleHandler = new WeakMap();
+_M3eFloatingPanelElement_instances = new WeakSet();
+_M3eFloatingPanelElement_handleDocumentClick = function _M3eFloatingPanelElement_handleDocumentClick(e) {
+  if (this.isOpen && !e.composedPath().some(x => x === this || x === __classPrivateFieldGet(this, _M3eFloatingPanelElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eFloatingPanelElement_anchor, "f"))) {
+    this.hide();
+  }
+};
+/** The styles of the element. */
+M3eFloatingPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-floating-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-floating-panel-container-shape, ${DesignToken.shape.corner.large}); min-width: var(--m3e-floating-panel-container-min-width, 7rem); max-width: var(--m3e-floating-panel-container-max-width, 17.5rem); max-height: var(--m3e-floating-panel-container-max-height, 17.5rem); background-color: var(--m3e-floating-panel-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-floating-panel-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { box-sizing: border-box; display: flex; flex-direction: column; padding-block: var(--m3e-floating-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-floating-panel-container-padding-inline, 0.25rem); } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+            transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
+            overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
+            display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
+M3eFloatingPanelElement = __decorate([customElement("m3e-floating-panel")], M3eFloatingPanelElement);
+
+export { M3eFloatingPanelElement, positionAnchor };
 //# sourceMappingURL=core-anchoring.js.map