import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './klevu-icon2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';

const klevuCheckboxCss = ":host{--color:var(--klevu-checkbox-color, var(--klevu-color-primary));--size:var(--klevu-checkbox-size, 20px);display:flex}.check{display:block;width:var(--size);height:var(--size);position:relative}.content{margin-left:var(--klevu-spacing-03);user-select:none;display:block;width:100%;height:var(--size);min-width:0}input[type=\"checkbox\"]{appearance:none;background-color:#fff;margin:0;font:inherit;color:currentColor;width:var(--size);height:var(--size);border:1px solid var(--klevu-color-neutral-5);border-radius:var(--klevu-border-radius-s);display:inline-block;box-sizing:border-box;transition:background-color var(--klevu-animation-duration-fast) var(--klevu-animation-timing-function)}input[type=\"checkbox\"]:focus{outline:0}input[type=\"checkbox\"]:focus::after{content:\"\";position:absolute;top:-3px;left:-3px;width:calc(100% + 3px);height:calc(100% + 3px);border:2px solid var(--color);border-radius:calc(var(--klevu-border-radius-s) + 2px)}input[type=\"checkbox\"]:hover{border-color:var(--color)}input[type=\"checkbox\"]:checked{background-color:var(--color);border-color:var(--color)}klevu-icon{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;transition:120ms transform ease-in-out;color:var(--klevu-color-neutral-1);pointer-events:none}input[type=\"checkbox\"]:disabled{cursor:not-allowed;opacity:var(--klevu-opacity-disabled)}klevu-typography{line-height:1}";

var __classPrivateFieldGet = (undefined && undefined.__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;
const KlevuCheckbox = /*@__PURE__*/ proxyCustomElement(class KlevuCheckbox extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuCheckboxChange = createEvent(this, "klevuCheckboxChange", 7);
    _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", part: "checkbox-base" }, h("input", { part: "checkbox-box", 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("klevu-icon", { name: "check" })), this.renderContent && (h("label", { class: "content", htmlFor: this.name }, h("klevu-typography", { variant: "body-s", fullWidth: true, part: "checkbox-content" }, h("slot", null))))));
  }
  get host() { return this; }
  static get style() { return klevuCheckboxCss; }
}, [1, "klevu-checkbox", {
    "checked": [4],
    "disabled": [4],
    "name": [1],
    "renderContent": [32]
  }]);
_KlevuCheckbox_instances = new WeakSet(), _KlevuCheckbox_onChange = function _KlevuCheckbox_onChange() {
  this.checked = !this.checked;
  this.klevuCheckboxChange.emit(this.checked);
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-checkbox", "klevu-icon", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-checkbox":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuCheckbox);
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuCheckbox as K, defineCustomElement as d };

//# sourceMappingURL=klevu-checkbox2.js.map