import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const klevuColorSwatchCss = ":host{display:block;--klevu-color-swatch-default-background:#000;--klevu-color-swatch-size:25px;--klevu-color-swatch-selected-color:#2b4af7;--klevu-color-swatch-border-radius:50%}.circle{height:var(--klevu-color-swatch-size);width:var(--klevu-color-swatch-size);background-color:var(--klevu-color-swatch-default-background);border-radius:var(--klevu-color-swatch-border-radius);background-size:cover;display:inline-block;position:relative}.selected.circle:after{content:\"\";position:absolute;top:-4px;left:-4px;width:calc(100% + 4px);height:calc(100% + 4px);border:2px solid var(--klevu-color-swatch-selected-color);border-radius:var(--klevu-color-swatch-border-radius)}";

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 _KlevuColorSwatch_instances, _KlevuColorSwatch_swatchClick;
const KlevuColorSwatch = /*@__PURE__*/ proxyCustomElement(class KlevuColorSwatch extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuSwatchClick = createEvent(this, "klevuSwatchClick", 7);
    _KlevuColorSwatch_instances.add(this);
    this.name = undefined;
    this.color = undefined;
    this.selected = undefined;
    this.imageUrl = undefined;
    this.borderColor = undefined;
  }
  render() {
    if (!this.name) {
      return null;
    }
    return (h(Host, null, h("span", { class: `circle ${this.selected ? "selected" : ""}`, title: this.name, style: {
        border: this.borderColor ? `1px solid ${this.borderColor}` : "none",
        "background-color": this.imageUrl ? "" : this.color,
        "background-image": this.imageUrl ? `url(${this.imageUrl})` : "",
      }, onClick: () => __classPrivateFieldGet(this, _KlevuColorSwatch_instances, "m", _KlevuColorSwatch_swatchClick).call(this, this.name) })));
  }
  static get style() { return klevuColorSwatchCss; }
}, [1, "klevu-color-swatch", {
    "name": [1],
    "color": [1],
    "selected": [4],
    "imageUrl": [1, "image-url"],
    "borderColor": [1, "border-color"]
  }]);
_KlevuColorSwatch_instances = new WeakSet(), _KlevuColorSwatch_swatchClick = function _KlevuColorSwatch_swatchClick(name) {
  this.klevuSwatchClick.emit({ name });
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-color-swatch"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-color-swatch":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuColorSwatch);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuColorSwatch as K, defineCustomElement as d };

//# sourceMappingURL=klevu-color-swatch2.js.map