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_checkSecondarySlotChildCount, _KlevuList_getContent;
import { Host, h, Fragment } from "@stencil/core";
/**
 * Single list item for listing things.
 *
 * @slot primary - Primary text
 * @slot secondary - Secondary text
 */
export class KlevuList {
  constructor() {
    _KlevuList_instances.add(this);
    this.icon = undefined;
    this.image = undefined;
    this.url = undefined;
    this.condensed = false;
    this.noXPadding = false;
    this.secondarySlotChildCount = 0;
  }
  componentDidLoad() {
    __classPrivateFieldGet(this, _KlevuList_instances, "m", _KlevuList_checkSecondarySlotChildCount).call(this);
  }
  handleSlotChange() {
    __classPrivateFieldGet(this, _KlevuList_instances, "m", _KlevuList_checkSecondarySlotChildCount).call(this);
  }
  render() {
    return (h(Host, null, 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"
      }
    };
  }
  static get states() {
    return {
      "secondarySlotChildCount": {}
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "slotchange",
        "method": "handleSlotChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
_KlevuList_instances = new WeakSet(), _KlevuList_checkSecondarySlotChildCount = function _KlevuList_checkSecondarySlotChildCount() {
  var _a;
  const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot[name='secondary']");
  this.secondarySlotChildCount = slot.assignedElements().length;
}, _KlevuList_getContent = function _KlevuList_getContent() {
  return (h(Fragment, null, this.icon && h("klevu-icon", { class: "icon", name: this.icon }), this.image && h("img", { class: "image", src: this.image }), h("div", { class: "text" }, h("klevu-typography", { variant: "body-s" }, h("slot", { name: "primary" })), this.secondarySlotChildCount > 0 && (h("klevu-typography", { variant: "body-s", style: {
      "--klevu-typography-color": "var(--klevu-color-neutral-7)",
    } }, h("slot", { name: "secondary" })))), h("slot", { name: "button" })));
};
//# sourceMappingURL=klevu-list.js.map
