import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as getGlobalSettings, r as renderPrice } from './utils.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)}: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:1px solid var(--klevu-color-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)}.container.default.fixedWidth{max-width:auto;width:var(--width)}.container.small{display:flex;flex-direction:column;max-width:var(--small-width)}.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}.line .info{display:flex;flex-direction:column;margin-left:var(--klevu-spacing-04)}.line .info p{display:block;margin:0;text-align:right}.line .info .price{margin-top:auto}.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;overflow:hidden;height:calc(var(--klevu-body-s-height) * var(--klevu-body-s-line-height) * 2);text-align:left}.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:auto;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)}@keyframes loadinggradient{0%{background-position:0% 50%}80%{background-position:100% 50%}100%{background-position:0% 50%}}";

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_click, _KlevuProduct_renderSwatch;
const KlevuProduct = /*@__PURE__*/ proxyCustomElement(class KlevuProduct extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuProductClick = createEvent(this, "klevuProductClick", 7);
    _KlevuProduct_instances.add(this);
    this.variant = "default";
    this.product = undefined;
    this.hideSwatches = undefined;
    this.hidePrice = undefined;
    this.hideDescription = undefined;
    this.hideName = undefined;
    this.hideImage = undefined;
    this.hideBrand = undefined;
    this.fixedWidth = undefined;
    this.keyBrand = "brand";
    this.keyName = "name";
    this.keyDescription = "shortDesc";
    this.hoverImage = undefined;
  }
  render() {
    var _a;
    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-container", 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" }, h("div", { class: "image", part: "product-image", style: {
        backgroundImage: `url(${this.hoverImage || this.product.image})`,
      } }))), 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" }, this.product[this.keyBrand])), this.hideName || !this.product[this.keyName] ? null : (h("klevu-typography", { class: "productname", variant: "body-s" }, this.product[this.keyName])), this.hideDescription || !this.product[this.keyDescription] ? null : (h("klevu-typography", { class: "description", variant: "body-xs" }, this.product[this.keyDescription].substring(0, 100))), this.hidePrice || !this.product.salePrice || !this.product.currency ? null : (h("klevu-typography", { variant: "body-l-bold", class: {
        isOnSale,
        price: true,
      } }, renderPrice(this.product.salePrice, this.product.currency)))))), h("slot", { name: "bottom" }))));
  }
  static get style() { return klevuProductCss; }
}, [1, "klevu-product", {
    "variant": [1],
    "product": [16],
    "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"],
    "keyBrand": [1, "key-brand"],
    "keyName": [1, "key-name"],
    "keyDescription": [1, "key-description"],
    "hoverImage": [32]
  }]);
_KlevuProduct_instances = new WeakSet(), _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_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-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-product":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuProduct);
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuProduct as K, defineCustomElement as d };

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