var __classPrivateFieldGet = (this && this.__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 _KlevuList_instances, _KlevuList_getContent;
import { Host, h, Fragment } from "@stencil/core";
/**
 * Single list item for listing things.
 *
 * @slot primary - Primary text
 * @slot secondary - Secondary text
 * @csspart list-base The container for the list
 * @csspart list-icon The icon element of the list
 * @csspart list-image The image element of the list
 * @csspart list-content The content of the list
 * @csspart list-button The button element in the list
 */
export class KlevuList {
  constructor() {
    _KlevuList_instances.add(this);
    this.icon = undefined;
    this.image = undefined;
    this.url = undefined;
    this.condensed = false;
    this.noXPadding = false;
    this.primaryText = "";
    this.secondaryText = "";
  }
  render() {
    return (h(Host, null, h("div", { part: "list-base" }, Boolean(this.url) ? (h("a", { class: {
        condensed: this.condensed,
        noXPadding: this.noXPadding,
      }, href: this.url }, __classPrivateFieldGet(this, _KlevuList_instances, "m", _KlevuList_getContent).call(this))) : (h("div", { class: {
        container: true,
        condensed: this.condensed,
        noXPadding: this.noXPadding,
      } }, __classPrivateFieldGet(this, _KlevuList_instances, "m", _KlevuList_getContent).call(this))))));
  }
  static get is() { return "klevu-list"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-list.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-list.css"]
    };
  }
  static get properties() {
    return {
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Icon to be displayed in the list item. Cannot be used with image."
        },
        "attribute": "icon",
        "reflect": false
      },
      "image": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Image to be displayed in the list item. Cannot be used with icon."
        },
        "attribute": "image",
        "reflect": false
      },
      "url": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Make the whole thing clickable and navigate to this url."
        },
        "attribute": "url",
        "reflect": false
      },
      "condensed": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Condensed version of the list item."
        },
        "attribute": "condensed",
        "reflect": false,
        "defaultValue": "false"
      },
      "noXPadding": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "no-x-padding",
        "reflect": false,
        "defaultValue": "false"
      },
      "primaryText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "To render primary text with default styling"
        },
        "attribute": "primary-text",
        "reflect": false,
        "defaultValue": "\"\""
      },
      "secondaryText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "To render secondary text with default styling"
        },
        "attribute": "secondary-text",
        "reflect": false,
        "defaultValue": "\"\""
      }
    };
  }
  static get elementRef() { return "el"; }
}
_KlevuList_instances = new WeakSet(), _KlevuList_getContent = function _KlevuList_getContent() {
  return (h(Fragment, null, this.icon && h("klevu-icon", { part: "list-icon", class: "icon", name: this.icon }), this.image && h("img", { part: "list-image", class: "image", src: this.image }), h("div", { class: "text", part: "list-content" }, h("slot", { name: "primary" }, this.primaryText && h("klevu-typography", { variant: "body-s" }, this.primaryText)), h("slot", { name: "secondary" }, this.secondaryText && (h("klevu-typography", { variant: "body-s", style: {
      "--klevu-typography-color": "var(--klevu-color-neutral-7)",
    } }, this.secondaryText)))), h("span", { part: "list-button" }, h("slot", { name: "button" }))));
};
//# sourceMappingURL=klevu-list.js.map
