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 _KlevuColorSwatch_instances, _KlevuColorSwatch_swatchClick;
import { Host, h } from "@stencil/core";
/**
 * Color Swatch component
 *
 */
export class KlevuColorSwatch {
  constructor() {
    _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 is() { return "klevu-color-swatch"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-color-swatch.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-color-swatch.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "This field will be sent in the click callback"
        },
        "attribute": "name",
        "reflect": false
      },
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Color to apply"
        },
        "attribute": "color",
        "reflect": false
      },
      "selected": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If selected"
        },
        "attribute": "selected",
        "reflect": false
      },
      "imageUrl": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "ImageUrl to load in swatch"
        },
        "attribute": "image-url",
        "reflect": false
      },
      "borderColor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Specify border color for the swatch"
        },
        "attribute": "border-color",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuSwatchClick",
        "name": "klevuSwatchClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When swatch has been clicked"
        },
        "complexType": {
          "original": "KlevuOnSwatchClick",
          "resolved": "{ name: string; }",
          "references": {
            "KlevuOnSwatchClick": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-color-swatch/klevu-color-swatch.tsx",
              "id": "src/components/klevu-color-swatch/klevu-color-swatch.tsx::KlevuOnSwatchClick"
            }
          }
        }
      }];
  }
}
_KlevuColorSwatch_instances = new WeakSet(), _KlevuColorSwatch_swatchClick = function _KlevuColorSwatch_swatchClick(name) {
  this.klevuSwatchClick.emit({ name });
};
//# sourceMappingURL=klevu-color-swatch.js.map
