import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { p as partsExports } from './partsExports.js';
import { d as defineCustomElement$9 } from './klevu-accordion2.js';
import { d as defineCustomElement$8 } from './klevu-button2.js';
import { d as defineCustomElement$7 } from './klevu-checkbox2.js';
import { d as defineCustomElement$6 } from './klevu-color-swatch2.js';
import { d as defineCustomElement$5 } from './klevu-facet2.js';
import { d as defineCustomElement$4 } from './klevu-icon2.js';
import { d as defineCustomElement$3 } from './klevu-rating2.js';
import { d as defineCustomElement$2 } from './klevu-slider2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';
import { F as FilterManager } from './filterManager.js';

const klevuFacetListCss = ":host{display:block;width:var(--klevu-facet-list-width, 200px)}.applybar{display:flex;justify-content:space-between;margin:var(--klevu-spacing-04) 0;gap:var(--klevu-spacing-05)}.applybar .apply{width:100%}klevu-facet:first-of-type::part(heading){margin-top:0}";

var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
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 _KlevuFacetList_instances, _KlevuFacetList_applyManager, _KlevuFacetList_applySettings, _KlevuFacetList_clear;
const KlevuFacetList = /*@__PURE__*/ proxyCustomElement(class KlevuFacetList extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuApplyFilters = createEvent(this, "klevuApplyFilters", 7);
    _KlevuFacetList_instances.add(this);
    _KlevuFacetList_applyManager.set(this, new FilterManager());
    this.manager = undefined;
    this.mode = undefined;
    this.customOrder = undefined;
    this.colorSwatches = [];
    this.colorSwatchOverrides = undefined;
    this.accordion = undefined;
    this.useApplyButton = undefined;
    this.applyButtonText = "Apply";
    this.clearButtonText = "Clear";
    this.defaultPriceLabel = "Price";
    this.shouldUpdateUrlForFacets = undefined;
    this.priceSliderCurrency = "EUR";
    this.filters = [];
  }
  connectedCallback() {
    if (!this.manager) {
      return;
    }
    __classPrivateFieldSet(this, _KlevuFacetList_applyManager, new FilterManager(), "f");
    __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").setState(this.manager.getCurrentState());
    if (this.useApplyButton) {
      this.updateApplyFilterState();
    }
    else {
      this.filters = this.manager.filters;
    }
  }
  componentWillLoad() {
    if (!this.shouldUpdateUrlForFacets) {
      return;
    }
    this.manager.readFromURLParams(new URL(document.URL).searchParams);
    this.klevuApplyFilters.emit({
      manager: this.manager,
    });
  }
  filterManagerAppliedFilters() {
    __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").setState(this.manager.getCurrentState());
    if (!this.useApplyButton) {
      this.filters = this.manager.filters;
    }
    if (this.shouldUpdateUrlForFacets) {
      const searchParams = this.manager.toURLParams(new URL(document.URL).searchParams);
      window.history.replaceState({}, "", `${window.location.pathname}?${searchParams}`);
    }
  }
  filterSelectionUpdate(e) {
    if (!this.useApplyButton) {
      this.filters = this.manager.filters;
    }
  }
  /**
   * When using `useApplyButton` then this method can be used to update current state filterManager
   * into to local state of that is displayed in the UI
   */
  async updateApplyFilterState() {
    if (!this.useApplyButton) {
      return;
    }
    this.filters = __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").filters;
  }
  render() {
    return (h(Host, null, this.filters.map((f, index) => {
      var _a;
      if (FilterManager.isKlevuFilterResultOptions(f) || FilterManager.isKlevuFilterResultRating(f)) {
        let mode;
        if (this.mode && typeof this.mode === "string") {
          mode = this.mode;
        }
        else if (this.mode && typeof this.mode === "object") {
          mode = this.mode[f.key];
        }
        return (h("klevu-facet", { priceSliderCurrency: this.priceSliderCurrency, exportparts: partsExports("klevu-facet"), accordion: this.accordion, accordionStartOpen: index === 0, customOrder: (_a = this.customOrder) === null || _a === void 0 ? void 0 : _a[f.key], manager: this.useApplyButton ? __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f") : this.manager, option: f, useColorSwatch: this.colorSwatches && !!this.colorSwatches.includes(f.key), colorSwatchOverrides: this.colorSwatchOverrides && this.colorSwatchOverrides[f.key], mode: mode }));
      }
      else if (FilterManager.isKlevuFilterResultSlider(f)) {
        return (h("klevu-facet", { priceSliderCurrency: this.priceSliderCurrency, exportparts: partsExports("klevu-facet"), accordion: this.accordion, manager: this.useApplyButton ? __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f") : this.manager, slider: f, labelOverride: f.label === "klevu_price" ? this.defaultPriceLabel : undefined }));
      }
    }), this.useApplyButton ? (h("div", { class: "applybar" }, h("klevu-button", { exportparts: partsExports("klevu-button"), isSecondary: true, onClick: () => __classPrivateFieldGet(this, _KlevuFacetList_instances, "m", _KlevuFacetList_clear).call(this) }, this.clearButtonText), h("klevu-button", { exportparts: partsExports("klevu-button"), fullWidth: true, class: "apply", onClick: () => __classPrivateFieldGet(this, _KlevuFacetList_instances, "m", _KlevuFacetList_applySettings).call(this) }, this.applyButtonText))) : null));
  }
  get el() { return this; }
  static get style() { return klevuFacetListCss; }
}, [1, "klevu-facet-list", {
    "manager": [16],
    "mode": [1],
    "customOrder": [16],
    "colorSwatches": [16],
    "colorSwatchOverrides": [16],
    "accordion": [4],
    "useApplyButton": [4, "use-apply-button"],
    "applyButtonText": [1, "apply-button-text"],
    "clearButtonText": [1, "clear-button-text"],
    "defaultPriceLabel": [1, "default-price-label"],
    "shouldUpdateUrlForFacets": [4, "should-update-url-for-facets"],
    "priceSliderCurrency": [1, "price-slider-currency"],
    "filters": [32],
    "updateApplyFilterState": [64]
  }, [[4, "klevu-filters-applied", "filterManagerAppliedFilters"], [4, "klevu-filter-selection-updates", "filterSelectionUpdate"]]]);
_KlevuFacetList_applyManager = new WeakMap(), _KlevuFacetList_instances = new WeakSet(), _KlevuFacetList_applySettings = function _KlevuFacetList_applySettings() {
  this.manager.setState(__classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").getCurrentState());
  this.klevuApplyFilters.emit({
    manager: this.manager,
  });
}, _KlevuFacetList_clear = function _KlevuFacetList_clear() {
  __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").clearOptionSelections();
  this.filters = __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").filters;
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-facet-list", "klevu-accordion", "klevu-button", "klevu-checkbox", "klevu-color-swatch", "klevu-facet", "klevu-icon", "klevu-rating", "klevu-slider", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-facet-list":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuFacetList);
      }
      break;
    case "klevu-accordion":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "klevu-checkbox":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "klevu-color-swatch":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "klevu-facet":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-rating":
      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 { KlevuFacetList as K, defineCustomElement as d };

//# sourceMappingURL=klevu-facet-list2.js.map