'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-6b50a234.js');

const klevuButtonCss = ":host{--background-hover:var(--klevu-button-background-hover, var(--klevu-color-primary-darker));--background-color:var(--klevu-button-background-color, var(--klevu-color-primary));--text-align:var(--klevu-button-text-align);--padding:var(--klevu-button-padding, calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)));--font-size:var(--klevu-button-font-size, var(--klevu-body-s-size));--text-color:var(--klevu-button-text-color, var(--klevu-color-neutral-1))}button{display:inline-block;position:relative;background:var(--background-color);border-radius:var(--klevu-border-radius-m);box-sizing:border-box;transition:transform 100ms;border:0;height:calc(var(--klevu-size-m) * 2);font-size:var(--font-size);font-weight:var(--klevu-body-s-weight);padding:0 calc(var(--padding) * 2);text-align:var(--text-align, center)}button klevu-typography{--klevu-typography-font-size:var(--font-size)}button.sizeSmall{--padding:var(--klevu-button-padding, calc(var(--klevu-size-s) - (var(--klevu-body-s-size) / 2)));height:calc(var(--klevu-size-s) * 2)}button.sizeLarge{--padding:var(--klevu-button-padding, calc(var(--klevu-size-l) - (var(--klevu-body-s-size) / 2)));height:calc(var(--klevu-size-l) * 2)}button.sizeTiny{--padding:var(--klevu-button-padding, var(--klevu-spacing-02));height:calc(var(--klevu-size-xs) * 2);--font-size:var(--klevu-body-xs-size);border-radius:var(--klevu-border-radius-s)}button klevu-typography,button klevu-icon{--klevu-typography-color:var(--text-color);color:var(--text-color);user-select:none}button:hover{background-color:var(--background-hover)}button:focus{outline:0}button:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid var(--klevu-color-primary);border-radius:calc(var(--klevu-border-radius-m) + 2px)}button:disabled{opacity:var(--klevu-opacity-disabled)}button:active:not(:disabled){transform:translateY(1px)}button.secondary{background:var(--klevu-color-neutral-2)}button.secondary klevu-typography,button.secondary klevu-icon{--klevu-typography-color:var(--klevu-color-neutral-7);color:var(--klevu-color-neutral-8)}button.secondary:hover{background:var(--klevu-color-neutral-3)}button.fullwidth{display:block;width:100%}button.icon{padding:0;height:calc(var(--klevu-size-m) * 2);width:calc(var(--klevu-size-m) * 2);border-radius:10000000px;font-size:1.5em;font-weight:normal;line-height:1.8}button.icon.sizeSmall,button.icon.sizeTiny{height:calc(var(--klevu-size-s) * 2);width:calc(var(--klevu-size-s) * 2);line-height:1.5}button.icon.sizeLarge{height:calc(var(--klevu-size-l) * 2);width:calc(var(--klevu-size-l) * 2);line-height:2}button.icon klevu-icon{position:relative;top:-1px}button.icon:focus:after{border-radius:100%}button.tertiary{background:transparent;border:0;color:var(--klevu-color-primary);padding:0;height:calc(var(--klevu-size-s) * 2)}button.tertiary klevu-typography,button.tertiary klevu-icon{--klevu-typography-color:var(--klevu-color-primary);color:var(--klevu-color-primary)}";

const KlevuButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.disabled = undefined;
    this.isSecondary = undefined;
    this.isTertiary = undefined;
    this.fullWidth = undefined;
    this.size = "normal";
    this.icon = undefined;
  }
  render() {
    return (index.h("button", { part: "button-base", disabled: this.disabled, class: {
        secondary: Boolean(this.isSecondary),
        tertiary: Boolean(this.isTertiary),
        fullwidth: Boolean(this.fullWidth),
        icon: Boolean(this.icon),
        sizeSmall: this.size === "small",
        sizeLarge: this.size === "large",
        sizeTiny: this.size === "tiny",
      } }, this.icon ? (index.h("klevu-icon", { name: this.icon })) : (index.h("klevu-typography", { variant: this.isTertiary || this.size === "tiny" ? "body-s" : "body-s-bold" }, index.h("slot", null)))));
  }
};
KlevuButton.style = klevuButtonCss;

const klevuRatingCss = ":host{display:block}svg{color:transparent;margin:0px var(--klevu-spacing-xsmall, 2px)}.filled{fill:#ffd707}";

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 _KlevuRating_instances, _KlevuRating_getFillPercentage;
const KlevuRating = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    _KlevuRating_instances.add(this);
    this.rating = 0;
    this.ratingRange = 5;
  }
  render() {
    return (index.h(index.Host, null, index.h("div", { part: "rating-base" }, ...[...Array(this.ratingRange)].map((_, i) => (index.h("svg", { width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, index.h("title", null, `${this.rating}`), index.h("symbol", { viewBox: "0 0 126.729 126.73", id: "star" }, index.h("path", { d: "M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z" })), index.h("defs", null, index.h("mask", { id: "mstar" }, index.h("use", { fill: "white", xlinkHref: "#star" }))), index.h("rect", { x: `${__classPrivateFieldGet(this, _KlevuRating_instances, "m", _KlevuRating_getFillPercentage).call(this, i + 1)}%`, y: "0", class: Math.ceil(this.rating) >= i + 1 ? "filled" : "", width: "100%", height: "100%", mask: "url(#mstar)", part: "rating-star" }), index.h("use", { xlinkHref: "#star", "stroke-width": "6", stroke: "#333", fill: "none" })))))));
  }
};
_KlevuRating_instances = new WeakSet(), _KlevuRating_getFillPercentage = function _KlevuRating_getFillPercentage(ratingValue) {
  if (ratingValue < this.rating)
    return 0;
  const roundOff = Math.floor(this.rating);
  if (roundOff <= ratingValue - 1) {
    const decimal = this.rating - roundOff;
    return decimal * 100 - 100;
  }
};
KlevuRating.style = klevuRatingCss;

exports.klevu_button = KlevuButton;
exports.klevu_rating = KlevuRating;

//# sourceMappingURL=klevu-button_2.cjs.entry.js.map