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 _KlevuSlider_instances, _KlevuSlider_initNoUISlider;
import { h, Host } from "@stencil/core";
import noUiSlider from "nouislider";
/**
 * Horizontal slider component. By default used for price range in this package. But can
 * be used for other purposes as well.
 */
export class KlevuSlider {
  constructor() {
    _KlevuSlider_instances.add(this);
    this.min = undefined;
    this.max = undefined;
    this.start = undefined;
    this.end = undefined;
    this.formatTooltip = undefined;
    this.showTooltips = undefined;
  }
  render() {
    return (h(Host, null, h("div", { class: {
        outerContainer: true,
        hasTooltips: Boolean(this.showTooltips),
      } }, h("div", { class: "container", ref: __classPrivateFieldGet(this, _KlevuSlider_instances, "m", _KlevuSlider_initNoUISlider).bind(this) }))));
  }
  static get is() { return "klevu-slider"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-slider.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-slider.css"]
    };
  }
  static get properties() {
    return {
      "min": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Min value of the range"
        },
        "attribute": "min",
        "reflect": false
      },
      "max": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Max value of the range"
        },
        "attribute": "max",
        "reflect": false
      },
      "start": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Current start value of the range"
        },
        "attribute": "start",
        "reflect": false
      },
      "end": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Current end value of the range"
        },
        "attribute": "end",
        "reflect": false
      },
      "formatTooltip": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "(value: number) => string",
          "resolved": "((value: number) => string) | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Format tooltip value with function"
        }
      },
      "showTooltips": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Show tooltips on top of slider"
        },
        "attribute": "show-tooltips",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuSliderChange",
        "name": "klevuSliderChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When values change"
        },
        "complexType": {
          "original": "[number, number]",
          "resolved": "[number, number]",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
}
_KlevuSlider_instances = new WeakSet(), _KlevuSlider_initNoUISlider = function _KlevuSlider_initNoUISlider(el) {
  if (!el) {
    return;
  }
  if (this.sliderInstance) {
    this.sliderInstance.set([this.start || this.min, this.end || this.max]);
    return;
  }
  this.sliderInstance = noUiSlider.create(el, {
    connect: true,
    tooltips: this.showTooltips
      ? this.formatTooltip
        ? {
          to: this.formatTooltip,
        }
        : true
      : false,
    step: 1,
    range: {
      max: this.max,
      min: this.min,
    },
    start: [this.start || this.min, this.end || this.max],
  });
  // @ts-expect-error
  el.noUiSlider.on("end", (ev) => {
    this.klevuSliderChange.emit([parseFloat(ev[0]), parseFloat(ev[1])]);
  });
};
//# sourceMappingURL=klevu-slider.js.map
