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 _KlevuUtilScrollbars_instances, _KlevuUtilScrollbars_initCustomScrollbars;
import { Host, h } from "@stencil/core";
import { OverlayScrollbars } from "overlayscrollbars";
/**
 * Utility that replaces the default browser scrollbar with a custom one.
 *
 * @cssprop --klevu-util-scrollbar-handle-bg --klevu-color-neutral-5 The background color of the scrollbar handle.
 * @cssprop --klevu-util-scrollbar-handle-bg-hover --klevu-color-neutral-6 The background color of the scrollbar handle when hovered.
 * @cssprop --klevu-util-scrollbar-handle-bg-active --klevu-color-neutral-7 The background color of the scrollbar handle when active.
 */
export class KlevuUtilScrollbars {
  constructor() {
    _KlevuUtilScrollbars_instances.add(this);
    this.overflowX = undefined;
    this.overflowY = undefined;
    this.useNative = undefined;
  }
  componentDidLoad() {
    var _a;
    __classPrivateFieldGet(this, _KlevuUtilScrollbars_instances, "m", _KlevuUtilScrollbars_initCustomScrollbars).call(this);
    if (this.useNative === undefined && ((_a = window.klevu_ui_settings) === null || _a === void 0 ? void 0 : _a.useNativeScrollbars) === true) {
      this.useNative = true;
    }
  }
  scrollbarOptionsChanged() {
    var _a;
    (_a = this.instance) === null || _a === void 0 ? void 0 : _a.destroy();
    __classPrivateFieldGet(this, _KlevuUtilScrollbars_instances, "m", _KlevuUtilScrollbars_initCustomScrollbars).call(this);
  }
  async getContainer() {
    return this.container;
  }
  async getInstance() {
    return {
      customInstance: this.instance,
      nativeContainer: this.nativeContainer,
    };
  }
  render() {
    if (this.useNative) {
      return this.renderNative();
    }
    return (h(Host, null, h("div", { style: {
        height: "100%",
      }, ref: (el) => (this.container = el) }, h("slot", null))));
  }
  renderNative() {
    let overflowX = this.overflowX;
    if (overflowX === "visible-hidden") {
      overflowX = "hidden";
    }
    if (overflowX === "visible-scroll") {
      overflowX = "scroll";
    }
    let overflowY = this.overflowY;
    if (overflowY === "visible-hidden") {
      overflowY = "hidden";
    }
    if (overflowY === "visible-scroll") {
      overflowY = "scroll";
    }
    return (h(Host, null, h("div", { class: {
        native: true,
      }, style: {
        overflowX: this.overflowX,
        overflowY: this.overflowY,
      }, ref: (el) => (this.nativeContainer = el) }, h("slot", null))));
  }
  static get is() { return "klevu-util-scrollbars"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-util-scrollbars.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-util-scrollbars.css"]
    };
  }
  static get properties() {
    return {
      "overflowX": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "OverflowBehavior",
          "resolved": "\"hidden\" | \"scroll\" | \"visible\" | \"visible-hidden\" | \"visible-scroll\" | undefined",
          "references": {
            "OverflowBehavior": {
              "location": "import",
              "path": "overlayscrollbars",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The overflow behavior of the horizontal scrollbar."
        },
        "attribute": "overflow-x",
        "reflect": false
      },
      "overflowY": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "OverflowBehavior",
          "resolved": "\"hidden\" | \"scroll\" | \"visible\" | \"visible-hidden\" | \"visible-scroll\" | undefined",
          "references": {
            "OverflowBehavior": {
              "location": "import",
              "path": "overlayscrollbars",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The overflow behavior of the vertical scrollbar."
        },
        "attribute": "overflow-y",
        "reflect": false
      },
      "useNative": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Disables the custom scrollbar and use native scrollbars instead."
        },
        "attribute": "use-native",
        "reflect": false
      }
    };
  }
  static get methods() {
    return {
      "getContainer": {
        "complexType": {
          "signature": "() => Promise<HTMLDivElement | undefined>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            },
            "HTMLDivElement": {
              "location": "global",
              "id": "global::HTMLDivElement"
            }
          },
          "return": "Promise<HTMLDivElement | undefined>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "getInstance": {
        "complexType": {
          "signature": "() => Promise<{ customInstance: OverlayScrollbars | undefined; nativeContainer: HTMLDivElement | undefined; }>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            },
            "OverlayScrollbars": {
              "location": "import",
              "path": "overlayscrollbars",
              "id": ""
            },
            "HTMLDivElement": {
              "location": "global",
              "id": "global::HTMLDivElement"
            }
          },
          "return": "Promise<{ customInstance: OverlayScrollbars | undefined; nativeContainer: HTMLDivElement | undefined; }>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "overflowX",
        "methodName": "scrollbarOptionsChanged"
      }, {
        "propName": "overflowY",
        "methodName": "scrollbarOptionsChanged"
      }];
  }
}
_KlevuUtilScrollbars_instances = new WeakSet(), _KlevuUtilScrollbars_initCustomScrollbars = function _KlevuUtilScrollbars_initCustomScrollbars() {
  if (!this.container || this.useNative) {
    return;
  }
  const options = {
    overflow: {},
    scrollbars: {
      theme: "os-theme-klevu",
    },
  };
  if (this.overflowX) {
    options.overflow.x = this.overflowX;
  }
  if (this.overflowY) {
    options.overflow.y = this.overflowY;
  }
  this.instance = OverlayScrollbars(this.container, options);
};
//# sourceMappingURL=klevu-util-scrollbars.js.map
