import { r as registerInstance, c as createEvent, h, H as Host } from './index-89bb9d20.js';

const klevuDropdownCss = ":host{display:block}select{--padding:calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2));font-size:var(--klevu-body-s-size);font-weight:var(--klevu-body-s-weight);appearance:none;width:100%;min-width:80px;border:none;border-radius:var(--klevu-border-radius-m);height:calc(var(--klevu-size-m) * 2);padding:0 var(--padding);padding-right:30px}.selectcontainer{position:relative;display:flex}.selectcontainer.inline{display:inline-block}.selectcontainer.inline select{width:auto}.selectcontainer.default{border:1px solid var(--klevu-color-neutral-4);border-radius:var(--klevu-border-radius-m)}select:focus{outline:0}.selectcontainer:has(select:active,select:focus){border:1px solid var(--klevu-color-primary)}.triangle{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:block;font-size:20px;height:24px;width:24px;pointer-events:none}.selectcontainer.disabled{cursor:not-allowed}.selectcontainer.disabled select{cursor:not-allowed}.selectcontainer.disabled .triangle{background-color:var(--klevu-color-border)}";

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 _KlevuDropdown_instances, _KlevuDropdown_onChange;
const KlevuDropdown = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.klevuDropdownChanged = createEvent(this, "klevuDropdownChanged", 7);
    _KlevuDropdown_instances.add(this);
    this.name = undefined;
    this.options = undefined;
    this.disabled = undefined;
    this.selected = undefined;
    this.variant = "default";
  }
  render() {
    var _a;
    return (h(Host, null, h("div", { class: {
        selectcontainer: true,
        disabled: Boolean(this.disabled),
        inline: this.variant === "inline",
        default: this.variant === "default",
      } }, h("select", { name: this.name, disabled: this.disabled, onChange: __classPrivateFieldGet(this, _KlevuDropdown_instances, "m", _KlevuDropdown_onChange).bind(this) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((o) => (h("option", { selected: this.selected === o.value, value: o.value }, o.text)))), h("span", { part: "material-icon", class: "triangle" }, "expand_more"))));
  }
};
_KlevuDropdown_instances = new WeakSet(), _KlevuDropdown_onChange = function _KlevuDropdown_onChange(event) {
  this.klevuDropdownChanged.emit(event.target.value);
};
KlevuDropdown.style = klevuDropdownCss;

export { KlevuDropdown as klevu_dropdown };

//# sourceMappingURL=klevu-dropdown.entry.js.map