var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
    r = Reflect.decorate(decorators, target, key, desc);
  else
    for (var i = decorators.length - 1; i >= 0; i--)
      if (d = decorators[i])
        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h, Host } from '@stencil/core';
import PageVisibilityChange from '../../shared/decorators/page-visibility';
import { tns } from 'tiny-slider/src/tiny-slider';
export class BsCarousel {
  constructor() {
    this.controls = false;
    this.indicators = false;
    this.pauseOnHover = true;
    this.autoplay = true;
    this.autoplayInterval = 5000;
    this.itemsToShow = 1;
    this.swipe = true;
    this.animation = 'slide';
    this.speed = 300;
    this.userPaused = false // if user paused, any event based play commands will be skipped
    ;
  }
  componentDidLoad() {
    this._sliderEl = this.el.querySelector('.carousel-container');
    this._prevButton = this.el.querySelector('.carousel-prev-control');
    this._nextButton = this.el.querySelector('.carousel-next-control');
    this.setupCarousel();
    this.handleAddRemoveSlides();
  }
  disconnectedCallback() {
    if (this._slideObserver) {
      this._slideObserver.disconnect();
    }
    try {
      // TODO: tiny-slider could use a PR to not fail if the slide elements are gone on destroy
      this._slider && this._slider.destroy();
    }
    catch (err) { }
  }
  async pause() {
    this.userPaused = true; // since pause has been triggered externally, assume the user did it
    this._slider && this._slider.pause();
  }
  async play() {
    this.userPaused = false;
    this._slider && this._slider.play();
  }
  handlePageVisibilityChange(visible) {
    if (visible) {
      // page is visible, if user didn't manually pause the slider, start it up again
      !this.userPaused && this._slider && this._slider.play();
    }
    else {
      // page isn't visible, pause the slider
      this._slider && this._slider.pause();
    }
  }
  setupCarousel() {
    this._slider = tns({
      container: this._sliderEl,
      items: this.itemsToShow,
      controls: this.controls,
      nav: this.indicators,
      slideBy: 'page',
      autoplay: this.autoplay,
      autoplayTimeout: this.autoplayInterval,
      autoplayHoverPause: this.pauseOnHover,
      autoplayButtonOutput: false,
      prevButton: this._prevButton,
      nextButton: this._nextButton,
      mouseDrag: this.swipe,
      preventActionWhenRunning: true,
      mode: this.animation == 'fade' ? 'gallery' : 'carousel',
      speed: this.speed,
    });
  }
  handleAddRemoveSlides() {
    this._slideObserver = new MutationObserver(() => {
      this._slider.refresh();
    });
    this._slideObserver.observe(this._sliderEl, { attributes: false, childList: true, subtree: false });
  }
  render() {
    return (h(Host, null, h("div", { class: "carousel-container" }, h("slot", null)), h("bs-icon", { size: 20, icon: "fab fa-chevron-left", class: `carousel-prev-control ${!this.controls ? 'd-none' : ''}` }), h("bs-icon", { size: 20, icon: "fab fa-chevron-right", class: `carousel-next-control ${!this.controls ? 'd-none' : ''}` })));
  }
  static get is() { return "bs-carousel"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-carousel.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-carousel.css"]
    };
  }
  static get properties() {
    return {
      "controls": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "controls",
        "reflect": false,
        "defaultValue": "false"
      },
      "indicators": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "indicators",
        "reflect": false,
        "defaultValue": "false"
      },
      "pauseOnHover": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "pause-on-hover",
        "reflect": false,
        "defaultValue": "true"
      },
      "autoplay": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "autoplay",
        "reflect": false,
        "defaultValue": "true"
      },
      "autoplayInterval": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "autoplay-interval",
        "reflect": false,
        "defaultValue": "5000"
      },
      "itemsToShow": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "items-to-show",
        "reflect": false,
        "defaultValue": "1"
      },
      "swipe": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "swipe",
        "reflect": false,
        "defaultValue": "true"
      },
      "animation": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'fade' | 'slide'",
          "resolved": "\"fade\" | \"slide\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "animation",
        "reflect": false,
        "defaultValue": "'slide'"
      },
      "speed": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "speed",
        "reflect": false,
        "defaultValue": "300"
      }
    };
  }
  static get states() {
    return {
      "userPaused": {}
    };
  }
  static get methods() {
    return {
      "pause": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "play": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
}
__decorate([
  PageVisibilityChange()
], BsCarousel.prototype, "handlePageVisibilityChange", null);
//# sourceMappingURL=bs-carousel.js.map
