import "./chunks/pb_form_validation.js";
import { P as PbEnhancedElement, d as datePickerHelper, a as dialogHelper, b as PbPopover, c as PbTooltip, e as PbTypeahead, f as PbTable, g as PbTextarea } from "./chunks/lib.js";
import "./chunks/lazysizes.js";
import "./playbook-rails-react-bindings.js";
import "react";
import "webpacker-react";
import "./chunks/_typeahead.js";
import "react-dom";
const MAIN_SELECTOR = "[data-collapsible-main]";
const CONTENT_SELECTOR$1 = "[data-collapsible-content]";
const DOWN_ARROW_SELECTOR$2 = "#collapsible_open_icon";
const UP_ARROW_SELECTOR$2 = "#collapsible_close_icon";
class PbCollapsible extends PbEnhancedElement {
  static get selector() {
    return MAIN_SELECTOR;
  }
  connect() {
    this.element.addEventListener("click", () => {
      this.toggleElement(this.target);
    });
    if (this.target.classList.contains("is-visible")) {
      this.displayUpArrow();
    } else {
      this.displayDownArrow();
    }
    document.addEventListener(`${this.target.id}`, () => {
      this.toggleElement(this.target);
    });
  }
  get target() {
    return this.element.parentNode.querySelector(CONTENT_SELECTOR$1);
  }
  showElement(elem) {
    const getHeight = () => {
      elem.style.display = "block";
      const height2 = elem.scrollHeight + "px";
      elem.style.display = "";
      return height2;
    };
    const height = getHeight();
    elem.classList.add("is-visible");
    elem.style.height = height;
    elem.style.overflow = "hidden";
    window.setTimeout(() => {
      elem.style.height = "";
      elem.style.overflow = "visible";
    }, 300);
  }
  hideElement(elem) {
    elem.style.height = elem.scrollHeight + "px";
    window.setTimeout(() => {
      elem.style.height = "0";
      elem.style.paddingTop = "0";
      elem.style.paddingBottom = "0";
      elem.style.overflow = "hidden";
    }, 1);
    window.setTimeout(() => {
      elem.classList.remove("is-visible");
      elem.style.overflow = "";
    }, 300);
  }
  toggleElement(elem) {
    if (elem.classList.contains("is-visible")) {
      this.hideElement(elem);
      this.displayDownArrow();
      return;
    }
    this.showElement(elem);
    this.displayUpArrow();
  }
  toggleArrows(showDownArrow) {
    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR$2);
    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR$2);
    if (downArrow) {
      downArrow.style.display = showDownArrow ? "inline-block" : "none";
    }
    if (upArrow) {
      upArrow.style.display = showDownArrow ? "none" : "inline-block";
    }
  }
  displayDownArrow() {
    this.toggleArrows(true);
  }
  displayUpArrow() {
    this.toggleArrows(false);
  }
}
class PbFixedConfirmationToast extends PbEnhancedElement {
  static get selector() {
    return ".remove_toast";
  }
  connect() {
    this.self = this.element;
    this.autoCloseToast(this.self);
    this.self.addEventListener("click", () => {
      this.removeToast(this.self);
    });
  }
  removeToast(elem) {
    elem.parentNode.removeChild(elem);
  }
  autoCloseToast(element) {
    const classListValues = element.classList.value;
    const hasAutoCloseClass = classListValues.includes("auto_close");
    if (hasAutoCloseClass) {
      const classList = classListValues.split(" ");
      const autoCloseValue = classList[classList.length - 1].split("_")[2];
      const autoCloseIntValue = parseInt(autoCloseValue);
      setTimeout(() => {
        this.removeToast(element);
      }, autoCloseIntValue);
    }
  }
}
const OPTION_SELECTOR$1 = "[data-dropdown-option-label]";
class PbDropdownKeyboard {
  constructor(dropdown) {
    this.dropdown = dropdown;
    this.dropdownElement = dropdown.element;
    this.options = Array.from(
      this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1)
    );
    this.focusedOptionIndex = -1;
    this.init();
  }
  init() {
    this.dropdownElement.addEventListener(
      "keydown",
      this.handleKeyDown.bind(this)
    );
  }
  handleKeyDown(event) {
    switch (event.key) {
      case "ArrowDown":
        event.preventDefault();
        if (!this.dropdown.target.classList.contains("open")) {
          this.dropdown.showElement(this.dropdown.target);
          this.dropdown.updateArrowDisplay(true);
        }
        this.moveFocus(1);
        break;
      case "ArrowUp":
        event.preventDefault();
        this.moveFocus(-1);
        break;
      case "Enter":
        event.preventDefault();
        if (this.focusedOptionIndex !== -1) {
          this.selectOption();
        } else {
          if (!this.dropdown.target.classList.contains("open")) {
            this.dropdown.showElement(this.dropdown.target);
            this.dropdown.updateArrowDisplay(true);
          }
        }
        break;
      case "Escape":
        this.dropdown.hideElement(this.dropdown.target);
        break;
      case "Tab":
        this.dropdown.hideElement(this.dropdown.target);
        this.dropdown.updateArrowDisplay(false);
        this.resetFocus();
        break;
    }
  }
  moveFocus(direction) {
    if (this.focusedOptionIndex !== -1) {
      this.options[this.focusedOptionIndex].classList.remove(
        "pb_dropdown_option_focused"
      );
    }
    this.focusedOptionIndex = (this.focusedOptionIndex + direction + this.options.length) % this.options.length;
    this.options[this.focusedOptionIndex].classList.add(
      "pb_dropdown_option_focused"
    );
  }
  selectOption() {
    const option = this.options[this.focusedOptionIndex];
    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
    this.dropdown.hideElement(this.dropdown.target);
  }
}
const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
const CONTAINER_SELECTOR = "[data-dropdown-container]";
const DOWN_ARROW_SELECTOR$1 = "#dropdown_open_icon";
const UP_ARROW_SELECTOR$1 = "#dropdown_close_icon";
const OPTION_SELECTOR = "[data-dropdown-option-label]";
const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
class PbDropdown extends PbEnhancedElement {
  static get selector() {
    return DROPDOWN_SELECTOR;
  }
  get target() {
    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
  }
  connect() {
    this.keyboardHandler = new PbDropdownKeyboard(this);
    this.bindEventListeners();
    this.updateArrowDisplay(false);
    this.handleFormValidation();
  }
  bindEventListeners() {
    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
    customTrigger.addEventListener(
      "click",
      () => this.toggleElement(this.target)
    );
    this.target.addEventListener("click", this.handleOptionClick.bind(this));
    document.addEventListener(
      "click",
      this.handleDocumentClick.bind(this),
      true
    );
  }
  handleOptionClick(event) {
    const option = event.target.closest(OPTION_SELECTOR);
    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
    if (option) {
      const value = option.dataset.dropdownOptionLabel;
      hiddenInput.value = JSON.parse(value).id;
      inputFormValidation.value = JSON.parse(value).id;
      this.clearFormValidation(inputFormValidation);
      this.onOptionSelected(value, option);
    }
  }
  handleDocumentClick(event) {
    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
      this.hideElement(this.target);
      this.updateArrowDisplay(false);
    }
  }
  isClickOutside(event) {
    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
    if (customTrigger) {
      return !customTrigger.contains(event.target);
    } else {
      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
      const containerElement = this.element.parentNode.querySelector(CONTAINER_SELECTOR);
      const isOutsideTrigger = triggerElement ? !triggerElement.contains(event.target) : true;
      const isOutsideContainer = containerElement ? !containerElement.contains(event.target) : true;
      return isOutsideTrigger && isOutsideContainer;
    }
  }
  onOptionSelected(value, selectedOption) {
    const triggerElement = this.element.querySelector(
      "#dropdown_trigger_display"
    );
    const customDisplayElement = this.element.querySelector(
      "#dropdown_trigger_custom_display"
    );
    if (triggerElement) {
      const selectedLabel = JSON.parse(value).label;
      triggerElement.textContent = selectedLabel;
      if (customDisplayElement) {
        customDisplayElement.style.display = "block";
        customDisplayElement.style.paddingRight = "8px";
      }
    }
    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
    if (customTrigger) {
      if (this.target.classList.contains("open")) {
        this.hideElement(this.target);
        this.updateArrowDisplay(false);
      }
    }
    const options = this.element.querySelectorAll(OPTION_SELECTOR);
    options.forEach((option) => {
      option.classList.remove("pb_dropdown_option_selected");
    });
    selectedOption.classList.add("pb_dropdown_option_selected");
  }
  showElement(elem) {
    elem.classList.remove("close");
    elem.classList.add("open");
    elem.style.height = elem.scrollHeight + "px";
  }
  hideElement(elem) {
    elem.style.height = elem.scrollHeight + "px";
    window.setTimeout(() => {
      elem.classList.add("close");
      elem.classList.remove("open");
      this.resetFocus();
    }, 0);
  }
  resetFocus() {
    if (this.keyboardHandler) {
      this.keyboardHandler.focusedOptionIndex = -1;
      const options = this.element.querySelectorAll(OPTION_SELECTOR);
      options.forEach(
        (option) => option.classList.remove("pb_dropdown_option_focused")
      );
    }
  }
  toggleElement(elem) {
    if (elem.classList.contains("open")) {
      this.hideElement(elem);
      this.updateArrowDisplay(false);
      return;
    }
    this.showElement(elem);
    this.updateArrowDisplay(true);
  }
  updateArrowDisplay(isOpen) {
    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR$1);
    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR$1);
    if (downArrow && upArrow) {
      downArrow.style.display = isOpen ? "none" : "inline-block";
      upArrow.style.display = isOpen ? "inline-block" : "none";
    }
  }
  handleFormValidation() {
    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
    inputFormValidation.addEventListener("invalid", function(event) {
      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
        event.preventDefault();
        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
      }
    }, true);
  }
  clearFormValidation(input) {
    if (input.checkValidity()) {
      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
      dropdownWrapperElement.classList.remove("error");
      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
      if (errorLabelElement) {
        errorLabelElement.remove();
      }
    }
  }
}
const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
const CONTENT_SELECTOR = '[data-advanced-table-content="id"]';
const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
class PbAdvancedTable extends PbEnhancedElement {
  static get selector() {
    return ADVANCED_TABLE_SELECTOR;
  }
  get target() {
    return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id));
  }
  connect() {
    this.element.addEventListener("click", () => {
      this.toggleElement(this.target);
    });
  }
  showElement(elem) {
    const getHeight = () => {
      elem.style.display = "block";
      const height2 = elem.scrollHeight + "px";
      elem.style.display = "";
      return height2;
    };
    const height = getHeight();
    elem.classList.add("is-visible");
    elem.style.height = height;
    elem.style.overflow = "hidden";
    window.setTimeout(() => {
      elem.style.height = "";
      elem.style.overflow = "visible";
    }, 250);
  }
  hideElement(elem) {
    elem.style.height = elem.scrollHeight + "px";
    window.setTimeout(() => {
      elem.style.height = "0";
      elem.style.paddingTop = "0";
      elem.style.paddingBottom = "0";
      elem.style.overflow = "hidden";
    }, 1);
    window.setTimeout(() => {
      elem.classList.remove("is-visible");
      elem.style.overflow = "";
    }, 200);
  }
  toggleElement(elem) {
    if (elem.classList.contains("is-visible")) {
      this.hideElement(elem);
      this.displayDownArrow();
      return;
    }
    this.showElement(elem);
    this.displayUpArrow();
  }
  displayDownArrow() {
    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "inline-block";
    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
  }
  displayUpArrow() {
    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "inline-block";
    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
  }
}
window.datePickerHelper = datePickerHelper;
window.dialogHelper = dialogHelper;
PbCollapsible.start();
PbPopover.start();
PbTooltip.start();
PbFixedConfirmationToast.start();
PbTypeahead.start();
PbTable.start();
PbTextarea.start();
PbDropdown.start();
PbAdvancedTable.start();