var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
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 _KlevuAccordion_id;
import { h, Host } from "@stencil/core";
/**
 * Component that wrap two slots to create accordion element.
 *
 * @slot header - Element that has title that can be clicked
 * @slot content - Element containing content of the accordion
 * @slot icon - Icon element
 * @cssprop --klevu-accordion-icon-color --klevu-h3-color Color of the icon
 * @cssprop --klevu-accordion-background transparent Header background
 * @cssprop --klevu-accordion-content-height 600px Maxium height for content
 */
export class KlevuAccordion {
  constructor() {
    _KlevuAccordion_id.set(this, void 0);
    this.open = false;
    this.startOpen = undefined;
    __classPrivateFieldSet(this, _KlevuAccordion_id, `chk${Math.floor(Math.random() * 1000000)}`, "f");
  }
  connectedCallback() {
    if (this.startOpen) {
      this.open = true;
    }
  }
  render() {
    return (h(Host, null, h("input", { type: "checkbox", id: __classPrivateFieldGet(this, _KlevuAccordion_id, "f"), checked: this.open, onChange: () => (this.open = !this.open) }), h("label", { htmlFor: __classPrivateFieldGet(this, _KlevuAccordion_id, "f") }, h("klevu-typography", { variant: "body-s-bold" }, h("slot", { name: "header" })), h("klevu-icon", { name: "expand_more" })), h("div", { class: "content" }, h("slot", { name: "content" }))));
  }
  static get is() { return "klevu-accordion"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-accordion.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-accordion.css"]
    };
  }
  static get properties() {
    return {
      "open": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "is accordion open"
        },
        "attribute": "open",
        "reflect": true,
        "defaultValue": "false"
      },
      "startOpen": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Should it initially be open"
        },
        "attribute": "start-open",
        "reflect": false
      }
    };
  }
}
_KlevuAccordion_id = new WeakMap();
//# sourceMappingURL=klevu-accordion.js.map
