import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-e582ed08.js';
import { c as closestElement } from './utils-e68d78f6.js';
import { g as getKMCSettings } from './getKMCSettings-cd5894f5.js';
import { g as getTranslation } from './getTranslation-f7bfa845.js';
import { K as KlevuInit } from './klevu-init-ea2d74dc.js';
import { p as partsExports } from './partsExports-48dff18e.js';
import './KlevuDomEvents-062429b2.js';

const klevuProductCss = ":host{display:inline-block;--loading-animation-time:5s;--width:var(--klevu-product-width, inherit);--small-width:var(--klevu-product-small-width, 150px);--image-aspect-ratio:var(--klevu-product-image-aspect-ratio, 1);--image-fill:var(--klevu-product-image-fill, cover);--border:var(--klevu-product-border, none);--border-radius:var(--klevu-product-border-radius, var(--klevu-border-radius-s, 4px));--gap-for-flex:var(--klevu-product-details-spacing, var(--klevu-spacing-06, 24px));--line-clamp:var(--klevu-product-name-lines, 2);--product-container-cursor:var(--klevu-product-container-cursor, \"auto\")}:host(.line){display:block}:host a{display:block;text-decoration:none;color:inherit;height:100%;width:100%}.container{display:block;padding:var(--klevu-spacing-04);border:var(--border);border-radius:var(--border-radius);box-sizing:border-box;height:100%;cursor:var(--product-container-cursor)}.container.default{display:flex;flex-direction:column;max-width:var(--width);gap:var(--gap-for-flex)}.container.default a,.container.small a{display:flex;flex-direction:column;justify-content:space-between;max-width:var(--width);gap:var(--gap-for-flex)}.container.default.fixedWidth{max-width:auto;width:var(--width)}.container.small{display:flex;flex-direction:column;max-width:var(--small-width);gap:var(--klevu-spacing-06)}.container.small.fixedWidth{max-width:auto;width:var(--small-width)}.default .image{width:100%;aspect-ratio:var(--image-aspect-ratio);background-size:var(--image-fill);background-position:center center;background-repeat:no-repeat}.small .image{width:100%;aspect-ratio:var(--image-aspect-ratio);background-size:var(--image-fill);background-position:center center;background-repeat:no-repeat}.container.line a{display:flex;flex-direction:row;justify-content:space-between;gap:var(--klevu-spacing-06)}.line .info{display:flex;flex-direction:column;margin-left:var(--klevu-spacing-04);flex:1}.line .info p{display:block;margin:0;text-align:right}.line .info .price{margin-top:var(--klevu-spacing-04)}.container.line .image{width:100px;height:100%;aspect-ratio:1;background-size:var(--image-fill);background-position:center center;flex-shrink:0}@media (max-width: 400px){.container.line .image{width:80px}}.brandname{margin-bottom:0}.productname span{display:block;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;height:calc(var(--klevu-body-s-height) * var(--klevu-body-s-line-height) * 2);text-align:left;margin-top:var(--klevu-spacing-04);overflow:hidden}.brandname+.productname{margin-top:0}.small .productname{font-size:inherit}.description{text-overflow:ellipsis;overflow:hidden;max-height:3.5em}.container.small .description{display:none}.price{margin-top:var(--klevu-spacing-04);text-align:left;font-size:var(--klevu-h2-size);font-weight:var(--klevu-h2-weight)}.small .price{font-size:inherit;font-weight:inherit}.container.line .loading{display:flex;flex-direction:row}.loading.image{background:linear-gradient(-75deg, #a1a1a1 0%, #eaeaea 50%, #f8f8f8 100%);background-size:400% 400%;animation:loadinggradient 5s linear infinite}.loading.content div{width:100%;height:32px;margin-bottom:6px;background:linear-gradient(-75deg, #a1a1a1 0%, #eaeaea 50%, #f8f8f8 100%);background-size:400% 400%;animation:loadinggradient var(--loading-animation-time) linear infinite}:host(.line.loading) .container{display:flex}:host(.line.loading) .content{width:100%;display:flex;flex-direction:column;margin:0 var(--klevu-spacing-04)}.loading.content div:nth-child(1){animation-delay:calc(var(--loading-animation-time) / 5)}.loading.content div:nth-child(2){animation-delay:calc(var(--loading-animation-time) / 4)}.loading.content div:nth-child(3){animation-delay:calc(var(--loading-animation-time) / 3)}.swatches{display:none;margin:var(--klevu-spacing-02) 0}.swatches>div{height:32px;width:32px;background-size:cover}.container.default .swatches{display:flex;gap:var(--klevu-spacing-02)}.image.no-image{color:var(--klevu-color-neutral-5);display:flex;justify-content:center;align-items:center;font-size:4em}.addToCart{margin-top:var(--klevu-spacing-04);white-space:nowrap}.vatcaption{display:block;--klevu-typography-color:var(--klevu-color-neutral-6)}.outOfStockCaption{display:block;--klevu-typography-color:var(--klevu-color-oos-caption, #ff0000)}.image .hover{opacity:0;height:100%;width:100%;aspect-ratio:var(--image-aspect-ratio);background-size:var(--image-fill);background-position:center center;background-repeat:no-repeat;transition:opacity 0.3s ease-in-out}.image:hover .hover{opacity:1}@keyframes loadinggradient{0%{background-position:0% 50%}80%{background-position:100% 50%}100%{background-position:0% 50%}}.ratings{display:flex;gap:var(--klevu-spacing-small, 4px);margin:var(--klevu-spacing-small, 4px) 0}";

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 _KlevuProduct_instances, _KlevuProduct_formatSKU, _KlevuProduct_click, _KlevuProduct_addToCart, _KlevuProduct_renderImage, _KlevuProduct_renderRatings, _KlevuProduct_renderSwatch;
const KlevuProduct = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuProductClick = createEvent(this, "klevuProductClick", 7);
    this.klevuAddToCart = createEvent(this, "klevuAddToCart", 7);
    _KlevuProduct_instances.add(this);
    this.variant = "default";
    this.product = undefined;
    this.showAddToCart = undefined;
    this.showRatings = undefined;
    this.showRatingsCount = undefined;
    this.tAddToCart = undefined;
    this.hideSwatches = undefined;
    this.hidePrice = undefined;
    this.hideDescription = undefined;
    this.hideName = undefined;
    this.hideImage = undefined;
    this.hideBrand = undefined;
    this.fixedWidth = undefined;
    this.hideHoverImage = undefined;
    this.keyBrand = "brand";
    this.keyName = "name";
    this.keyDescription = "shortDesc";
    this.vatCaption = undefined;
    this.showProductCode = undefined;
    this.outOfStockCaption = undefined;
    this.fallbackProductImageUrl = undefined;
    this.isWrapper = undefined;
    this.showVariantsCount = false;
    this.hoverImage = undefined;
    this.settings = undefined;
  }
  async connectedCallback() {
    var _a;
    await KlevuInit.ready();
    const init = closestElement("klevu-init", this.el);
    if (!init) {
      console.error("klevu-product needs to be wrapped inside klevu-init");
      return;
    }
    this.settings = init === null || init === void 0 ? void 0 : init.settings;
    init === null || init === void 0 ? void 0 : init.addEventListener("klevuInitSettingsUpdated", (e) => {
      this.settings = e.detail;
    });
    const kmcSettings = getKMCSettings();
    if (kmcSettings) {
      if (this.tAddToCart === undefined) {
        this.tAddToCart = (_a = kmcSettings.klevu_uc_userOptions.addToCartButton) !== null && _a !== void 0 ? _a : getTranslation("product.tAddToCart");
      }
      if (this.showAddToCart === undefined) {
        this.showAddToCart = kmcSettings.klevu_addToCartEnabled;
      }
      if (this.hideHoverImage === undefined) {
        this.hideHoverImage = !Boolean(kmcSettings.klevu_uc_userOptions.showRolloverImage);
      }
      if (this.hideSwatches === undefined) {
        this.hideSwatches = !Boolean(kmcSettings.klevu_uc_userOptions.showProductSwatches);
      }
      if (this.vatCaption === undefined) {
        this.vatCaption = kmcSettings.klevu_uc_userOptions.vatCaption;
      }
      if (this.showProductCode === undefined) {
        this.showProductCode = kmcSettings.klevu_showProductCode;
      }
      if (this.fallbackProductImageUrl === undefined) {
        this.fallbackProductImageUrl = kmcSettings.klevu_uc_userOptions.noImageUrl;
      }
      if (this.outOfStockCaption === undefined) {
        this.outOfStockCaption = kmcSettings.klevu_uc_userOptions.outOfStockCaption;
      }
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f;
    if (this.isWrapper) {
      return (h(Host, null, h("div", { onClick: __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_click).bind(this) }, h("slot", null))));
    }
    const typeClasses = {
      small: this.variant === "small",
      line: this.variant === "line",
      default: this.variant === "default",
    };
    const containerClasses = Object.assign({ container: true, fixedWidth: Boolean(this.fixedWidth) }, typeClasses);
    if (!this.product) {
      return (h(Host, { class: Object.assign(Object.assign({}, typeClasses), { loading: true }) }, h("div", { class: containerClasses }, h("div", { class: "loading image" }), h("div", { class: "loading content" }, h("div", null), h("div", null), h("div", null)))));
    }
    const isOnSale = this.product.price != this.product.salePrice;
    return (h(Host, { class: { line: this.variant === "line" } }, h("div", { part: "product-base", class: containerClasses }, h("slot", { name: "top" }), h("a", { href: (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.generateProductUrl) === null || _b === void 0 ? void 0 : _b.call(_a, this.product), onClick: __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_click).bind(this) }, this.hideImage ? null : (h("slot", { name: "image" }, ((_c = this.product) === null || _c === void 0 ? void 0 : _c.image) || this.hoverImage ? (__classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_renderImage).call(this)) : (h("div", { class: "image no-image", part: "product-image" }, h("klevu-icon", { name: "image_not_supported" }))))), h("slot", { name: "info" }, __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_renderSwatch).call(this), h("div", { class: "info" }, this.hideBrand || !this.product[this.keyBrand] ? null : (h("klevu-typography", { class: "brandname", variant: "body-s-bold", part: "product-brandname" }, this.product[this.keyBrand])), this.hideName || !this.product[this.keyName] ? null : (h("klevu-typography", { class: "productname", variant: "body-s", part: "product-name", title: `${this.product[this.keyName]} ${this.showProductCode ? __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_formatSKU).call(this, this.product.sku) : ""}` }, `${this.product[this.keyName]} ${this.showProductCode ? __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_formatSKU).call(this, this.product.sku) : ""}`)), this.hideDescription || !this.product[this.keyDescription] ? null : (h("klevu-typography", { class: "description", variant: "body-xs", part: "product-description" }, this.product[this.keyDescription].substring(0, 100))), this.hidePrice ||
      !this.product.salePrice ||
      !this.product.currency ||
      this.product.inStock === "no" ? null : (h(Fragment, null, h("klevu-typography", { variant: "body-l-bold", class: {
        isOnSale,
        price: true,
      }, part: "product-price" }, (_f = (_e = (_d = this.settings) === null || _d === void 0 ? void 0 : _d.renderPrice) === null || _e === void 0 ? void 0 : _e.call(_d, this.product.salePrice, this.product.currency)) !== null && _f !== void 0 ? _f : this.product.salePrice), this.vatCaption && (h("klevu-typography", { class: "vatcaption", variant: "body-s", part: "product-vatcaption" }, "(", this.vatCaption, ")")))), this.product.inStock === "no" && this.outOfStockCaption && (h("klevu-typography", { class: "outOfStockCaption", variant: "body-s", part: "product-ooscaption" }, this.outOfStockCaption)))), this.showVariantsCount && this.product.totalVariants !== undefined && this.variant !== "line" && (h("slot", { name: "variantsCount" }, h("klevu-typography", { variant: "body-s", part: "product-variants-count" }, `+${this.product.totalVariants} variant(s)`))), this.variant !== "line" && h("slot", { name: "ratings" }, __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_renderRatings).call(this)), h("slot", { name: "addtocart" }, h("div", { class: "addToCart" }, this.showAddToCart ? (h("klevu-button", { part: "product-addtocart", onClick: __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_addToCart).bind(this), fullWidth: true, size: this.variant === "small" ? "small" : "normal", exportparts: partsExports("klevu-button") }, this.tAddToCart)) : null))), h("slot", { name: "bottom" }), this.showVariantsCount && this.product.totalVariants !== undefined && this.variant === "line" && (h("slot", { name: "variantsCount" }, h("klevu-typography", { variant: "body-s", part: "product-variants-count" }, `+${this.product.totalVariants} variant(s)`))), this.variant === "line" && h("slot", { name: "ratings" }, __classPrivateFieldGet$1(this, _KlevuProduct_instances, "m", _KlevuProduct_renderRatings).call(this)))));
  }
  get el() { return getElement(this); }
};
_KlevuProduct_instances = new WeakSet(), _KlevuProduct_formatSKU = function _KlevuProduct_formatSKU(sku) {
  if (!sku) {
    return "";
  }
  let formattedSKU = sku.toUpperCase();
  if (sku.includes(";;;;")) {
    formattedSKU = formattedSKU.split(";;;;")[0];
  }
  if (formattedSKU.startsWith("(") && formattedSKU.endsWith(")")) {
    return formattedSKU;
  }
  else {
    return "(" + formattedSKU + ")";
  }
}, _KlevuProduct_click = function _KlevuProduct_click(ev) {
  var _a;
  if (!this.product) {
    return;
  }
  const sentEvent = this.klevuProductClick.emit({
    product: this.product,
    originalEvent: ev,
  });
  if (sentEvent.defaultPrevented) {
    ev.preventDefault();
    return false;
  }
  if ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.onItemClick) {
    try {
      const result = this.settings.onItemClick(this.product, ev);
      if (result === false) {
        ev.preventDefault();
        return false;
      }
    }
    catch (e) {
      console.error(e);
      ev.preventDefault();
      return false;
    }
  }
}, _KlevuProduct_addToCart = function _KlevuProduct_addToCart(event) {
  event.stopPropagation();
  event.preventDefault();
  if (!this.product) {
    return;
  }
  this.klevuAddToCart.emit({ product: this.product });
}, _KlevuProduct_renderImage = function _KlevuProduct_renderImage() {
  var _a, _b;
  let imageUrl = ((_a = this.product) === null || _a === void 0 ? void 0 : _a.image) || this.hoverImage;
  if (!imageUrl) {
    return null;
  }
  let fallback = "";
  if (this.fallbackProductImageUrl) {
    fallback = `, url(${this.fallbackProductImageUrl})`;
  }
  return (h("div", { class: "image", part: "product-image", style: {
      backgroundImage: `url(${imageUrl}), url(${imageUrl.replace("needtochange/", "")}), url(${imageUrl.replace("needtochange/", "pub/")})${fallback}`,
    } }, this.hideHoverImage !== true && ((_b = this.product) === null || _b === void 0 ? void 0 : _b.imageHover) ? (h("div", { class: "hover", style: {
      backgroundImage: `url(${this.product.imageHover})${fallback}`,
    } })) : null));
}, _KlevuProduct_renderRatings = function _KlevuProduct_renderRatings() {
  var _a, _b;
  if (!this.showRatings || !((_a = this.product) === null || _a === void 0 ? void 0 : _a.rating)) {
    return null;
  }
  return (this.showRatings && (h("div", { class: "ratings" }, ((_b = this.product) === null || _b === void 0 ? void 0 : _b.rating) ? (h(Fragment, null, h("klevu-rating", { exportparts: partsExports("klevu-rating"), rating: this.product.rating }), this.showRatingsCount && this.product.ratingCount && h("span", null, "(", this.product.ratingCount, ")"))) : (h("span", null, "\u00A0")))));
}, _KlevuProduct_renderSwatch = function _KlevuProduct_renderSwatch() {
  var _a, _b;
  if (this.hideSwatches) {
    return null;
  }
  const swatches = [];
  if (!this.hideSwatches) {
    const swatchesParts = (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.swatchesInfo) === null || _b === void 0 ? void 0 : _b.split(" ;;;; ");
    for (const sPart of swatchesParts !== null && swatchesParts !== void 0 ? swatchesParts : []) {
      const splitPos = sPart.indexOf(":");
      const key = sPart.substring(0, splitPos);
      const value = sPart.substring(splitPos + 1);
      for (const keyStart of ["variantId", "variantColor", "variantImage", "variantSwatchImage"]) {
        if (key.startsWith(keyStart)) {
          const index = parseInt(key.substring(keyStart.length)) - 1;
          if (!swatches[index]) {
            swatches[index] = {};
          }
          // @ts-expect-error
          swatches[index][keyStart.substring("variant".length)] = value;
        }
      }
    }
  }
  if (swatches.length === 0) {
    return null;
  }
  return (h("div", { class: "swatches", onMouseLeave: () => (this.hoverImage = undefined) }, swatches.map((swatch) => (h("div", { part: "product-swatch", style: {
      backgroundColor: swatch.Color
        ? CSS.supports("color", swatch.Color)
          ? swatch.Color
          : "lightgray"
        : "lightgray",
      backgroundImage: swatch.SwatchImage || swatch.Image ? `url(${swatch.SwatchImage || swatch.Image})` : undefined,
    }, onMouseEnter: () => (this.hoverImage = swatch.Image) })))));
};
KlevuProduct.style = klevuProductCss;

const klevuRatingCss = ":host{display:block}svg{color:transparent;margin:0px var(--klevu-spacing-xsmall, 2px)}.filled{fill:#ffd707}";

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 _KlevuRating_instances, _KlevuRating_getFillPercentage;
const KlevuRating = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    _KlevuRating_instances.add(this);
    this.rating = 0;
    this.ratingRange = 5;
  }
  render() {
    return (h(Host, null, h("div", { part: "rating-base" }, ...[...Array(this.ratingRange)].map((_, i) => (h("svg", { width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, h("title", null, `${this.rating}`), h("symbol", { viewBox: "0 0 126.729 126.73", id: "star" }, h("path", { d: "M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z" })), h("defs", null, h("mask", { id: "mstar" }, h("use", { fill: "white", xlinkHref: "#star" }))), h("rect", { x: `${__classPrivateFieldGet(this, _KlevuRating_instances, "m", _KlevuRating_getFillPercentage).call(this, i + 1)}%`, y: "0", class: Math.ceil(this.rating) >= i + 1 ? "filled" : "", width: "100%", height: "100%", mask: "url(#mstar)", part: "rating-star" }), h("use", { xlinkHref: "#star", "stroke-width": "6", stroke: "#333", fill: "none" })))))));
  }
};
_KlevuRating_instances = new WeakSet(), _KlevuRating_getFillPercentage = function _KlevuRating_getFillPercentage(ratingValue) {
  if (ratingValue < this.rating)
    return 0;
  const roundOff = Math.floor(this.rating);
  if (roundOff <= ratingValue - 1) {
    const decimal = this.rating - roundOff;
    return decimal * 100 - 100;
  }
};
KlevuRating.style = klevuRatingCss;

export { KlevuProduct as klevu_product, KlevuRating as klevu_rating };

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