import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { g as getGlobalSettings, r as renderPrice } from './utils.js';
import { g as getKMCSettings } from './getKMCSettings.js';
import { g as getTranslation } from './getTranslation.js';
import { K as KlevuInit } from './klevu-init2.js';
import { p as partsExports } from './partsExports.js';
import { d as defineCustomElement$4 } from './klevu-button2.js';
import { d as defineCustomElement$3 } from './klevu-icon2.js';
import { d as defineCustomElement$2 } from './klevu-rating2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.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)}: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(--klevu-border-radius-s);box-sizing:border-box;height:100%}.container.default{display:flex;flex-direction:column;max-width:var(--width);gap:var(--klevu-spacing-06)}.container.default a,.container.small a{display:flex;flex-direction:column;justify-content:space-between;max-width:var(--width);gap:var(--klevu-spacing-06)}.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{display:block;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-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)}.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 = (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_renderRatings, _KlevuProduct_renderSwatch;
const KlevuProduct = /*@__PURE__*/ proxyCustomElement(class KlevuProduct extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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;
  }
  async connectedCallback() {
    var _a;
    await KlevuInit.ready();
    const settings = getKMCSettings();
    if (settings) {
      if (this.tAddToCart === undefined) {
        this.tAddToCart = (_a = settings.klevu_uc_userOptions.addToCartButton) !== null && _a !== void 0 ? _a : getTranslation("product.tAddToCart");
      }
      if (this.showAddToCart === undefined) {
        this.showAddToCart = settings.klevu_addToCartEnabled;
      }
      if (this.hideHoverImage === undefined) {
        this.hideHoverImage = !Boolean(settings.klevu_uc_userOptions.showRolloverImage);
      }
      if (this.hideSwatches === undefined) {
        this.hideSwatches = !Boolean(settings.klevu_uc_userOptions.showProductSwatches);
      }
      if (this.vatCaption === undefined) {
        this.vatCaption = settings.klevu_uc_userOptions.vatCaption;
      }
      if (this.showProductCode === undefined) {
        this.showProductCode = settings.klevu_showProductCode;
      }
      if (this.fallbackProductImageUrl === undefined) {
        this.fallbackProductImageUrl = settings.klevu_uc_userOptions.noImageUrl;
      }
      if (this.outOfStockCaption === undefined) {
        this.outOfStockCaption = settings.klevu_uc_userOptions.outOfStockCaption;
      }
    }
  }
  render() {
    var _a, _b;
    if (this.isWrapper) {
      return (h(Host, null, h("div", { onClick: __classPrivateFieldGet(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 settings = getGlobalSettings();
    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: (_a = settings === null || settings === void 0 ? void 0 : settings.generateProductUrl) === null || _a === void 0 ? void 0 : _a.call(settings, this.product), onClick: __classPrivateFieldGet(this, _KlevuProduct_instances, "m", _KlevuProduct_click).bind(this) }, this.hideImage ? null : (h("slot", { name: "image" }, ((_b = this.product) === null || _b === void 0 ? void 0 : _b.image) || this.hoverImage ? (h("div", { class: "image", part: "product-image", style: {
        backgroundImage: `url(${this.hoverImage || this.product.image}), url(${this.fallbackProductImageUrl})`,
      } }, this.hideHoverImage !== true && this.product.imageHover ? (h("div", { class: "hover", style: {
        backgroundImage: `url(${this.product.imageHover}), url(${this.fallbackProductImageUrl})`,
      } })) : null)) : (h("div", { class: "image no-image", part: "product-image" }, h("klevu-icon", { name: "image_not_supported" }))))), h("slot", { name: "info" }, __classPrivateFieldGet(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" }, `${this.product[this.keyName]} ${this.showProductCode ? __classPrivateFieldGet(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" }, renderPrice(this.product.salePrice, this.product.currency)), 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(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(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(this, _KlevuProduct_instances, "m", _KlevuProduct_renderRatings).call(this)))));
  }
  static get style() { return klevuProductCss; }
}, [1, "klevu-product", {
    "variant": [1],
    "product": [16],
    "showAddToCart": [4, "show-add-to-cart"],
    "showRatings": [4, "show-ratings"],
    "showRatingsCount": [4, "show-ratings-count"],
    "tAddToCart": [1, "t-add-to-cart"],
    "hideSwatches": [4, "hide-swatches"],
    "hidePrice": [4, "hide-price"],
    "hideDescription": [4, "hide-description"],
    "hideName": [4, "hide-name"],
    "hideImage": [4, "hide-image"],
    "hideBrand": [4, "hide-brand"],
    "fixedWidth": [4, "fixed-width"],
    "hideHoverImage": [4, "hide-hover-image"],
    "keyBrand": [1, "key-brand"],
    "keyName": [1, "key-name"],
    "keyDescription": [1, "key-description"],
    "vatCaption": [1, "vat-caption"],
    "showProductCode": [4, "show-product-code"],
    "outOfStockCaption": [1, "out-of-stock-caption"],
    "fallbackProductImageUrl": [1, "fallback-product-image-url"],
    "isWrapper": [4, "is-wrapper"],
    "showVariantsCount": [4, "show-variants-count"],
    "hoverImage": [32]
  }]);
_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) {
  const settings = getGlobalSettings();
  if (!this.product) {
    return;
  }
  const sentEvent = this.klevuProductClick.emit({
    product: this.product,
    originalEvent: ev,
  });
  if (sentEvent.defaultPrevented) {
    ev.preventDefault();
    return false;
  }
  if (settings === null || settings === void 0 ? void 0 : settings.onItemClick) {
    try {
      const result = 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_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) })))));
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-product", "klevu-button", "klevu-icon", "klevu-rating", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-product":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuProduct);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-rating":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuProduct as K, defineCustomElement as d };

//# sourceMappingURL=klevu-product2.js.map