@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/cdk/drag-drop/drag-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-events.d.ts","sourceRoot":"","sources":["../../../src/cdk/drag-drop/drag-events.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;CACpB"}
+{"version":3,"file":"drag-events.d.ts","sourceRoot":"","sources":["../../../cdk/drag-drop/drag-events.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;CACpB"}

package/dist/cdk/drag-drop/drag.controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag.controller.d.ts","sourceRoot":"","sources":["../../../src/cdk/drag-drop/drag.controller.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAsB,MAAM,gBAAgB,CAAC;AAE3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB;IAClF,oBAAoB,EAAE,MAAM,CAAC,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,WAAW,CAAC;CAClC;AAMD,qBAAa,cAAc,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,CAAE,YAAW,kBAAkB;;IAMtG,IAAI,iBAAiB,IAAI,CAAC,EAAE,CAE3B;IAED,IAAI,SAAS,IAAI,WAAW,CAE3B;gBAEW,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,qBAAqB;IAMjE,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAOxB,WAAW,IAAI,IAAI;IAMnB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,IAAI,gBAAgB;CAyD5D"}
+{"version":3,"file":"drag.controller.d.ts","sourceRoot":"","sources":["../../../cdk/drag-drop/drag.controller.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE/D,OAAO,EAAE,KAAK,gBAAgB,EAAsB,MAAM,gBAAgB,CAAC;AAE3E,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB;IAClF,oBAAoB,EAAE,MAAM,CAAC,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,WAAW,CAAC;CAClC;AAMD,qBAAa,cAAc,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,CAAE,YAAW,kBAAkB;;IAMtG,IAAI,iBAAiB,IAAI,CAAC,EAAE,CAE3B;IAED,IAAI,SAAS,IAAI,WAAW,CAE3B;gBAEW,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,qBAAqB;IAMjE,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAOxB,WAAW,IAAI,IAAI;IAMnB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,IAAI,gBAAgB;CAyD5D"}

package/dist/cdk/drag-drop/drag.controller.js

@@ -0,0 +1,90 @@
+import { createOptions } from '@odx/foundation';
+import { minBy } from 'es-toolkit';
+import { isDraggableElement } from './is-draggable.js';
+
+const DragControllerOptions = createOptions({
+  getDraggableElements: () => []
+});
+class DragController {
+  #host;
+  #options;
+  #dragTargets = /* @__PURE__ */ new WeakSet();
+  #listeners = /* @__PURE__ */ new Map();
+  get draggableElements() {
+    return this.#options.getDraggableElements().filter((element) => !element.dragDisabled);
+  }
+  get container() {
+    return this.#options.getContainer?.() ?? this.#host;
+  }
+  constructor(host, options) {
+    this.#host = host;
+    this.#options = DragControllerOptions(options);
+    this.#host.addController(this);
+  }
+  hostConnected() {
+    this.#host.style.touchAction = "none";
+  }
+  hostDisconnected() {
+    this.#host.style.touchAction = "";
+    for (const removeListener of this.#listeners.values()) {
+      removeListener();
+    }
+  }
+  hostUpdated() {
+    this.#dragTargets = new WeakSet(this.draggableElements);
+    this.#host.removeEventListener("pointerdown", this.#handleDragStart);
+    this.#host.addEventListener("pointerdown", this.#handleDragStart);
+  }
+  isDraggable(element) {
+    return isDraggableElement(element) && this.#dragTargets.has(element);
+  }
+  #handleDragStart = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const target = this.#getDragTarget(event);
+    if (!target) return;
+    const onPointerMove = (event2) => this.#handleDragMove(event2, target);
+    const onPointerUp = (event2) => this.#handleDragEnd(event2, target);
+    target.beforeDragStart?.({ event, position: this.#calculatePosition(event) });
+    this.#host.setPointerCapture(event.pointerId);
+    this.#host.addEventListener("pointermove", onPointerMove);
+    this.#host.addEventListener("pointerup", onPointerUp, { once: true });
+    this.#listeners.set(target, () => {
+      this.#host.removeEventListener("pointermove", onPointerMove);
+      this.#host.removeEventListener("pointerup", onPointerUp);
+    });
+    await 0;
+    target.dragStart?.({ event, position: this.#calculatePosition(event) });
+  };
+  #handleDragMove = (event, target) => {
+    event.preventDefault();
+    event.stopPropagation();
+    target.dragMove?.({ event, position: this.#calculatePosition(event) });
+  };
+  #handleDragEnd = async (event, target) => {
+    event.preventDefault();
+    event.stopPropagation();
+    target.dragEnd?.({ event, position: this.#calculatePosition(event) });
+    this.#host.releasePointerCapture(event.pointerId);
+    this.#listeners.get(target)?.();
+    this.#listeners.delete(target);
+    this.#host.requestUpdate();
+    await this.#host.updateComplete;
+    target.afterDragEnd?.({ event, position: this.#calculatePosition(event) });
+  };
+  #calculatePosition(event) {
+    const { left, top, width } = this.container.getBoundingClientRect();
+    return { x: (event.clientX - left) / width * 100, y: (event.clientY - top) / width * 100 };
+  }
+  #getDragTarget(event) {
+    if (event.target === this.#host) {
+      return minBy(this.draggableElements, (element) => element.getDistance?.(this.container, event) ?? Number.MAX_SAFE_INTEGER) ?? null;
+    }
+    if (this.isDraggable(event.target)) {
+      return event.target;
+    }
+    return null;
+  }
+}
+
+export { DragController };

package/dist/cdk/drag-drop/is-draggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"is-draggable.d.ts","sourceRoot":"","sources":["../../../src/cdk/drag-drop/is-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,wBAAwB,oBAAoB,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,YAAY,IAAI,OAAO,CAAC;IAE5B,eAAe,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACxC,SAAS,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAClC,QAAQ,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACjC,OAAO,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAChC,YAAY,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACrC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM;CACjE;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAKhF;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAsBzD,WAAW,CAAC,gBAAgB,CAAC,GAAG,CAC7D,CAAC"}
+{"version":3,"file":"is-draggable.d.ts","sourceRoot":"","sources":["../../../cdk/drag-drop/is-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,wBAAwB,oBAAoB,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,YAAY,IAAI,OAAO,CAAC;IAE5B,eAAe,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACxC,SAAS,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAClC,QAAQ,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACjC,OAAO,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAChC,YAAY,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IACrC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM;CACjE;AAED,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAKhF;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAsBzD,WAAW,CAAC,gBAAgB,CAAC,GAAG,CAC7D,CAAC"}

package/dist/cdk/drag-drop/is-draggable.js

@@ -0,0 +1,42 @@
+import { dedupeMixin } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+
+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 IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
+function isDraggableElement(element) {
+  if (element instanceof HTMLElement) {
+    return "isDragActive" in element;
+  }
+  return false;
+}
+const IsDraggable = dedupeMixin((superClass) => {
+  class IsDraggableElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.dragDisabled = false;
+    }
+    get isDragActive() {
+      return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
+    }
+    dragStart() {
+      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
+    }
+    afterDragEnd() {
+      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean })
+  ], IsDraggableElement.prototype, "dragDisabled");
+  return IsDraggableElement;
+});
+
+export { IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, isDraggableElement };

package/dist/cdk/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/cdk/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../cdk/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC"}

package/dist/cdk/popover/popover-host.mixin.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
+
+export { styles as default };

package/dist/cdk/popover/popover-host.mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-host.mixin.d.ts","sourceRoot":"","sources":["../../../src/cdk/popover/popover-host.mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAA+E,MAAM,iBAAiB,CAAC;AAIpJ,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,kBAAkB,CAAC;AAGlF,MAAM,WAAW,WAAW;IAC1B,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,aAAa,IAAI,OAAO,CAAC;IACzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1D,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACpD,aAAa,IAAI,OAAO,CAAC;IACzB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,aAAa,CAAC,IAAI,IAAI,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,aAAa,CAAC;AAE7D,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA0GnD,WAAW,CAAC,WAAW,CAAC,GAAG,CACjE,CAAC"}
+{"version":3,"file":"popover-host.mixin.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover-host.mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAA+E,MAAM,iBAAiB,CAAC;AAIpJ,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,kBAAkB,CAAC;AAGlF,MAAM,WAAW,WAAW;IAC1B,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,aAAa,IAAI,OAAO,CAAC;IACzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1D,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACpD,aAAa,IAAI,OAAO,CAAC;IACzB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,mBAAmB,CAAC,IAAI,IAAI,CAAC;IAC7B,aAAa,CAAC,IAAI,IAAI,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,aAAa,CAAC;AAE7D,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA0GnD,WAAW,CAAC,WAAW,CAAC,GAAG,CACjE,CAAC"}

package/dist/cdk/popover/popover-host.mixin.js

@@ -0,0 +1,115 @@
+import { autoUpdate } from '@floating-ui/dom';
+import { dedupeMixin, waitForAnimations, findClosestDocument, createMutationObserver } from '@odx/foundation';
+import { isServer, unsafeCSS } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import styles from './popover-host.mixin.css.js';
+import { PopoverPlacementOptions } from './popover.models.js';
+import { computePopoverPlacement } from './popover.utils.js';
+
+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 PopoverHost = dedupeMixin((superClass) => {
+  class PopoverHostClass extends superClass {
+    // biome-ignore lint/suspicious/noExplicitAny: This is a mixin
+    constructor(...args) {
+      super(...args);
+      this.isOpen = false;
+      this.referenceElement = null;
+      this.anchor = "";
+      this.#handleToggle = async ({ newState }) => {
+        this.isOpen = newState === "open";
+        if (this.isOpen) {
+          this.onBeforePopoverShow?.();
+          await waitForAnimations(this);
+          this.onPopoverShow?.();
+        } else {
+          this.onBeforePopoverHide?.();
+          await waitForAnimations(this);
+          this.onPopoverHide?.();
+        }
+      };
+      if (!isServer) {
+        this.addEventListener("toggle", this.#handleToggle);
+      }
+    }
+    static {
+      this.styles = [superClass.styles ?? [], unsafeCSS(styles)];
+    }
+    #observer;
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.popover ??= "auto";
+      this.#connectObserver();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
+      this.#disconnectObserver();
+    }
+    mountPopover(referenceElement) {
+      if (this.referenceElement && this.referenceElement !== referenceElement) {
+        this.unmountPopover(this.referenceElement);
+      }
+      if (!referenceElement) {
+        this.referenceElement = null;
+        return;
+      }
+      this.referenceElement = referenceElement;
+      autoUpdate(this.referenceElement, this, () => computePopoverPlacement(this.referenceElement, this, PopoverPlacementOptions()));
+    }
+    unmountPopover(referenceElement) {
+      this.hidePopover();
+    }
+    isPopoverOpen() {
+      return this.isOpen || this.matches(":popover-open");
+    }
+    togglePopover(force) {
+      const isOpen = force ?? !this.isPopoverOpen();
+      if (isOpen) {
+        this.showPopover();
+      } else {
+        this.hidePopover();
+      }
+      return isOpen;
+    }
+    #findReferenceElement(anchor) {
+      return findClosestDocument(this)?.getElementById(anchor);
+    }
+    #connectObserver() {
+      this.#disconnectObserver();
+      this.mountPopover(this.#findReferenceElement(this.anchor));
+      this.#observer = createMutationObserver(() => {
+        const referenceElement = this.anchor ? this.#findReferenceElement(this.anchor) : null;
+        if (this.referenceElement === referenceElement) return;
+        this.mountPopover(referenceElement);
+      });
+      this.#observer.observe(document.documentElement, { subtree: true, attributeFilter: ["id", "anchor"] });
+    }
+    #disconnectObserver() {
+      this.#observer?.disconnect();
+      this.#observer = void 0;
+    }
+    #handleToggle;
+  }
+  __decorateClass([
+    state()
+  ], PopoverHostClass.prototype, "isOpen");
+  __decorateClass([
+    state()
+  ], PopoverHostClass.prototype, "referenceElement");
+  __decorateClass([
+    property({ reflect: true })
+  ], PopoverHostClass.prototype, "anchor");
+  __decorateClass([
+    property({ reflect: true })
+  ], PopoverHostClass.prototype, "placement");
+  return PopoverHostClass;
+});
+
+export { PopoverHost };

package/dist/cdk/popover/popover.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--color-fill: transparent;--color-text: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-md));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--color-fill)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--color-text);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+
+export { styles as default };

package/dist/cdk/popover/popover.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.element.d.ts","sourceRoot":"","sources":["../../../src/cdk/popover/popover.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;CAQ5C"}
+{"version":3,"file":"popover.element.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;CAQ5C"}

package/dist/cdk/popover/popover.element.js

@@ -0,0 +1,38 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './popover.element.css.js';
+
+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;
+};
+let OdxPopoverElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.showArrow = false;
+  }
+  render() {
+    return html`
+      <div part="content">
+        <slot></slot>
+      </div>
+      ${when(this.showArrow, () => html`<div part="arrow"></div>`)}
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxPopoverElement.prototype, "showArrow", 2);
+OdxPopoverElement = __decorateClass([
+  customElement("odx-popover", [styles])
+], OdxPopoverElement);
+
+export { OdxPopoverElement };

package/dist/cdk/popover/popover.models.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.models.d.ts","sourceRoot":"","sources":["../../../src/cdk/popover/popover.models.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AACxF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAgBnB,CAAC;AAEX,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,yBAAyB,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3C,mBAAmB,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,4FAOlC,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACzE,eAAO,MAAM,WAAW;;;;;CAKd,CAAC"}
+{"version":3,"file":"popover.models.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover.models.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AACxF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAgBnB,CAAC;AAEX,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,yBAAyB,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3C,mBAAmB,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,4FAOlC,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACzE,eAAO,MAAM,WAAW;;;;;CAKd,CAAC"}

package/dist/cdk/popover/popover.models.js

@@ -0,0 +1,32 @@
+import { createOptions } from '@odx/foundation';
+
+const PopoverPlacement = {
+  TOP: "top",
+  TOP_START: "top-start",
+  TOP_END: "top-end",
+  RIGHT: "right",
+  RIGHT_START: "right-start",
+  RIGHT_END: "right-end",
+  BOTTOM: "bottom",
+  BOTTOM_START: "bottom-start",
+  BOTTOM_END: "bottom-end",
+  LEFT: "left",
+  LEFT_START: "left-start",
+  LEFT_END: "left-end"
+};
+const PopoverPlacementOptions = createOptions({
+  placement: PopoverPlacement.BOTTOM,
+  enableFallback: true,
+  fallbackAxisSideDirection: "end",
+  matchReferenceWidth: false,
+  offset: 0,
+  outerPadding: 24
+});
+const PopoverSide = {
+  TOP: PopoverPlacement.TOP,
+  RIGHT: PopoverPlacement.RIGHT,
+  BOTTOM: PopoverPlacement.BOTTOM,
+  LEFT: PopoverPlacement.LEFT
+};
+
+export { PopoverPlacement, PopoverPlacementOptions, PopoverSide };

package/dist/cdk/popover/popover.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.utils.d.ts","sourceRoot":"","sources":["../../../src/cdk/popover/popover.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAyE,MAAM,kBAAkB,CAAC;AAEtJ,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpG,wBAAgB,cAAc,CAAC,SAAS,EAAE,gBAAgB,GAAG,WAAW,CAEvE;AAED,wBAAsB,uBAAuB,CAC3C,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAyCf"}
+{"version":3,"file":"popover.utils.d.ts","sourceRoot":"","sources":["../../../cdk/popover/popover.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAyE,MAAM,kBAAkB,CAAC;AAEtJ,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpG,wBAAgB,cAAc,CAAC,SAAS,EAAE,gBAAgB,GAAG,WAAW,CAEvE;AAED,wBAAsB,uBAAuB,CAC3C,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAyCf"}

package/dist/cdk/popover/popover.utils.js

@@ -0,0 +1,48 @@
+import { arrow, flip, computePosition, offset, shift, size, hide } from '@floating-ui/dom';
+import { toPx } from '@odx/foundation';
+import { PopoverSide } from './popover.models.js';
+
+function getPopoverSide(placement) {
+  return placement.split("-")[0];
+}
+async function computePopoverPlacement(referenceElement, floatingElement, options) {
+  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight, outerPadding } = options;
+  const arrowSize = arrowElement?.offsetWidth ?? 0;
+  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 3 }) : void 0;
+  const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
+  const result = await computePosition(referenceElement, floatingElement, {
+    placement,
+    middleware: [
+      offset(offset$1 + arrowSize / 2),
+      shift({ padding: 0 }),
+      flipMiddleWare,
+      size({
+        padding: 0,
+        apply: ({ availableHeight, availableWidth, rects }) => {
+          floatingElement.style.setProperty("--_popover-min-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : null);
+          floatingElement.style.setProperty("--_popover-max-inline-size", toPx(availableWidth));
+          floatingElement.style.setProperty("--_popover-min-block-size", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
+          floatingElement.style.setProperty("--_popover-max-block-size", toPx(availableHeight));
+        }
+      }),
+      arrowMiddleware,
+      hide()
+    ]
+  });
+  let arrowPositionX = null;
+  let arrowPositionY = null;
+  if (arrowElement && result.middlewareData.arrow) {
+    const popoverSide = getPopoverSide(result.placement);
+    const { arrow: arrow2 } = result.middlewareData;
+    const arrowOffsetX = popoverSide === PopoverSide.LEFT ? floatingElement.offsetWidth - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
+    const arrowOffsetY = popoverSide === PopoverSide.TOP ? floatingElement.offsetHeight - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
+    arrowPositionX = arrow2.x ?? arrowOffsetX;
+    arrowPositionY = arrow2.y ?? arrowOffsetY;
+  }
+  floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
+  floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
+  floatingElement.style.setProperty("--_popover-arrow-position-x", toPx(arrowPositionX));
+  floatingElement.style.setProperty("--_popover-arrow-position-y", toPx(arrowPositionY));
+}
+
+export { computePopoverPlacement, getPopoverSide };