'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7e93c7c3.js');
const utils = require('./utils-4717dffd.js');

const klevuChatBubbleCss = ":host{display:flex;justify-content:flex-end}:host(.remote){justify-content:flex-start}klevu-typography{display:inline-block;padding:var(--klevu-spacing-04);background-color:var(--klevu-color-neutral-2);border-radius:var(--klevu-border-radius-m);border-bottom-right-radius:0}:host(.remote) klevu-typography{background-color:var(--klevu-color-primary);color:var(--klevu-color-neutral-1);border-radius:var(--klevu-border-radius-m);border-bottom-left-radius:0;--klevu-typography-color:var(--klevu-color-neutral-1)}";

const KlevuChatBubble = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.remote = undefined;
  }
  render() {
    return (index.h(index.Host, { class: {
        remote: Boolean(this.remote),
      } }, index.h("klevu-typography", { variant: "body-s" }, index.h("slot", null))));
  }
};
KlevuChatBubble.style = klevuChatBubbleCss;

const klevuChatLayoutCss = ":host{height:100%;display:flex;flex-direction:column;max-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--klevu-spacing-02) var(--klevu-spacing-02)}main{flex:1;overflow:hidden}main slot{display:flex;gap:var(--klevu-spacing-04);flex-direction:column;height:100%;padding:var(--klevu-spacing-02)}footer{margin-top:auto;padding-top:var(--klevu-spacing-04);border-top:1px solid var(--klevu-color-neutral-3)}footer .inputs{display:flex;gap:var(--klevu-spacing-04)}footer klevu-textfield{width:100%}";

var __classPrivateFieldGet$3 = (undefined && undefined.__classPrivateFieldGet) || function (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);
};
var __classPrivateFieldSet$3 = (undefined && undefined.__classPrivateFieldSet) || function (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;
};
var _KlevuChatLayout_instances, _KlevuChatLayout_scrollElement, _KlevuChatLayout_popupElement, _KlevuChatLayout_sendMessage;
const KlevuChatLayout = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuChatLayoutMessageSent = index.createEvent(this, "klevuChatLayoutMessageSent", 7);
    this.klevuChatLayoutClose = index.createEvent(this, "klevuChatLayoutClose", 7);
    _KlevuChatLayout_instances.add(this);
    _KlevuChatLayout_scrollElement.set(this, void 0);
    _KlevuChatLayout_popupElement.set(this, void 0);
    this.showLoading = false;
    this.showClose = false;
    this.text = "";
  }
  componentDidLoad() {
    var _a;
    // listen to updates to DOM in slot and scroll to bottom
    const main = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot");
    const observer = new MutationObserver(() => {
      this.scrollMainToBottom();
    });
    if (main) {
      observer.observe(main, { childList: true });
    }
    setTimeout(() => {
      this.scrollMainToBottom();
    }, 20);
  }
  /**
   * Scroll current chat to bottom of page
   */
  async scrollMainToBottom() {
    var _a;
    const instance = await ((_a = __classPrivateFieldGet$3(this, _KlevuChatLayout_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
    if (instance) {
      setTimeout(() => {
        instance.elements().viewport.scrollTo({
          top: instance.elements().viewport.scrollHeight,
          behavior: "smooth",
        });
      }, 20);
    }
  }
  /**
   * Close the popup menu
   */
  async closePopup() {
    var _a;
    (_a = __classPrivateFieldGet$3(this, _KlevuChatLayout_popupElement, "f")) === null || _a === void 0 ? void 0 : _a.closeModal();
  }
  render() {
    return (index.h(index.Host, null, index.h("header", null, index.h("klevu-typography", { variant: "body-m-bold" }, "MOI"), this.showClose && (index.h("klevu-button", { onClick: () => this.klevuChatLayoutClose.emit(), size: "small", exportparts: utils.globalExportedParts, icon: "close", isSecondary: true }))), index.h("main", null, index.h("klevu-util-scrollbars", { overflowX: "hidden", overflowY: "scroll", ref: (el) => (__classPrivateFieldSet$3(this, _KlevuChatLayout_scrollElement, el, "f")) }, index.h("slot", null))), index.h("footer", null, index.h("slot", { name: "actions" }), index.h("div", { class: "inputs" }, index.h("klevu-popup", { anchor: "top-start", ref: (el) => (__classPrivateFieldSet$3(this, _KlevuChatLayout_popupElement, el, "f")) }, index.h("div", { slot: "content" }, index.h("slot", { name: "menu" })), index.h("klevu-button", { slot: "origin", exportparts: utils.globalExportedParts, icon: "menu", isSecondary: true })), index.h("klevu-textfield", { variant: "pill", value: this.text, onKlevuTextChanged: (e) => {
        this.text = e.detail;
        e.preventDefault();
        return false;
      }, onKlevuTextEnterPressed: () => __classPrivateFieldGet$3(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) }), index.h("klevu-button", { exportparts: utils.globalExportedParts, icon: "send", onClick: () => __classPrivateFieldGet$3(this, _KlevuChatLayout_instances, "m", _KlevuChatLayout_sendMessage).call(this) })))));
  }
  get el() { return index.getElement(this); }
};
_KlevuChatLayout_scrollElement = new WeakMap(), _KlevuChatLayout_popupElement = new WeakMap(), _KlevuChatLayout_instances = new WeakSet(), _KlevuChatLayout_sendMessage = function _KlevuChatLayout_sendMessage() {
  this.klevuChatLayoutMessageSent.emit(this.text);
  this.text = "";
};
KlevuChatLayout.style = klevuChatLayoutCss;

const klevuLoadingIndicatorCss = ":host{display:inline-block;--klevu-loading-indicator-color:var(--klevu-color-primary);height:16px;width:50px;position:relative}.dot-pulse{position:relative;left:-9980px;top:3px;width:10px;height:10px;border-radius:5px;background-color:var(--klevu-loading-indicator-color);color:var(--klevu-loading-indicator-color);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:\"\";display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:var(--klevu-loading-indicator-color);color:var(--klevu-loading-indicator-color)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}";

const KlevuLoadingIndicator = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, null, index.h("div", { class: "dot-pulse" })));
  }
};
KlevuLoadingIndicator.style = klevuLoadingIndicatorCss;

const klevuModalCss = ":host{display:block}dialog{border:none !important;border-radius:var(--klevu-border-radius-m);padding:var(--klevu-spacing-04);box-shadow:var(--klevu-elevation-1)}main{padding:var(--klevu-spacing-04)}header{display:flex;justify-content:flex-end}button{border:none;background-color:transparent;appearance:none;border-radius:100%;height:30px;width:30px}";

var __classPrivateFieldGet$2 = (undefined && undefined.__classPrivateFieldGet) || function (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);
};
var __classPrivateFieldSet$2 = (undefined && undefined.__classPrivateFieldSet) || function (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;
};
var _KlevuModal_dialogRef;
const KlevuModal = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    _KlevuModal_dialogRef.set(this, void 0);
    this.startOpen = false;
  }
  componentDidLoad() {
    if (this.startOpen) {
      this.openModal();
    }
  }
  async openModal() {
    var _a;
    (_a = __classPrivateFieldGet$2(this, _KlevuModal_dialogRef, "f")) === null || _a === void 0 ? void 0 : _a.showModal();
  }
  async closeModal() {
    var _a;
    (_a = __classPrivateFieldGet$2(this, _KlevuModal_dialogRef, "f")) === null || _a === void 0 ? void 0 : _a.close();
  }
  render() {
    return (index.h(index.Host, null, index.h("dialog", { ref: (el) => (__classPrivateFieldSet$2(this, _KlevuModal_dialogRef, el, "f")) }, index.h("header", null, index.h("form", { method: "dialog" }, index.h("button", null, index.h("span", { part: "material-icon" }, "close")))), index.h("main", null, index.h("slot", null)))));
  }
};
_KlevuModal_dialogRef = new WeakMap();
KlevuModal.style = klevuModalCss;

function getAlignment(placement) {
  return placement.split('-')[1];
}

function getLengthFromAxis(axis) {
  return axis === 'y' ? 'height' : 'width';
}

function getSide(placement) {
  return placement.split('-')[0];
}

function getMainAxisFromPlacement(placement) {
  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
}

function computeCoordsFromPlacement(_ref, placement, rtl) {
  let {
    reference,
    floating
  } = _ref;
  const commonX = reference.x + reference.width / 2 - floating.width / 2;
  const commonY = reference.y + reference.height / 2 - floating.height / 2;
  const mainAxis = getMainAxisFromPlacement(placement);
  const length = getLengthFromAxis(mainAxis);
  const commonAlign = reference[length] / 2 - floating[length] / 2;
  const side = getSide(placement);
  const isVertical = mainAxis === 'x';
  let coords;
  switch (side) {
    case 'top':
      coords = {
        x: commonX,
        y: reference.y - floating.height
      };
      break;
    case 'bottom':
      coords = {
        x: commonX,
        y: reference.y + reference.height
      };
      break;
    case 'right':
      coords = {
        x: reference.x + reference.width,
        y: commonY
      };
      break;
    case 'left':
      coords = {
        x: reference.x - floating.width,
        y: commonY
      };
      break;
    default:
      coords = {
        x: reference.x,
        y: reference.y
      };
  }
  switch (getAlignment(placement)) {
    case 'start':
      coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
      break;
    case 'end':
      coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
      break;
  }
  return coords;
}

/**
 * Computes the `x` and `y` coordinates that will place the floating element
 * next to a reference element when it is given a certain positioning strategy.
 *
 * This export does not have any `platform` interface logic. You will need to
 * write one for the platform you are using Floating UI with.
 */
const computePosition$1 = async (reference, floating, config) => {
  const {
    placement = 'bottom',
    strategy = 'absolute',
    middleware = [],
    platform
  } = config;
  const validMiddleware = middleware.filter(Boolean);
  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
  let rects = await platform.getElementRects({
    reference,
    floating,
    strategy
  });
  let {
    x,
    y
  } = computeCoordsFromPlacement(rects, placement, rtl);
  let statefulPlacement = placement;
  let middlewareData = {};
  let resetCount = 0;
  for (let i = 0; i < validMiddleware.length; i++) {
    const {
      name,
      fn
    } = validMiddleware[i];
    const {
      x: nextX,
      y: nextY,
      data,
      reset
    } = await fn({
      x,
      y,
      initialPlacement: placement,
      placement: statefulPlacement,
      strategy,
      middlewareData,
      rects,
      platform,
      elements: {
        reference,
        floating
      }
    });
    x = nextX != null ? nextX : x;
    y = nextY != null ? nextY : y;
    middlewareData = {
      ...middlewareData,
      [name]: {
        ...middlewareData[name],
        ...data
      }
    };
    if (reset && resetCount <= 50) {
      resetCount++;
      if (typeof reset === 'object') {
        if (reset.placement) {
          statefulPlacement = reset.placement;
        }
        if (reset.rects) {
          rects = reset.rects === true ? await platform.getElementRects({
            reference,
            floating,
            strategy
          }) : reset.rects;
        }
        ({
          x,
          y
        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
      }
      i = -1;
      continue;
    }
  }
  return {
    x,
    y,
    placement: statefulPlacement,
    strategy,
    middlewareData
  };
};

function expandPaddingObject(padding) {
  return {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    ...padding
  };
}

function getSideObjectFromPadding(padding) {
  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
    top: padding,
    right: padding,
    bottom: padding,
    left: padding
  };
}

function rectToClientRect(rect) {
  return {
    ...rect,
    top: rect.y,
    left: rect.x,
    right: rect.x + rect.width,
    bottom: rect.y + rect.height
  };
}

/**
 * Resolves with an object of overflow side offsets that determine how much the
 * element is overflowing a given clipping boundary on each side.
 * - positive = overflowing the boundary by that number of pixels
 * - negative = how many pixels left before it will overflow
 * - 0 = lies flush with the boundary
 * @see https://floating-ui.com/docs/detectOverflow
 */
async function detectOverflow(state, options) {
  var _await$platform$isEle;
  if (options === void 0) {
    options = {};
  }
  const {
    x,
    y,
    platform,
    rects,
    elements,
    strategy
  } = state;
  const {
    boundary = 'clippingAncestors',
    rootBoundary = 'viewport',
    elementContext = 'floating',
    altBoundary = false,
    padding = 0
  } = options;
  const paddingObject = getSideObjectFromPadding(padding);
  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
  const element = elements[altBoundary ? altContext : elementContext];
  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
    boundary,
    rootBoundary,
    strategy
  }));
  const rect = elementContext === 'floating' ? {
    ...rects.floating,
    x,
    y
  } : rects.reference;
  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
    x: 1,
    y: 1
  } : {
    x: 1,
    y: 1
  };
  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
    rect,
    offsetParent,
    strategy
  }) : rect);
  return {
    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
  };
}

const min$1 = Math.min;
const max$1 = Math.max;

function within(min$1$1, value, max$1$1) {
  return max$1(min$1$1, min$1(value, max$1$1));
}

async function convertValueToCoords(state, value) {
  const {
    placement,
    platform,
    elements
  } = state;
  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
  const side = getSide(placement);
  const alignment = getAlignment(placement);
  const isVertical = getMainAxisFromPlacement(placement) === 'x';
  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
  const crossAxisMulti = rtl && isVertical ? -1 : 1;
  const rawValue = typeof value === 'function' ? value(state) : value;

  // eslint-disable-next-line prefer-const
  let {
    mainAxis,
    crossAxis,
    alignmentAxis
  } = typeof rawValue === 'number' ? {
    mainAxis: rawValue,
    crossAxis: 0,
    alignmentAxis: null
  } : {
    mainAxis: 0,
    crossAxis: 0,
    alignmentAxis: null,
    ...rawValue
  };
  if (alignment && typeof alignmentAxis === 'number') {
    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
  }
  return isVertical ? {
    x: crossAxis * crossAxisMulti,
    y: mainAxis * mainAxisMulti
  } : {
    x: mainAxis * mainAxisMulti,
    y: crossAxis * crossAxisMulti
  };
}

/**
 * Modifies the placement by translating the floating element along the
 * specified axes.
 * A number (shorthand for `mainAxis` or distance), or an axes configuration
 * object may be passed.
 * @see https://floating-ui.com/docs/offset
 */
const offset = function (value) {
  if (value === void 0) {
    value = 0;
  }
  return {
    name: 'offset',
    options: value,
    async fn(state) {
      const {
        x,
        y
      } = state;
      const diffCoords = await convertValueToCoords(state, value);
      return {
        x: x + diffCoords.x,
        y: y + diffCoords.y,
        data: diffCoords
      };
    }
  };
};

function getCrossAxis(axis) {
  return axis === 'x' ? 'y' : 'x';
}

/**
 * Optimizes the visibility of the floating element by shifting it in order to
 * keep it in view when it will overflow the clipping boundary.
 * @see https://floating-ui.com/docs/shift
 */
const shift = function (options) {
  if (options === void 0) {
    options = {};
  }
  return {
    name: 'shift',
    options,
    async fn(state) {
      const {
        x,
        y,
        placement
      } = state;
      const {
        mainAxis: checkMainAxis = true,
        crossAxis: checkCrossAxis = false,
        limiter = {
          fn: _ref => {
            let {
              x,
              y
            } = _ref;
            return {
              x,
              y
            };
          }
        },
        ...detectOverflowOptions
      } = options;
      const coords = {
        x,
        y
      };
      const overflow = await detectOverflow(state, detectOverflowOptions);
      const mainAxis = getMainAxisFromPlacement(getSide(placement));
      const crossAxis = getCrossAxis(mainAxis);
      let mainAxisCoord = coords[mainAxis];
      let crossAxisCoord = coords[crossAxis];
      if (checkMainAxis) {
        const minSide = mainAxis === 'y' ? 'top' : 'left';
        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
        const min = mainAxisCoord + overflow[minSide];
        const max = mainAxisCoord - overflow[maxSide];
        mainAxisCoord = within(min, mainAxisCoord, max);
      }
      if (checkCrossAxis) {
        const minSide = crossAxis === 'y' ? 'top' : 'left';
        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
        const min = crossAxisCoord + overflow[minSide];
        const max = crossAxisCoord - overflow[maxSide];
        crossAxisCoord = within(min, crossAxisCoord, max);
      }
      const limitedCoords = limiter.fn({
        ...state,
        [mainAxis]: mainAxisCoord,
        [crossAxis]: crossAxisCoord
      });
      return {
        ...limitedCoords,
        data: {
          x: limitedCoords.x - x,
          y: limitedCoords.y - y
        }
      };
    }
  };
};

/**
 * Provides data that allows you to change the size of the floating element —
 * for instance, prevent it from overflowing the clipping boundary or match the
 * width of the reference element.
 * @see https://floating-ui.com/docs/size
 */
const size = function (options) {
  if (options === void 0) {
    options = {};
  }
  return {
    name: 'size',
    options,
    async fn(state) {
      const {
        placement,
        rects,
        platform,
        elements
      } = state;
      const {
        apply = () => {},
        ...detectOverflowOptions
      } = options;
      const overflow = await detectOverflow(state, detectOverflowOptions);
      const side = getSide(placement);
      const alignment = getAlignment(placement);
      const axis = getMainAxisFromPlacement(placement);
      const isXAxis = axis === 'x';
      const {
        width,
        height
      } = rects.floating;
      let heightSide;
      let widthSide;
      if (side === 'top' || side === 'bottom') {
        heightSide = side;
        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
      } else {
        widthSide = side;
        heightSide = alignment === 'end' ? 'top' : 'bottom';
      }
      const overflowAvailableHeight = height - overflow[heightSide];
      const overflowAvailableWidth = width - overflow[widthSide];
      const noShift = !state.middlewareData.shift;
      let availableHeight = overflowAvailableHeight;
      let availableWidth = overflowAvailableWidth;
      if (isXAxis) {
        const maximumClippingWidth = width - overflow.left - overflow.right;
        availableWidth = alignment || noShift ? min$1(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
      } else {
        const maximumClippingHeight = height - overflow.top - overflow.bottom;
        availableHeight = alignment || noShift ? min$1(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
      }
      if (noShift && !alignment) {
        const xMin = max$1(overflow.left, 0);
        const xMax = max$1(overflow.right, 0);
        const yMin = max$1(overflow.top, 0);
        const yMax = max$1(overflow.bottom, 0);
        if (isXAxis) {
          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right));
        } else {
          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom));
        }
      }
      await apply({
        ...state,
        availableWidth,
        availableHeight
      });
      const nextDimensions = await platform.getDimensions(elements.floating);
      if (width !== nextDimensions.width || height !== nextDimensions.height) {
        return {
          reset: {
            rects: true
          }
        };
      }
      return {};
    }
  };
};

function getWindow(node) {
  var _node$ownerDocument;
  return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}

function getComputedStyle$1(element) {
  return getWindow(element).getComputedStyle(element);
}

function isNode(value) {
  return value instanceof getWindow(value).Node;
}
function getNodeName(node) {
  return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
}

let uaString;
function getUAString() {
  if (uaString) {
    return uaString;
  }
  const uaData = navigator.userAgentData;
  if (uaData && Array.isArray(uaData.brands)) {
    uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
    return uaString;
  }
  return navigator.userAgent;
}

function isHTMLElement(value) {
  return value instanceof getWindow(value).HTMLElement;
}
function isElement(value) {
  return value instanceof getWindow(value).Element;
}
function isShadowRoot(node) {
  // Browsers without `ShadowRoot` support.
  if (typeof ShadowRoot === 'undefined') {
    return false;
  }
  const OwnElement = getWindow(node).ShadowRoot;
  return node instanceof OwnElement || node instanceof ShadowRoot;
}
function isOverflowElement(element) {
  const {
    overflow,
    overflowX,
    overflowY,
    display
  } = getComputedStyle$1(element);
  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
  return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isContainingBlock(element) {
  // TODO: Try to use feature detection here instead.
  const isFirefox = /firefox/i.test(getUAString());
  const css = getComputedStyle$1(element);
  const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;

  // This is non-exhaustive but covers the most common CSS properties that
  // create a containing block.
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
  return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
    // Add type check for old browsers.
    const contain = css.contain;
    return contain != null ? contain.includes(value) : false;
  });
}

/**
 * Determines whether or not `.getBoundingClientRect()` is affected by visual
 * viewport offsets. In Safari, the `x`/`y` offsets are values relative to the
 * visual viewport, while in other engines, they are values relative to the
 * layout viewport.
 */
function isClientRectVisualViewportBased() {
  // TODO: Try to use feature detection here instead. Feature detection for
  // this can fail in various ways, making the userAgent check the most
  // reliable:
  // • Always-visible scrollbar or not
  // • Width of <html>

  // Is Safari.
  return /^((?!chrome|android).)*safari/i.test(getUAString());
}
function isLastTraversableNode(node) {
  return ['html', 'body', '#document'].includes(getNodeName(node));
}

const min = Math.min;
const max = Math.max;
const round = Math.round;

function getCssDimensions(element) {
  const css = getComputedStyle$1(element);
  // In testing environments, the `width` and `height` properties are empty
  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
  let width = parseFloat(css.width) || 0;
  let height = parseFloat(css.height) || 0;
  const hasOffset = isHTMLElement(element);
  const offsetWidth = hasOffset ? element.offsetWidth : width;
  const offsetHeight = hasOffset ? element.offsetHeight : height;
  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
  if (shouldFallback) {
    width = offsetWidth;
    height = offsetHeight;
  }
  return {
    width,
    height,
    fallback: shouldFallback
  };
}

function unwrapElement(element) {
  return !isElement(element) ? element.contextElement : element;
}

const FALLBACK_SCALE = {
  x: 1,
  y: 1
};
function getScale(element) {
  const domElement = unwrapElement(element);
  if (!isHTMLElement(domElement)) {
    return FALLBACK_SCALE;
  }
  const rect = domElement.getBoundingClientRect();
  const {
    width,
    height,
    fallback
  } = getCssDimensions(domElement);
  let x = (fallback ? round(rect.width) : rect.width) / width;
  let y = (fallback ? round(rect.height) : rect.height) / height;

  // 0, NaN, or Infinity should always fallback to 1.

  if (!x || !Number.isFinite(x)) {
    x = 1;
  }
  if (!y || !Number.isFinite(y)) {
    y = 1;
  }
  return {
    x,
    y
  };
}

function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
  var _win$visualViewport, _win$visualViewport2;
  if (includeScale === void 0) {
    includeScale = false;
  }
  if (isFixedStrategy === void 0) {
    isFixedStrategy = false;
  }
  const clientRect = element.getBoundingClientRect();
  const domElement = unwrapElement(element);
  let scale = FALLBACK_SCALE;
  if (includeScale) {
    if (offsetParent) {
      if (isElement(offsetParent)) {
        scale = getScale(offsetParent);
      }
    } else {
      scale = getScale(element);
    }
  }
  const win = domElement ? getWindow(domElement) : window;
  const addVisualOffsets = isClientRectVisualViewportBased() && isFixedStrategy;
  let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
  let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
  let width = clientRect.width / scale.x;
  let height = clientRect.height / scale.y;
  if (domElement) {
    const win = getWindow(domElement);
    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
    let currentIFrame = win.frameElement;
    while (currentIFrame && offsetParent && offsetWin !== win) {
      const iframeScale = getScale(currentIFrame);
      const iframeRect = currentIFrame.getBoundingClientRect();
      const css = getComputedStyle(currentIFrame);
      iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
      iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
      x *= iframeScale.x;
      y *= iframeScale.y;
      width *= iframeScale.x;
      height *= iframeScale.y;
      x += iframeRect.x;
      y += iframeRect.y;
      currentIFrame = getWindow(currentIFrame).frameElement;
    }
  }
  return rectToClientRect({
    width,
    height,
    x,
    y
  });
}

function getDocumentElement(node) {
  return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
}

function getNodeScroll(element) {
  if (isElement(element)) {
    return {
      scrollLeft: element.scrollLeft,
      scrollTop: element.scrollTop
    };
  }
  return {
    scrollLeft: element.pageXOffset,
    scrollTop: element.pageYOffset
  };
}

function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
  let {
    rect,
    offsetParent,
    strategy
  } = _ref;
  const isOffsetParentAnElement = isHTMLElement(offsetParent);
  const documentElement = getDocumentElement(offsetParent);
  if (offsetParent === documentElement) {
    return rect;
  }
  let scroll = {
    scrollLeft: 0,
    scrollTop: 0
  };
  let scale = {
    x: 1,
    y: 1
  };
  const offsets = {
    x: 0,
    y: 0
  };
  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
      scroll = getNodeScroll(offsetParent);
    }
    if (isHTMLElement(offsetParent)) {
      const offsetRect = getBoundingClientRect(offsetParent);
      scale = getScale(offsetParent);
      offsets.x = offsetRect.x + offsetParent.clientLeft;
      offsets.y = offsetRect.y + offsetParent.clientTop;
    }
  }
  return {
    width: rect.width * scale.x,
    height: rect.height * scale.y,
    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
  };
}

function getWindowScrollBarX(element) {
  // If <html> has a CSS width greater than the viewport, then this will be
  // incorrect for RTL.
  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
}

// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
  const html = getDocumentElement(element);
  const scroll = getNodeScroll(element);
  const body = element.ownerDocument.body;
  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
  const y = -scroll.scrollTop;
  if (getComputedStyle$1(body).direction === 'rtl') {
    x += max(html.clientWidth, body.clientWidth) - width;
  }
  return {
    width,
    height,
    x,
    y
  };
}

function getParentNode(node) {
  if (getNodeName(node) === 'html') {
    return node;
  }
  const result =
  // Step into the shadow DOM of the parent of a slotted node.
  node.assignedSlot ||
  // DOM Element detected.
  node.parentNode ||
  // ShadowRoot detected.
  isShadowRoot(node) && node.host ||
  // Fallback.
  getDocumentElement(node);
  return isShadowRoot(result) ? result.host : result;
}

function getNearestOverflowAncestor(node) {
  const parentNode = getParentNode(node);
  if (isLastTraversableNode(parentNode)) {
    // `getParentNode` will never return a `Document` due to the fallback
    // check, so it's either the <html> or <body> element.
    return parentNode.ownerDocument.body;
  }
  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
    return parentNode;
  }
  return getNearestOverflowAncestor(parentNode);
}

function getOverflowAncestors(node, list) {
  var _node$ownerDocument;
  if (list === void 0) {
    list = [];
  }
  const scrollableAncestor = getNearestOverflowAncestor(node);
  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
  const win = getWindow(scrollableAncestor);
  if (isBody) {
    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
  }
  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
}

function getViewportRect(element, strategy) {
  const win = getWindow(element);
  const html = getDocumentElement(element);
  const visualViewport = win.visualViewport;
  let width = html.clientWidth;
  let height = html.clientHeight;
  let x = 0;
  let y = 0;
  if (visualViewport) {
    width = visualViewport.width;
    height = visualViewport.height;
    const visualViewportBased = isClientRectVisualViewportBased();
    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
      x = visualViewport.offsetLeft;
      y = visualViewport.offsetTop;
    }
  }
  return {
    width,
    height,
    x,
    y
  };
}

// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
  const top = clientRect.top + element.clientTop;
  const left = clientRect.left + element.clientLeft;
  const scale = isHTMLElement(element) ? getScale(element) : {
    x: 1,
    y: 1
  };
  const width = element.clientWidth * scale.x;
  const height = element.clientHeight * scale.y;
  const x = left * scale.x;
  const y = top * scale.y;
  return {
    width,
    height,
    x,
    y
  };
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
  let rect;
  if (clippingAncestor === 'viewport') {
    rect = getViewportRect(element, strategy);
  } else if (clippingAncestor === 'document') {
    rect = getDocumentRect(getDocumentElement(element));
  } else if (isElement(clippingAncestor)) {
    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
  } else {
    const mutableRect = {
      ...clippingAncestor
    };
    if (isClientRectVisualViewportBased()) {
      var _win$visualViewport, _win$visualViewport2;
      const win = getWindow(element);
      mutableRect.x -= ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0;
      mutableRect.y -= ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0;
    }
    rect = mutableRect;
  }
  return rectToClientRect(rect);
}
function hasFixedPositionAncestor(element, stopNode) {
  const parentNode = getParentNode(element);
  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
    return false;
  }
  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
}

// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
  const cachedResult = cache.get(element);
  if (cachedResult) {
    return cachedResult;
  }
  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
  let currentContainingBlockComputedStyle = null;
  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
  let currentNode = elementIsFixed ? getParentNode(element) : element;

  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
    const computedStyle = getComputedStyle$1(currentNode);
    const currentNodeIsContaining = isContainingBlock(currentNode);
    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
      currentContainingBlockComputedStyle = null;
    }
    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
    if (shouldDropCurrentNode) {
      // Drop non-containing blocks.
      result = result.filter(ancestor => ancestor !== currentNode);
    } else {
      // Record last containing block for next iteration.
      currentContainingBlockComputedStyle = computedStyle;
    }
    currentNode = getParentNode(currentNode);
  }
  cache.set(element, result);
  return result;
}

// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
  let {
    element,
    boundary,
    rootBoundary,
    strategy
  } = _ref;
  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
  const firstClippingAncestor = clippingAncestors[0];
  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
    accRect.top = max(rect.top, accRect.top);
    accRect.right = min(rect.right, accRect.right);
    accRect.bottom = min(rect.bottom, accRect.bottom);
    accRect.left = max(rect.left, accRect.left);
    return accRect;
  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
  return {
    width: clippingRect.right - clippingRect.left,
    height: clippingRect.bottom - clippingRect.top,
    x: clippingRect.left,
    y: clippingRect.top
  };
}

function getDimensions(element) {
  return getCssDimensions(element);
}

function getTrueOffsetParent(element, polyfill) {
  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
    return null;
  }
  if (polyfill) {
    return polyfill(element);
  }
  return element.offsetParent;
}
function getContainingBlock(element) {
  let currentNode = getParentNode(element);
  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
    if (isContainingBlock(currentNode)) {
      return currentNode;
    } else {
      currentNode = getParentNode(currentNode);
    }
  }
  return null;
}

// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element, polyfill) {
  const window = getWindow(element);
  if (!isHTMLElement(element)) {
    return window;
  }
  let offsetParent = getTrueOffsetParent(element, polyfill);
  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
  }
  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
    return window;
  }
  return offsetParent || getContainingBlock(element) || window;
}

function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
  const isOffsetParentAnElement = isHTMLElement(offsetParent);
  const documentElement = getDocumentElement(offsetParent);
  const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
  let scroll = {
    scrollLeft: 0,
    scrollTop: 0
  };
  const offsets = {
    x: 0,
    y: 0
  };
  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
      scroll = getNodeScroll(offsetParent);
    }
    if (isHTMLElement(offsetParent)) {
      const offsetRect = getBoundingClientRect(offsetParent, true);
      offsets.x = offsetRect.x + offsetParent.clientLeft;
      offsets.y = offsetRect.y + offsetParent.clientTop;
    } else if (documentElement) {
      offsets.x = getWindowScrollBarX(documentElement);
    }
  }
  return {
    x: rect.left + scroll.scrollLeft - offsets.x,
    y: rect.top + scroll.scrollTop - offsets.y,
    width: rect.width,
    height: rect.height
  };
}

const platform = {
  getClippingRect,
  convertOffsetParentRelativeRectToViewportRelativeRect,
  isElement,
  getDimensions,
  getOffsetParent,
  getDocumentElement,
  getScale,
  async getElementRects(_ref) {
    let {
      reference,
      floating,
      strategy
    } = _ref;
    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
    const getDimensionsFn = this.getDimensions;
    return {
      reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
      floating: {
        x: 0,
        y: 0,
        ...(await getDimensionsFn(floating))
      }
    };
  },
  getClientRects: element => Array.from(element.getClientRects()),
  isRTL: element => getComputedStyle$1(element).direction === 'rtl'
};

/**
 * Automatically updates the position of the floating element when necessary.
 * Should only be called when the floating element is mounted on the DOM or
 * visible on the screen.
 * @returns cleanup function that should be invoked when the floating element is
 * removed from the DOM or hidden from the screen.
 * @see https://floating-ui.com/docs/autoUpdate
 */
function autoUpdate(reference, floating, update, options) {
  if (options === void 0) {
    options = {};
  }
  const {
    ancestorScroll = true,
    ancestorResize = true,
    elementResize = true,
    animationFrame = false
  } = options;
  const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
  ancestors.forEach(ancestor => {
    // ignores Window, checks for [object VisualViewport]
    const isVisualViewport = !isElement(ancestor) && ancestor.toString().includes('V');
    if (ancestorScroll && (animationFrame ? isVisualViewport : true)) {
      ancestor.addEventListener('scroll', update, {
        passive: true
      });
    }
    ancestorResize && ancestor.addEventListener('resize', update);
  });
  let observer = null;
  if (elementResize) {
    observer = new ResizeObserver(() => {
      update();
    });
    isElement(reference) && !animationFrame && observer.observe(reference);
    if (!isElement(reference) && reference.contextElement && !animationFrame) {
      observer.observe(reference.contextElement);
    }
    observer.observe(floating);
  }
  let frameId;
  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
  if (animationFrame) {
    frameLoop();
  }
  function frameLoop() {
    const nextRefRect = getBoundingClientRect(reference);
    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
      update();
    }
    prevRefRect = nextRefRect;
    frameId = requestAnimationFrame(frameLoop);
  }
  update();
  return () => {
    var _observer;
    ancestors.forEach(ancestor => {
      ancestorScroll && ancestor.removeEventListener('scroll', update);
      ancestorResize && ancestor.removeEventListener('resize', update);
    });
    (_observer = observer) == null ? void 0 : _observer.disconnect();
    observer = null;
    if (animationFrame) {
      cancelAnimationFrame(frameId);
    }
  };
}

/**
 * Computes the `x` and `y` coordinates that will place the floating element
 * next to a reference element when it is given a certain CSS positioning
 * strategy.
 */
const computePosition = (reference, floating, options) => {
  // This caches the expensive `getClippingElementAncestors` function so that
  // multiple lifecycle resets re-use the same result. It only lives for a
  // single call. If other functions become expensive, we can add them as well.
  const cache = new Map();
  const mergedOptions = {
    platform,
    ...options
  };
  const platformWithCache = {
    ...mergedOptions.platform,
    _c: cache
  };
  return computePosition$1(reference, floating, {
    ...mergedOptions,
    platform: platformWithCache
  });
};

const klevuPopupCss = ":host{display:block}.originContainer{display:inline-block}.popup{position:absolute;top:0;left:0;width:max-content;visibility:hidden;box-sizing:border-box;padding:var(--klevu-spacing-04);border-radius:var(--klevu-border-radius-s);transition:opacity 0.4s, visibility 0.4s;opacity:0;z-index:1000;background:white}.elevation-1{box-shadow:var(--klevu-elevation-1)}.elevation-2{box-shadow:var(--klevu-elevation-2)}.elevation-3{box-shadow:var(--klevu-elevation-3)}.popup.left{left:0}.popup.right{right:0}.popup.show{visibility:visible;opacity:1}.popup.fullwidth{min-width:100%}";

var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (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);
};
var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) || function (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;
};
var _KlevuPopup_instances, _KlevuPopup_stopUpdatePos, _KlevuPopup_originElement, _KlevuPopup_contentElement, _KlevuPopup_closeEvent, _KlevuPopup_internalOpen, _KlevuPopup_updatePopupPosition;
const KlevuPopup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuPopupOpen = index.createEvent(this, "klevuPopupOpen", 7);
    _KlevuPopup_instances.add(this);
    _KlevuPopup_stopUpdatePos.set(this, void 0);
    _KlevuPopup_originElement.set(this, void 0);
    _KlevuPopup_contentElement.set(this, void 0);
    this.startOpen = undefined;
    this.openAtFocus = true;
    this.closeAtOutsideClick = true;
    this.fullwidthContent = false;
    this.anchor = "left-end";
    this.elevation = 1;
    this.open = false;
  }
  /**
   * Opens the popup
   */
  async openModal() {
    __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
  }
  /**
   * Closes the popup
   */
  async closeModal() {
    this.open = false;
  }
  childItemClicked(event) {
    if (event.composedPath().some((e) => e.localName === "slot" && e.name === "origin")) {
      __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
    }
  }
  childItemFocused(event) {
    if (!this.openAtFocus) {
      return;
    }
    if (event.composedPath().some((e) => e.localName === "slot" && e.name === "origin")) {
      __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_internalOpen).call(this);
    }
  }
  connectedCallback() {
    if (this.closeAtOutsideClick) {
      document.addEventListener("click", __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_closeEvent).bind(this));
    }
  }
  componentDidLoad() {
    var _a, _b, _c, _d;
    __classPrivateFieldSet$1(this, _KlevuPopup_originElement, (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#origin"), "f");
    __classPrivateFieldSet$1(this, _KlevuPopup_contentElement, (_d = (_c = this.el) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector("#content"), "f");
    if (this.startOpen) {
      this.openModal();
    }
    if (__classPrivateFieldGet$1(this, _KlevuPopup_originElement, "f") && __classPrivateFieldGet$1(this, _KlevuPopup_contentElement, "f")) {
      __classPrivateFieldSet$1(this, _KlevuPopup_stopUpdatePos, autoUpdate(__classPrivateFieldGet$1(this, _KlevuPopup_originElement, "f"), __classPrivateFieldGet$1(this, _KlevuPopup_contentElement, "f"), __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_updatePopupPosition).bind(this)), "f");
    }
  }
  detachedCallback() {
    var _a;
    document.removeEventListener("click", __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_closeEvent));
    (_a = __classPrivateFieldGet$1(this, _KlevuPopup_stopUpdatePos, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  render() {
    const popupClasses = {
      popup: true,
      show: this.open,
    };
    popupClasses[`elevation-${this.elevation}`] = true;
    return (index.h(index.Host, null, index.h("div", { id: "origin", class: "originContainer" }, index.h("slot", { name: "origin" })), index.h("div", { id: "content", class: popupClasses }, index.h("slot", { name: "content" }))));
  }
  get el() { return index.getElement(this); }
};
_KlevuPopup_stopUpdatePos = new WeakMap(), _KlevuPopup_originElement = new WeakMap(), _KlevuPopup_contentElement = new WeakMap(), _KlevuPopup_instances = new WeakSet(), _KlevuPopup_closeEvent = function _KlevuPopup_closeEvent(event) {
  if (!event.composedPath().some((el) => el === this.el)) {
    this.open = false;
  }
}, _KlevuPopup_internalOpen = async function _KlevuPopup_internalOpen() {
  if (this.open) {
    return;
  }
  this.open = true;
  __classPrivateFieldGet$1(this, _KlevuPopup_instances, "m", _KlevuPopup_updatePopupPosition).call(this);
  this.klevuPopupOpen.emit();
}, _KlevuPopup_updatePopupPosition = async function _KlevuPopup_updatePopupPosition() {
  if (!__classPrivateFieldGet$1(this, _KlevuPopup_originElement, "f") || !__classPrivateFieldGet$1(this, _KlevuPopup_contentElement, "f") || !this.open) {
    return;
  }
  const { x, y } = await computePosition(__classPrivateFieldGet$1(this, _KlevuPopup_originElement, "f"), __classPrivateFieldGet$1(this, _KlevuPopup_contentElement, "f"), {
    placement: this.anchor,
    middleware: [
      offset(16),
      shift(),
      size({
        apply({ availableWidth, availableHeight, elements }) {
          Object.assign(elements.floating.style, {
            maxWidth: `${availableWidth}px`,
            maxHeight: `${availableHeight}px`,
          });
        },
      }),
    ],
  });
  Object.assign(__classPrivateFieldGet$1(this, _KlevuPopup_contentElement, "f").style, {
    left: `${x}px`,
    top: `${y}px`,
  });
};
KlevuPopup.style = klevuPopupCss;

const klevuSlidesCss = ":host{display:block;--item-width:var(--klevu-slides-item-width, inherit)}.slides{display:flex;gap:var(--klevu-spacing-05);flex-shrink:0}.slides slot::slotted(*){flex-shrink:0;width:var(--item-width)}header{display:flex;justify-content:space-between;align-items:center}header div klevu-button{margin-left:var(--klevu-spacing-04)}";

var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (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);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (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;
};
var _KlevuSlides_instances, _KlevuSlides_gap, _KlevuSlides_slotElement, _KlevuSlides_scrollElement, _KlevuSlides_prev, _KlevuSlides_next, _KlevuSlides_calcAmountToSlide;
const KlevuSlides = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    _KlevuSlides_instances.add(this);
    _KlevuSlides_gap.set(this, 0);
    _KlevuSlides_slotElement.set(this, void 0);
    _KlevuSlides_scrollElement.set(this, void 0);
    _KlevuSlides_prev.set(this, async () => {
      var _a;
      const instance = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
      if (instance) {
        instance.elements().viewport.scrollTo({
          left: instance.elements().viewport.scrollLeft - (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
    });
    _KlevuSlides_next.set(this, async () => {
      var _a;
      const instance = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getInstance());
      if (instance) {
        instance.elements().viewport.scrollTo({
          left: instance.elements().viewport.scrollLeft + (await __classPrivateFieldGet(this, _KlevuSlides_instances, "m", _KlevuSlides_calcAmountToSlide).call(this)),
          behavior: "smooth",
        });
      }
    });
    this.heading = undefined;
    this.slideFullWidth = undefined;
    this.hideNextPrev = undefined;
  }
  connectedCallback() {
    __classPrivateFieldSet(this, _KlevuSlides_gap, parseInt(getComputedStyle(document.documentElement).getPropertyValue("--klevu-spacing-05")), "f");
    if (isNaN(__classPrivateFieldGet(this, _KlevuSlides_gap, "f"))) {
      __classPrivateFieldSet(this, _KlevuSlides_gap, 0, "f");
    }
  }
  render() {
    return (index.h(index.Host, null, this.heading === undefined || !this.hideNextPrev ? (index.h("header", null, index.h("klevu-typography", { variant: "h2" }, this.heading), this.hideNextPrev ? null : (index.h("div", null, index.h("klevu-button", { exportparts: utils.globalExportedParts, class: "prev", icon: "chevron_left", onClick: __classPrivateFieldGet(this, _KlevuSlides_prev, "f").bind(this), isSecondary: true }), index.h("klevu-button", { exportparts: utils.globalExportedParts, class: "next", icon: "chevron_right", onClick: __classPrivateFieldGet(this, _KlevuSlides_next, "f").bind(this), isSecondary: true }))))) : null, index.h("klevu-util-scrollbars", { overflowY: "scroll", ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_scrollElement, el, "f")) }, index.h("div", { class: { slides: true } }, index.h("slot", { ref: (el) => (__classPrivateFieldSet(this, _KlevuSlides_slotElement, el, "f")) })))));
  }
};
_KlevuSlides_gap = new WeakMap(), _KlevuSlides_slotElement = new WeakMap(), _KlevuSlides_scrollElement = new WeakMap(), _KlevuSlides_prev = new WeakMap(), _KlevuSlides_next = new WeakMap(), _KlevuSlides_instances = new WeakSet(), _KlevuSlides_calcAmountToSlide = async function _KlevuSlides_calcAmountToSlide() {
  var _a, _b, _c, _d;
  let w;
  if (this.slideFullWidth) {
    const cont = await ((_a = __classPrivateFieldGet(this, _KlevuSlides_scrollElement, "f")) === null || _a === void 0 ? void 0 : _a.getContainer());
    if (cont) {
      w = cont.clientWidth;
    }
  }
  else {
    w = ((_d = (_c = (_b = __classPrivateFieldGet(this, _KlevuSlides_slotElement, "f")) === null || _b === void 0 ? void 0 : _b.assignedElements().at(0)) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 200) + __classPrivateFieldGet(this, _KlevuSlides_gap, "f");
  }
  return w !== null && w !== void 0 ? w : 200;
};
KlevuSlides.style = klevuSlidesCss;

exports.klevu_chat_bubble = KlevuChatBubble;
exports.klevu_chat_layout = KlevuChatLayout;
exports.klevu_loading_indicator = KlevuLoadingIndicator;
exports.klevu_modal = KlevuModal;
exports.klevu_popup = KlevuPopup;
exports.klevu_slides = KlevuSlides;

//# sourceMappingURL=klevu-chat-bubble_6.cjs.entry.js.map