import { h, Host } from "@stencil/core";
/**
 * Component to place products on grid. Very simple container for products.
 * @csspart product-grid-base The container for the grid
 */
export class KlevuProductGrid {
  constructor() {
    this.itemsPerRow = undefined;
  }
  render() {
    const style = {};
    if (this.itemsPerRow) {
      style.gridTemplateColumns = `repeat(${this.itemsPerRow}, 1fr)`;
    }
    return (h(Host, null, h("div", { class: "gridcontainer", style: style, part: "product-grid-base" }, h("slot", null))));
  }
  static get is() { return "klevu-product-grid"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-product-grid.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-product-grid.css"]
    };
  }
  static get properties() {
    return {
      "itemsPerRow": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Force to place products in grid with given number of columns."
        },
        "attribute": "items-per-row",
        "reflect": false
      }
    };
  }
}
//# sourceMappingURL=klevu-product-grid.js.map
