import { r as registerInstance, c as createEvent, h, H as Host } from './index-5c6903aa.js';

const klevuBannerCss = ":host{display:block}a{text-decoration:none}img{width:100%}";

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 _KlevuBanner_instances, _KlevuBanner_click;
const KlevuBanner = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuBannerClick = createEvent(this, "klevuBannerClick", 7);
    _KlevuBanner_instances.add(this);
    this.imageUrl = undefined;
    this.linkUrl = undefined;
    this.altText = undefined;
    this.target = "_blank";
  }
  render() {
    return (h(Host, null, h("slot", null, h("a", { href: this.linkUrl, target: this.target, onClick: __classPrivateFieldGet$2(this, _KlevuBanner_instances, "m", _KlevuBanner_click).bind(this) }, h("img", { part: "banner-image", src: this.imageUrl, alt: this.altText })))));
  }
};
_KlevuBanner_instances = new WeakSet(), _KlevuBanner_click = function _KlevuBanner_click(event) {
  const sent = this.klevuBannerClick.emit(this.linkUrl);
  if (sent.defaultPrevented) {
    event.preventDefault();
    return false;
  }
};
KlevuBanner.style = klevuBannerCss;

const klevuDropdownCss = ":host{--padding:var(--klevu-dropdown-padding, calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)));display:block}select{font-size:var(--klevu-body-s-size);font-weight:var(--klevu-body-s-weight);appearance:none;width:100%;min-width:80px;border:none;border-radius:var(--klevu-border-radius-m);height:calc(var(--klevu-size-m) * 2);padding:0 var(--padding);padding-right:30px}.selectcontainer{position:relative;display:flex}.selectcontainer.inline{display:inline-block}.selectcontainer.inline select{width:auto}.selectcontainer.default{border:1px solid var(--klevu-color-neutral-4);border-radius:var(--klevu-border-radius-m)}select:focus{outline:0}.selectcontainer:has(select:active,select:focus){border:1px solid var(--klevu-color-primary)}.triangle{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:block;font-size:20px;height:24px;width:24px;pointer-events:none}.selectcontainer.disabled{cursor:not-allowed}.selectcontainer.disabled select{cursor:not-allowed}.selectcontainer.disabled .triangle{background-color:var(--klevu-color-neutral-4)}";

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 _KlevuDropdown_instances, _KlevuDropdown_onChange;
const KlevuDropdown = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuDropdownChanged = createEvent(this, "klevuDropdownChanged", 7);
    _KlevuDropdown_instances.add(this);
    this.name = undefined;
    this.options = undefined;
    this.disabled = undefined;
    this.selected = undefined;
    this.variant = "default";
  }
  render() {
    var _a;
    return (h(Host, null, h("div", { class: {
        selectcontainer: true,
        disabled: Boolean(this.disabled),
        inline: this.variant === "inline",
        default: this.variant === "default",
      }, part: "dropdown-base" }, h("select", { name: this.name, disabled: this.disabled, onChange: __classPrivateFieldGet$1(this, _KlevuDropdown_instances, "m", _KlevuDropdown_onChange).bind(this), part: "dropdown-select" }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((o) => (h("option", { selected: this.selected === o.value, value: o.value }, o.text)))), h("klevu-icon", { name: "expand_more", class: "triangle" }))));
  }
};
_KlevuDropdown_instances = new WeakSet(), _KlevuDropdown_onChange = function _KlevuDropdown_onChange(event) {
  this.klevuDropdownChanged.emit(event.target.value);
};
KlevuDropdown.style = klevuDropdownCss;

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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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;
  }
};
_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);
    }
  }
};

export { KlevuBanner as klevu_banner, KlevuDropdown as klevu_dropdown, KlevuUtilViewport as klevu_util_viewport };

//# sourceMappingURL=klevu-banner_3.entry.js.map