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 _KlevuCheckbox_instances, _KlevuCheckbox_onChange;
import { h, Host } from "@stencil/core";
// this component needs to implement new ElementInternals as soon as it's implemented
// https://github.com/ionic-team/stencil/issues/2284
/**
 * Checkbox component
 * @cssprop --klevu-checkbox-color --klevu-color-primary Color of the checkbox background and border
 * @cssprop --klevu-checkbox-size 20px Size of the checkbox
 */
export class KlevuCheckbox {
  constructor() {
    _KlevuCheckbox_instances.add(this);
    this.checked = undefined;
    this.disabled = undefined;
    this.name = undefined;
    this.renderContent = true;
  }
  componentWillRender() {
    const slotContent = this.host.innerHTML.trim();
    this.renderContent = slotContent.length > 0;
  }
  render() {
    return (h(Host, null, h("div", { class: "check" }, h("input", { type: "checkbox", checked: this.checked, disabled: this.disabled, name: this.name, id: this.name, onChange: __classPrivateFieldGet(this, _KlevuCheckbox_instances, "m", _KlevuCheckbox_onChange).bind(this) }), h("span", { part: "material-icon" }, "check")), this.renderContent && (h("label", { class: "content", htmlFor: this.name }, h("klevu-typography", { variant: "body-s" }, h("slot", null))))));
  }
  static get is() { return "klevu-checkbox"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-checkbox.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-checkbox.css"]
    };
  }
  static get properties() {
    return {
      "checked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Is checkbox checked"
        },
        "attribute": "checked",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Is disabled"
        },
        "attribute": "disabled",
        "reflect": false
      },
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Name of the checkbox"
        },
        "attribute": "name",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "renderContent": {}
    };
  }
  static get events() {
    return [{
        "method": "klevuCheckboxChange",
        "name": "klevuCheckboxChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "host"; }
}
_KlevuCheckbox_instances = new WeakSet(), _KlevuCheckbox_onChange = function _KlevuCheckbox_onChange() {
  this.checked = !this.checked;
  this.klevuCheckboxChange.emit(this.checked);
};
//# sourceMappingURL=klevu-checkbox.js.map
