@evance/evance-ui 1.1.9 → 1.1.11

package/dist/esm/components/EvOverlay/position-strategy/connected-position.mjs

@@ -1,627 +1,2 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-/*! Evance UI v1.1.9 | MIT License */
-import { watch, onScopeDispose, computed, nextTick } from "vue";
-import { Rect } from "../../../util/dimensions.mjs";
-import { getScrollParents } from "../../../util/scroll.mjs";
-import { isFixedPosition } from "../../../util/isFixedPosition.mjs";
-import { toFixedPosition } from "../../../util/style.mjs";
-import { toWebUnit, pixelCeil, pixelRound } from "../../../util/units.mjs";
-import { destructComputed, clamp } from "../../../util/helpers.mjs";
-import { Anchor } from "../../../util/anchor.mjs";
-import { isNumber } from "../../../util/is-functions.mjs";
-function connectedPositionStrategy(data, props, contentStyles, pointerStyles) {
-  const manager = new ConnectedPosition(
-    data,
-    props,
-    contentStyles,
-    pointerStyles
-  );
-  return {
-    updatePosition: manager.updatePosition.bind(manager)
-  };
-}
-class ConnectedPosition {
-  constructor(data, props, contentStyles, pointerStyles) {
-    __publicField(this, "contentScrollParents");
-    __publicField(this, "contentRect");
-    __publicField(this, "maxHeight");
-    __publicField(this, "maxWidth");
-    __publicField(this, "minHeight");
-    __publicField(this, "minWidth");
-    __publicField(this, "observe", false);
-    __publicField(this, "observer");
-    __publicField(this, "offset");
-    __publicField(this, "preferredPosition");
-    __publicField(this, "preferredOrigin");
-    __publicField(this, "targetRect");
-    __publicField(this, "viewportRect");
-    __publicField(this, "viewportMargin", 12);
-    __publicField(this, "zoneCalculator");
-    this.data = data;
-    this.props = props;
-    this.contentStyles = contentStyles;
-    this.pointerStyles = pointerStyles;
-    this.resolveFixedActivator();
-    this.minWidth = this.computedNumericProp("minWidth");
-    this.maxWidth = this.computedNumericProp("maxWidth");
-    this.minHeight = this.computedNumericProp("minHeight");
-    this.maxHeight = this.computedNumericProp("maxHeight");
-    this.offset = this.computedOffset();
-    this.zoneCalculator = new ZoneCalculator();
-    this.calculatePreferences();
-    this.addResizeObserver();
-    this.watch();
-  }
-  /**
-   * ## Add Resize Observer
-   *
-   * Watch for changes to the size and element of the activator as well as the overlay content.
-   *
-   * @private
-   */
-  addResizeObserver() {
-    this.observe = false;
-    this.observer = new ResizeObserver(() => {
-      if (this.observe) {
-        this.updatePosition();
-      }
-    });
-    watch(
-      [this.data.activatorEl, this.data.contentEl],
-      ([newActivatorEl, newContentEl], [oldActivatorEl, oldContentEl]) => {
-        var _a, _b, _c, _d;
-        if (oldActivatorEl) {
-          (_a = this.observer) == null ? void 0 : _a.unobserve(oldActivatorEl);
-        }
-        if (newActivatorEl) {
-          (_b = this.observer) == null ? void 0 : _b.observe(newActivatorEl);
-        }
-        if (oldContentEl) {
-          (_c = this.observer) == null ? void 0 : _c.unobserve(oldContentEl);
-        }
-        if (newContentEl) {
-          (_d = this.observer) == null ? void 0 : _d.observe(newContentEl);
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    onScopeDispose(() => {
-      var _a;
-      (_a = this.observer) == null ? void 0 : _a.disconnect();
-    });
-  }
-  /**
-   * ## Calculate Preferences (for position and origin anchor points)
-   * @private
-   */
-  calculatePreferences() {
-    const { preferredPosition, preferredOrigin } = destructComputed(() => {
-      const position = Anchor.fromSelector(
-        this.props.position,
-        this.data.isRtl.value
-      );
-      let origin;
-      if (this.props.origin === "overlap") {
-        origin = position;
-      } else if (this.props.origin === "auto") {
-        origin = position.flipSide();
-      } else {
-        origin = Anchor.fromSelector(
-          this.props.origin,
-          this.data.isRtl.value
-        );
-      }
-      if (position.side === origin.side && position.alignment === origin.flipAlignment().alignment) {
-        return {
-          preferredPosition: position.flipCorner(),
-          preferredOrigin: origin.flipCorner()
-        };
-      } else {
-        return {
-          preferredPosition: position,
-          preferredOrigin: origin
-        };
-      }
-    });
-    this.preferredPosition = preferredPosition;
-    this.preferredOrigin = preferredOrigin;
-  }
-  /**
-   * ## Computed Numeric Prop
-   * @param key
-   * @private
-   */
-  computedNumericProp(key) {
-    return computed(() => {
-      const value = parseFloat(
-        this.props[key]
-      );
-      return isNaN(value) ? Infinity : value;
-    });
-  }
-  /**
-   * ## Computed Offset
-   *
-   * Returns an array, with the following indexes:
-   * - `0` - represents `side` offset.
-   * - `1` - represents `alignment` offset.
-   *
-   * @private
-   */
-  computedOffset() {
-    return computed(() => {
-      if (Array.isArray(this.props.offset)) {
-        return this.props.offset;
-      }
-      if (typeof this.props.offset === "string") {
-        const offset = this.props.offset.split(" ").map(parseFloat);
-        if (offset.length < 2) {
-          offset.push(0);
-        }
-        return offset;
-      }
-      return isNumber(this.props.offset) ? [this.props.offset, 0] : [0, 0];
-    });
-  }
-  /**
-   * # Get Content Rect
-   *
-   * Returns a Rect adjusted for the original elements position, whilst accommodating RTL direction.
-   */
-  getContentRect() {
-    const el = this.data.contentEl.value;
-    const isRtl = this.data.isRtl.value;
-    const rect = Rect.fromElement(el, true);
-    if (isRtl) {
-      rect.x += parseFloat(el.style.right || 0);
-    } else {
-      rect.x -= parseFloat(el.style.left || 0);
-    }
-    rect.y -= parseFloat(el.style.top || 0);
-    return rect;
-  }
-  /**
-   * ## Get Pointer Rect
-   * @private
-   */
-  getPointerDimensions() {
-    const el = this.data.pointerEl.value;
-    return el ? { width: el.clientWidth, height: el.clientHeight } : null;
-  }
-  /**
-   * ## Get Content Scroll Parents
-   * @private
-   */
-  getContentScrollParents() {
-    const scrollParents = getScrollParents(this.data.contentEl.value);
-    const contentEl = this.data.contentEl.value;
-    if (!scrollParents.length) {
-      scrollParents.push(document.documentElement);
-      if (!(contentEl.style.top && contentEl.style.left)) {
-        this.contentRect.x -= parseFloat(
-          document.documentElement.style.getPropertyValue(
-            "--ev-body-scroll-x"
-          ) || "0"
-        );
-        this.contentRect.y -= parseFloat(
-          document.documentElement.style.getPropertyValue(
-            "--ev-body-scroll-y"
-          ) || "0"
-        );
-      }
-    }
-    return scrollParents;
-  }
-  /**
-   * ## Get Viewport Rect
-   *
-   * Calculates the viewport viewable area for the content taking into account the viewport margins.
-   * i.e. how close are we allowed to place content to the edges of the viewport?
-   *
-   * @private
-   */
-  getViewportRect() {
-    const viewportRect = this.contentScrollParents.reduce(
-      (currentRect, el) => {
-        const elRect = Rect.fromElement(el);
-        const isDocEl = el === document.documentElement;
-        const scrollRect = new Rect(
-          isDocEl ? 0 : elRect.x,
-          isDocEl ? 0 : elRect.y,
-          el.clientWidth,
-          el.clientHeight
-        );
-        if (!currentRect) {
-          return scrollRect;
-        }
-        return new Rect(
-          Math.max(currentRect.left, scrollRect.left),
-          Math.max(currentRect.top, scrollRect.top),
-          Math.min(currentRect.right, scrollRect.right) - Math.max(currentRect.left, scrollRect.left),
-          Math.min(currentRect.bottom, scrollRect.bottom) - Math.max(currentRect.top, scrollRect.top)
-        );
-      },
-      void 0
-    );
-    viewportRect.x += this.viewportMargin;
-    viewportRect.y += this.viewportMargin;
-    viewportRect.width -= this.viewportMargin * 2;
-    viewportRect.height -= this.viewportMargin * 2;
-    return viewportRect;
-  }
-  /**
-   * ## Resolve Fixed Activator
-   * @private
-   */
-  resolveFixedActivator() {
-    const isActivatorFixed = isFixedPosition(this.data.activatorEl.value);
-    if (isActivatorFixed) {
-      toFixedPosition(this.contentStyles.value, this.data.isRtl.value);
-    }
-  }
-  /**
-   * ## Update Position
-   */
-  updatePosition() {
-    var _a;
-    this.observe = false;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => this.observe = true);
-    });
-    if (!this.data.activatorEl.value || !this.data.contentEl.value) {
-      return;
-    }
-    this.targetRect = Rect.fromElement(this.data.activatorEl.value);
-    this.contentRect = this.getContentRect();
-    this.contentScrollParents = this.getContentScrollParents();
-    this.viewportRect = this.getViewportRect();
-    const zones = this.zoneCalculator.getAvailable(
-      this.targetRect,
-      this.viewportRect,
-      this.offset.value,
-      this.contentRect
-    );
-    const placement = {
-      position: this.preferredPosition.value,
-      origin: this.preferredOrigin.value
-    };
-    if (placement.position.side === "auto") {
-      const autoZone = this.getAutoZone(placement.position, zones);
-      placement.position = autoZone.position;
-      placement.origin = placement.position.flipSide();
-    }
-    const zone = placement.position.side === "center" ? this.getCenterZone(zones) : this.getBestZone(placement.position, zones);
-    placement.position = zone.position;
-    placement.origin = placement.position.flipSide();
-    const { x, y } = this.calculateContentCoords(zone, placement);
-    this.calculateContentStyles(zone, placement, x, y);
-    this.calculatePointerStyles(placement, x, y);
-    (_a = this.data.contentEl.value) == null ? void 0 : _a.setAttribute(
-      "data-position",
-      placement.position.toString()
-    );
-    return {
-      zoneRect: zone.rect,
-      contentRect: this.contentRect
-    };
-  }
-  /**
-   *
-   * @param zone
-   * @param placement
-   * @private
-   */
-  calculateContentCoords(zone, placement) {
-    let { x, y } = zone.rect;
-    if (placement.position.side === "center") {
-      y = zone.rect.y + (zone.rect.height - this.contentRect.height) / 2;
-      x = zone.rect.x + (zone.rect.width - this.contentRect.width) / 2;
-    } else {
-      if (placement.position.side === "top") {
-        y = zone.rect.bottom - this.contentRect.height;
-      } else if (placement.position.side === "left") {
-        x = zone.rect.right - this.contentRect.width;
-      }
-      if (placement.position.alignment !== "start") {
-        const divider = placement.position.alignment === "center" ? 2 : 1;
-        if (placement.position.axis === "x") {
-          y = this.targetRect.y + (this.targetRect.height - this.contentRect.height) / divider;
-        } else {
-          x = this.targetRect.x + (this.targetRect.width - this.contentRect.width) / divider;
-        }
-      }
-    }
-    if (y < this.viewportRect.y) {
-      y = this.viewportRect.y;
-    }
-    if (x < this.viewportRect.x) {
-      x = this.viewportRect.x;
-    }
-    return { x, y };
-  }
-  /**
-   * @todo: RTL
-   * @param zone
-   * @param placement
-   * @param x
-   * @param y
-   * @private
-   */
-  calculateContentStyles(zone, placement, x, y) {
-    Object.assign(this.contentStyles.value, {
-      "--ev-overlay-position": placement.position.toCssValue(),
-      transformOrigin: placement.origin.toCssValue(),
-      top: toWebUnit(pixelRound(y)),
-      left: toWebUnit(pixelRound(x)),
-      minWidth: toWebUnit(
-        placement.position.axis === "y" ? Math.min(this.minWidth.value, this.targetRect.width) : this.minWidth.value
-      ),
-      maxWidth: toWebUnit(
-        pixelCeil(
-          clamp(
-            zone.rect.width,
-            this.minWidth.value === Infinity ? 0 : this.minWidth.value,
-            this.maxWidth.value
-          )
-        )
-      ),
-      maxHeight: toWebUnit(
-        pixelCeil(
-          clamp(
-            zone.rect.height,
-            this.minHeight.value === Infinity ? 0 : this.minHeight.value,
-            this.maxHeight.value
-          )
-        )
-      )
-    });
-  }
-  /**
-   *
-   * @param placement
-   * @param x
-   * @param y
-   * @private
-   */
-  calculatePointerStyles(placement, x, y) {
-    const pointerDimensions = this.getPointerDimensions();
-    if (!pointerDimensions || placement.position.side === "center" && placement.position.alignment === "center") {
-      Object.assign(this.pointerStyles.value, {
-        left: null,
-        top: null
-      });
-      return;
-    }
-    let pointerOffsetX = null;
-    let pointerOffsetY = null;
-    let rotation = 0;
-    if (placement.position.axis === "y") {
-      if (x > this.targetRect.x) {
-        pointerOffsetX = 0 - pointerDimensions.width / 2;
-      } else {
-        pointerOffsetX = this.targetRect.x - x - pointerDimensions.width / 2;
-      }
-      pointerOffsetX += Math.min(this.targetRect.width, this.contentRect.width) / 2;
-      pointerOffsetY = placement.position.side === "bottom" ? 0 - pointerDimensions.height : "100%";
-      rotation = placement.position.side === "bottom" ? 180 : 0;
-    } else {
-      if (y > this.targetRect.y) {
-        pointerOffsetY = 0 - pointerDimensions.width / 2;
-      } else {
-        pointerOffsetY = this.targetRect.y - y - pointerDimensions.width / 2;
-      }
-      pointerOffsetY += Math.min(this.targetRect.height, this.contentRect.height) / 2;
-      pointerOffsetX = placement.position.side === "right" ? 0 - pointerDimensions.height : "100%";
-      rotation = placement.position.side === "right" ? 90 : 270;
-    }
-    Object.assign(this.pointerStyles.value, {
-      left: typeof pointerOffsetX === "string" ? pointerOffsetX : toWebUnit(pixelRound(pointerOffsetX)),
-      top: typeof pointerOffsetY === "string" ? pointerOffsetY : toWebUnit(pixelRound(pointerOffsetY)),
-      transform: `rotate(${rotation}deg)`
-    });
-  }
-  getAutoZone(position, zones) {
-    const matches = zones.filter((zone) => {
-      if (zone.position.side === "center") {
-        return false;
-      }
-      return position.alignment === "auto" || zone.position.alignment === position.alignment;
-    });
-    return matches[0];
-  }
-  /**
-   * ## Get Best Zone
-   * Returns the zone that fits the content, or the zone with the largest available area.
-   * @param position
-   * @param zones
-   * @private
-   */
-  getBestZone(position, zones) {
-    const positions = [
-      position,
-      position.centerAlign(),
-      position.flipSide(),
-      position.flipSide().centerAlign(),
-      position.flipCorner(),
-      position.flipCorner().centerAlign(),
-      position.flipCorner().flipSide(),
-      position.flipCorner().flipSide().centerAlign()
-    ];
-    for (const newPosition of positions) {
-      const zone = zones.find((zone2) => {
-        return zone2.position.toString() === newPosition.toString();
-      });
-      if (zone == null ? void 0 : zone.isFitsContent) {
-        return zone;
-      }
-    }
-    for (const newPosition of positions) {
-      const zone = zones.find((zone2) => {
-        return zone2.position.toString() === newPosition.toString();
-      });
-      if (!zone) {
-        continue;
-      }
-      const dimension = newPosition.axis === "x" ? "width" : "height";
-      if (zone.available[dimension] >= 0) {
-        return zone;
-      }
-    }
-    return this.getAutoZone(position, zones);
-  }
-  /**
-   * ## Get Center Zone
-   * Returns the zone for centering content in the viewport, which is basically the whole viewport.
-   * @param zones
-   * @private
-   */
-  getCenterZone(zones) {
-    return zones.find((zone) => {
-      return zone.position.side === "center" && zone.position.alignment === "center";
-    });
-  }
-  /**
-   * ## Watch
-   *
-   * Watch for changes that affect position calculations.
-   *
-   * @private
-   */
-  watch() {
-    watch(
-      () => {
-        var _a, _b;
-        return [
-          (_a = this.preferredPosition) == null ? void 0 : _a.value,
-          (_b = this.preferredOrigin) == null ? void 0 : _b.value,
-          this.props.offset,
-          this.props.minWidth,
-          this.props.minHeight,
-          this.props.maxWidth,
-          this.props.maxHeight
-        ];
-      },
-      () => this.updatePosition()
-    );
-    nextTick(() => {
-      const result = this.updatePosition();
-      if (!result) {
-        return;
-      }
-    });
-  }
-}
-class Zone {
-  constructor(position, rect, content) {
-    __publicField(this, "available");
-    __publicField(this, "isFitsContent");
-    this.position = position;
-    this.rect = rect;
-    this.content = content;
-    this.available = {
-      width: this.rect.width - content.width,
-      height: this.rect.height - content.height
-    };
-    this.isFitsContent = this.rect.width >= content.width && this.rect.height >= content.height;
-  }
-  get availableArea() {
-    return this.available.width * this.available.height;
-  }
-}
-class ZoneCalculator {
-  /**
-   * ## Get Available
-   *
-   * Returns all available zones around the target.
-   *
-   * @param target
-   * @param viewport
-   * @param offset
-   * @param content
-   */
-  getAvailable(target, viewport, offset, content) {
-    const [offsetSide, offsetAlign] = offset;
-    const sides = {
-      top: {
-        y: viewport.top,
-        height: target.top - viewport.top - offsetSide,
-        align: "x"
-      },
-      bottom: {
-        y: target.bottom + offsetSide,
-        height: viewport.bottom - target.bottom - offsetSide,
-        align: "x"
-      },
-      left: {
-        x: viewport.left,
-        width: target.left - viewport.left - offsetSide,
-        align: "y"
-      },
-      right: {
-        x: target.right + offsetSide,
-        width: viewport.right - target.right - offsetSide,
-        align: "y"
-      },
-      center: { x: viewport.left, width: viewport.width, align: "y" }
-    };
-    const alignments = {
-      x: {
-        center: { x: viewport.left, width: viewport.width },
-        start: {
-          x: target.left + offsetAlign,
-          width: viewport.width - target.left - offsetAlign
-        },
-        end: {
-          x: viewport.left,
-          width: target.right - viewport.left - offsetAlign
-        }
-      },
-      y: {
-        center: { y: viewport.top, height: viewport.height },
-        start: {
-          y: target.top + offsetAlign,
-          height: viewport.bottom - target.top - offsetAlign
-        },
-        end: {
-          y: viewport.top,
-          height: target.bottom - viewport.top - offsetAlign
-        }
-      }
-    };
-    const zones = [];
-    for (const [side, sideAttrs] of Object.entries(sides)) {
-      for (const [align, alignAttrs] of Object.entries(
-        alignments[sideAttrs.align]
-      )) {
-        const anchor = new Anchor(
-          side,
-          align
-        );
-        const rectProps = Object.assign(
-          {
-            width: 0,
-            height: 0,
-            x: 0,
-            y: 0
-          },
-          sideAttrs,
-          alignAttrs
-        );
-        const rect = Rect.fromRect(rectProps);
-        zones.push(new Zone(anchor, rect, content));
-      }
-    }
-    zones.sort((zoneA, zoneB) => {
-      return zoneB.availableArea - zoneA.availableArea;
-    });
-    return zones;
-  }
-}
-export {
-  connectedPositionStrategy
-};
+"use strict";var w=Object.defineProperty;var S=(l,t,e)=>t in l?w(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var r=(l,t,e)=>S(l,typeof t!="symbol"?t+"":t,e);/*! Evance UI v1.1.11 | MIT License */Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),d=require("../../../util/dimensions.mjs"),C=require("../../../util/scroll.mjs"),A=require("../../../util/isFixedPosition.mjs"),W=require("../../../util/style.mjs"),h=require("../../../util/units.mjs"),m=require("../../../util/helpers.mjs"),v=require("../../../util/anchor.mjs"),O=require("../../../util/is-functions.mjs");function F(l,t,e,i){const s=new E(l,t,e,i);return{updatePosition:s.updatePosition.bind(s)}}class E{constructor(t,e,i,s){r(this,"contentScrollParents");r(this,"contentRect");r(this,"maxHeight");r(this,"maxWidth");r(this,"minHeight");r(this,"minWidth");r(this,"observe",!1);r(this,"observer");r(this,"offset");r(this,"preferredPosition");r(this,"preferredOrigin");r(this,"targetRect");r(this,"viewportRect");r(this,"viewportMargin",12);r(this,"zoneCalculator");this.data=t,this.props=e,this.contentStyles=i,this.pointerStyles=s,this.resolveFixedActivator(),this.minWidth=this.computedNumericProp("minWidth"),this.maxWidth=this.computedNumericProp("maxWidth"),this.minHeight=this.computedNumericProp("minHeight"),this.maxHeight=this.computedNumericProp("maxHeight"),this.offset=this.computedOffset(),this.zoneCalculator=new H,this.calculatePreferences(),this.addResizeObserver(),this.watch()}addResizeObserver(){this.observe=!1,this.observer=new ResizeObserver(()=>{this.observe&&this.updatePosition()}),c.watch([this.data.activatorEl,this.data.contentEl],([t,e],[i,s])=>{var o,n,a,p;i&&((o=this.observer)==null||o.unobserve(i)),t&&((n=this.observer)==null||n.observe(t)),s&&((a=this.observer)==null||a.unobserve(s)),e&&((p=this.observer)==null||p.observe(e))},{immediate:!0}),c.onScopeDispose(()=>{var t;(t=this.observer)==null||t.disconnect()})}calculatePreferences(){const{preferredPosition:t,preferredOrigin:e}=m.destructComputed(()=>{const i=v.Anchor.fromSelector(this.props.position,this.data.isRtl.value);let s;return this.props.origin==="overlap"?s=i:this.props.origin==="auto"?s=i.flipSide():s=v.Anchor.fromSelector(this.props.origin,this.data.isRtl.value),i.side===s.side&&i.alignment===s.flipAlignment().alignment?{preferredPosition:i.flipCorner(),preferredOrigin:s.flipCorner()}:{preferredPosition:i,preferredOrigin:s}});this.preferredPosition=t,this.preferredOrigin=e}computedNumericProp(t){return c.computed(()=>{const e=parseFloat(this.props[t]);return isNaN(e)?1/0:e})}computedOffset(){return c.computed(()=>{if(Array.isArray(this.props.offset))return this.props.offset;if(typeof this.props.offset=="string"){const t=this.props.offset.split(" ").map(parseFloat);return t.length<2&&t.push(0),t}return O.isNumber(this.props.offset)?[this.props.offset,0]:[0,0]})}getContentRect(){const t=this.data.contentEl.value,e=this.data.isRtl.value,i=d.Rect.fromElement(t,!0);return e?i.x+=parseFloat(t.style.right||0):i.x-=parseFloat(t.style.left||0),i.y-=parseFloat(t.style.top||0),i}getPointerDimensions(){const t=this.data.pointerEl.value;return t?{width:t.clientWidth,height:t.clientHeight}:null}getContentScrollParents(){const t=C.getScrollParents(this.data.contentEl.value),e=this.data.contentEl.value;return t.length||(t.push(document.documentElement),e.style.top&&e.style.left||(this.contentRect.x-=parseFloat(document.documentElement.style.getPropertyValue("--ev-body-scroll-x")||"0"),this.contentRect.y-=parseFloat(document.documentElement.style.getPropertyValue("--ev-body-scroll-y")||"0"))),t}getViewportRect(){const t=this.contentScrollParents.reduce((e,i)=>{const s=d.Rect.fromElement(i),o=i===document.documentElement,n=new d.Rect(o?0:s.x,o?0:s.y,i.clientWidth,i.clientHeight);return e?new d.Rect(Math.max(e.left,n.left),Math.max(e.top,n.top),Math.min(e.right,n.right)-Math.max(e.left,n.left),Math.min(e.bottom,n.bottom)-Math.max(e.top,n.top)):n},void 0);return t.x+=this.viewportMargin,t.y+=this.viewportMargin,t.width-=this.viewportMargin*2,t.height-=this.viewportMargin*2,t}resolveFixedActivator(){A.isFixedPosition(this.data.activatorEl.value)&&W.toFixedPosition(this.contentStyles.value,this.data.isRtl.value)}updatePosition(){var n;if(this.observe=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>this.observe=!0)}),!this.data.activatorEl.value||!this.data.contentEl.value)return;this.targetRect=d.Rect.fromElement(this.data.activatorEl.value),this.contentRect=this.getContentRect(),this.contentScrollParents=this.getContentScrollParents(),this.viewportRect=this.getViewportRect();const t=this.zoneCalculator.getAvailable(this.targetRect,this.viewportRect,this.offset.value,this.contentRect),e={position:this.preferredPosition.value,origin:this.preferredOrigin.value};if(e.position.side==="auto"){const a=this.getAutoZone(e.position,t);e.position=a.position,e.origin=e.position.flipSide()}const i=e.position.side==="center"?this.getCenterZone(t):this.getBestZone(e.position,t);e.position=i.position,e.origin=e.position.flipSide();const{x:s,y:o}=this.calculateContentCoords(i,e);return this.calculateContentStyles(i,e,s,o),this.calculatePointerStyles(e,s,o),(n=this.data.contentEl.value)==null||n.setAttribute("data-position",e.position.toString()),{zoneRect:i.rect,contentRect:this.contentRect}}calculateContentCoords(t,e){let{x:i,y:s}=t.rect;if(e.position.side==="center")s=t.rect.y+(t.rect.height-this.contentRect.height)/2,i=t.rect.x+(t.rect.width-this.contentRect.width)/2;else if(e.position.side==="top"?s=t.rect.bottom-this.contentRect.height:e.position.side==="left"&&(i=t.rect.right-this.contentRect.width),e.position.alignment!=="start"){const o=e.position.alignment==="center"?2:1;e.position.axis==="x"?s=this.targetRect.y+(this.targetRect.height-this.contentRect.height)/o:i=this.targetRect.x+(this.targetRect.width-this.contentRect.width)/o}return s<this.viewportRect.y&&(s=this.viewportRect.y),i<this.viewportRect.x&&(i=this.viewportRect.x),{x:i,y:s}}calculateContentStyles(t,e,i,s){Object.assign(this.contentStyles.value,{"--ev-overlay-position":e.position.toCssValue(),transformOrigin:e.origin.toCssValue(),top:h.toWebUnit(h.pixelRound(s)),left:h.toWebUnit(h.pixelRound(i)),minWidth:h.toWebUnit(e.position.axis==="y"?Math.min(this.minWidth.value,this.targetRect.width):this.minWidth.value),maxWidth:h.toWebUnit(h.pixelCeil(m.clamp(t.rect.width,this.minWidth.value===1/0?0:this.minWidth.value,this.maxWidth.value))),maxHeight:h.toWebUnit(h.pixelCeil(m.clamp(t.rect.height,this.minHeight.value===1/0?0:this.minHeight.value,this.maxHeight.value)))})}calculatePointerStyles(t,e,i){const s=this.getPointerDimensions();if(!s||t.position.side==="center"&&t.position.alignment==="center"){Object.assign(this.pointerStyles.value,{left:null,top:null});return}let o=null,n=null,a=0;t.position.axis==="y"?(e>this.targetRect.x?o=0-s.width/2:o=this.targetRect.x-e-s.width/2,o+=Math.min(this.targetRect.width,this.contentRect.width)/2,n=t.position.side==="bottom"?0-s.height:"100%",a=t.position.side==="bottom"?180:0):(i>this.targetRect.y?n=0-s.width/2:n=this.targetRect.y-i-s.width/2,n+=Math.min(this.targetRect.height,this.contentRect.height)/2,o=t.position.side==="right"?0-s.height:"100%",a=t.position.side==="right"?90:270),Object.assign(this.pointerStyles.value,{left:typeof o=="string"?o:h.toWebUnit(h.pixelRound(o)),top:typeof n=="string"?n:h.toWebUnit(h.pixelRound(n)),transform:`rotate(${a}deg)`})}getAutoZone(t,e){return e.filter(s=>s.position.side==="center"?!1:t.alignment==="auto"||s.position.alignment===t.alignment)[0]}getBestZone(t,e){const i=[t,t.centerAlign(),t.flipSide(),t.flipSide().centerAlign(),t.flipCorner(),t.flipCorner().centerAlign(),t.flipCorner().flipSide(),t.flipCorner().flipSide().centerAlign()];for(const s of i){const o=e.find(n=>n.position.toString()===s.toString());if(o!=null&&o.isFitsContent)return o}for(const s of i){const o=e.find(a=>a.position.toString()===s.toString());if(!o)continue;const n=s.axis==="x"?"width":"height";if(o.available[n]>=0)return o}return this.getAutoZone(t,e)}getCenterZone(t){return t.find(e=>e.position.side==="center"&&e.position.alignment==="center")}watch(){c.watch(()=>{var t,e;return[(t=this.preferredPosition)==null?void 0:t.value,(e=this.preferredOrigin)==null?void 0:e.value,this.props.offset,this.props.minWidth,this.props.minHeight,this.props.maxWidth,this.props.maxHeight]},()=>this.updatePosition()),c.nextTick(()=>{this.updatePosition()})}}class M{constructor(t,e,i){r(this,"available");r(this,"isFitsContent");this.position=t,this.rect=e,this.content=i,this.available={width:this.rect.width-i.width,height:this.rect.height-i.height},this.isFitsContent=this.rect.width>=i.width&&this.rect.height>=i.height}get availableArea(){return this.available.width*this.available.height}}class H{getAvailable(t,e,i,s){const[o,n]=i,a={top:{y:e.top,height:t.top-e.top-o,align:"x"},bottom:{y:t.bottom+o,height:e.bottom-t.bottom-o,align:"x"},left:{x:e.left,width:t.left-e.left-o,align:"y"},right:{x:t.right+o,width:e.right-t.right-o,align:"y"},center:{x:e.left,width:e.width,align:"y"}},p={x:{center:{x:e.left,width:e.width},start:{x:t.left+n,width:e.width-t.left-n},end:{x:e.left,width:t.right-e.left-n}},y:{center:{y:e.top,height:e.height},start:{y:t.top+n,height:e.bottom-t.top-n},end:{y:e.top,height:t.bottom-e.top-n}}},f=[];for(const[g,u]of Object.entries(a))for(const[x,b]of Object.entries(p[u.align])){const y=new v.Anchor(g,x),R=Object.assign({width:0,height:0,x:0,y:0},u,b),P=d.Rect.fromRect(R);f.push(new M(y,P,s))}return f.sort((g,u)=>u.availableArea-g.availableArea),f}}exports.connectedPositionStrategy=F;
 //# sourceMappingURL=connected-position.mjs.map