import { proxyCustomElement, HTMLElement, forceUpdate, h, Host, Fragment } from '@stencil/core/internal/client';
import { g as globalExportedParts, a as getGlobalSettings } from './utils.js';
import { d as defineCustomElement$5 } from './klevu-accordion2.js';
import { d as defineCustomElement$4 } from './klevu-button2.js';
import { d as defineCustomElement$3 } from './klevu-checkbox2.js';
import { d as defineCustomElement$2 } from './klevu-slider2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';

const klevuFacetCss = ":host{display:block}.container{display:flex;justify-content:space-between;width:100%;min-width:0}.option{margin-bottom:var(--klevu-spacing-02)}.name{display:block;flex-grow:1;min-width:0;font-size:var(--klevu-body-s-size)}.name span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.count{flex-basis:30px;display:inline-block;margin-left:auto;text-align:right;color:var(--klevu-color-neutral-6);font-size:var(--klevu-body-xs-size)}klevu-checkbox{width:100%;min-width:0}klevu-typography{margin:var(--klevu-spacing-05) 0 var(--klevu-spacing-03)}klevu-typography.accordion{margin:inherit}input[type=\"radio\"]{margin:0;margin-right:var(--klevu-spacing-04)}";

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 _KlevuFacet_instances, _KlevuFacet_renderSlider, _KlevuFacet_renderOptions;
const KlevuFacet = /*@__PURE__*/ proxyCustomElement(class KlevuFacet extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    _KlevuFacet_instances.add(this);
    this.option = undefined;
    this.slider = undefined;
    this.manager = undefined;
    this.mode = "checkbox";
    this.customOrder = undefined;
    this.accordion = undefined;
    this.accordionStartOpen = undefined;
    this.labelOverride = undefined;
    this.showAll = false;
  }
  filterSelectionUpdate(event) {
    forceUpdate(this.el);
  }
  render() {
    return (h(Host, null, this.option ? (h(Fragment, null, this.accordion ? (h("klevu-accordion", { exportparts: globalExportedParts, startOpen: this.accordionStartOpen }, __classPrivateFieldGet(this, _KlevuFacet_instances, "m", _KlevuFacet_renderOptions).call(this))) : (__classPrivateFieldGet(this, _KlevuFacet_instances, "m", _KlevuFacet_renderOptions).call(this)))) : this.slider ? (h(Fragment, null, this.accordion ? (h("klevu-accordion", { exportparts: globalExportedParts, startOpen: this.accordionStartOpen }, __classPrivateFieldGet(this, _KlevuFacet_instances, "m", _KlevuFacet_renderSlider).call(this))) : (__classPrivateFieldGet(this, _KlevuFacet_instances, "m", _KlevuFacet_renderSlider).call(this)))) : null));
  }
  get el() { return this; }
  static get style() { return klevuFacetCss; }
}, [1, "klevu-facet", {
    "option": [16],
    "slider": [16],
    "manager": [16],
    "mode": [1],
    "customOrder": [16],
    "accordion": [4],
    "accordionStartOpen": [4, "accordion-start-open"],
    "labelOverride": [1, "label-override"],
    "showAll": [32]
  }, [[4, "klevu-filter-selection-updates", "filterSelectionUpdate"]]]);
_KlevuFacet_instances = new WeakSet(), _KlevuFacet_renderSlider = function _KlevuFacet_renderSlider() {
  if (!this.slider) {
    return null;
  }
  return (h(Fragment, null, h("klevu-typography", { part: "facet-heading", class: { accordion: Boolean(this.accordion) }, variant: "body-s-bold", slot: "header" }, this.labelOverride || this.slider.label), h("klevu-slider", { slot: "content", showTooltips: true, min: parseFloat(this.slider.min), max: parseFloat(this.slider.max), start: this.slider.start ? parseFloat(this.slider.start) : undefined, end: this.slider.end ? parseFloat(this.slider.end) : undefined, formatTooltip: (value) => { var _a, _b, _c; return ((_c = (_b = (_a = getGlobalSettings()) === null || _a === void 0 ? void 0 : _a.renderPrice) === null || _b === void 0 ? void 0 : _b.call(_a, value.toFixed(2), "EUR")) !== null && _c !== void 0 ? _c : value.toFixed(2)).toString(); }, onKlevuSliderChange: (event) => {
      this.manager.updateSlide(this.slider.key, event.detail[0], event.detail[1]);
    } })));
}, _KlevuFacet_renderOptions = function _KlevuFacet_renderOptions() {
  if (!this.option) {
    return null;
  }
  let opts = [...this.option.options];
  if (this.customOrder) {
    opts.sort((a, b) => {
      const aio = this.customOrder.indexOf(a.value);
      const bio = this.customOrder.indexOf(b.value);
      if (aio === -1 && bio !== -1) {
        return 1;
      }
      if (aio !== -1 && bio === -1) {
        return -1;
      }
      return aio - bio;
    });
  }
  let showAllButton = false;
  if (!this.showAll && opts.length > 5) {
    opts = opts.slice(0, 5);
    showAllButton = true;
  }
  return (h(Fragment, null, h("klevu-typography", { part: "facet-heading", class: { accordion: Boolean(this.accordion) }, variant: "body-s-bold", slot: "header" }, this.labelOverride || this.option.label), h("div", { class: "options", slot: "content" }, opts.map((o) => (h("div", { class: "option" }, this.mode === "checkbox" ? (h("klevu-checkbox", { exportparts: globalExportedParts, checked: o.selected, name: this.option.key, onKlevuCheckboxChange: (event) => {
      this.manager.toggleOption(this.option.key, o.value);
    } }, h("div", { class: "container" }, h("span", { class: "name" }, h("span", null, o.name)), h("span", { class: "count" }, "(", o.count, ")")))) : (h("div", { class: "container" }, h("input", { type: "radio", id: this.option.key, name: this.option.key, value: o.value, checked: o.selected, onClick: () => {
      this.manager.clearOptionSelections(this.option.key);
      this.manager.toggleOption(this.option.key, o.value);
    } }), h("label", { htmlFor: this.option.key, class: "name" }, h("span", null, o.name)), h("span", { class: "count" }, "(", o.count, ")")))))), showAllButton ? (h("klevu-button", { style: { "--klevu-button-text-align": "left" }, isTertiary: true, fullWidth: true, onClick: () => (this.showAll = true) }, "More")) : null)));
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-facet", "klevu-accordion", "klevu-button", "klevu-checkbox", "klevu-slider", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-facet":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuFacet);
      }
      break;
    case "klevu-accordion":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-checkbox":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-slider":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuFacet as K, defineCustomElement as d };

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