import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';

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 _KlevuUtilViewport_instances, _KlevuUtilViewport_handleMatchMediaChange;
const KlevuUtilViewport = /*@__PURE__*/ proxyCustomElement(class KlevuUtilViewport extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.klevuSizeChanged = createEvent(this, "klevuSizeChanged", 7);
    _KlevuUtilViewport_instances.add(this);
    this.sizes = [
      { name: "xs", minWidth: 0, maxWidth: 319 },
      { name: "sm", minWidth: 320, maxWidth: 511 },
      { name: "md", minWidth: 512, maxWidth: 991 },
      { name: "lg", minWidth: 992, maxWidth: 1199 },
      { name: "xl", minWidth: 1200, maxWidth: 9999 },
    ];
  }
  connectedCallback() {
    // Add listeners for all sizes provided
    for (const size of this.sizes) {
      window
        .matchMedia(`(min-width: ${size.minWidth}px) and (max-width: ${size.maxWidth}px)`)
        .addEventListener("change", __classPrivateFieldGet(this, _KlevuUtilViewport_instances, "m", _KlevuUtilViewport_handleMatchMediaChange).bind(this));
    }
  }
  disconnectedCallback() {
    for (const size of this.sizes) {
      window
        .matchMedia(`(min-width: ${size.minWidth}px) and (max-width: ${size.maxWidth}px)`)
        .removeEventListener("change", __classPrivateFieldGet(this, _KlevuUtilViewport_instances, "m", _KlevuUtilViewport_handleMatchMediaChange).bind(this));
    }
  }
  async getCurrentSize() {
    // Iterate over all given sizes and see which one matches
    for (const size of this.sizes) {
      if (window.matchMedia(`(min-width: ${size.minWidth}px)  and (max-width: ${size.maxWidth}px)`).matches) {
        return size;
      }
    }
  }
  render() {
    return null;
  }
}, [0, "klevu-util-viewport", {
    "sizes": [16],
    "getCurrentSize": [64]
  }]);
_KlevuUtilViewport_instances = new WeakSet(), _KlevuUtilViewport_handleMatchMediaChange = function _KlevuUtilViewport_handleMatchMediaChange(q) {
  if (!q.matches) {
    return;
  }
  // Find the name of the matching size and emit an event
  for (const size of this.sizes) {
    if (q.media.indexOf(`min-width: ${size.minWidth}px`) > -1) {
      this.klevuSizeChanged.emit(size);
    }
  }
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-util-viewport"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-util-viewport":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuUtilViewport);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuUtilViewport as K, defineCustomElement as d };

//# sourceMappingURL=klevu-util-viewport2.js.map