oi-metrology/Server/wwwroot/package/dist/cjs/ifx-dropdown.cjs.entry.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca0e0765.js');
const popper = require('./popper-9a6aec9e.js');

const dropdownCss = ":host{display:inline-block}";

const Dropdown = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
    this.ifxClose = index.createEvent(this, "ifxClose", 7);
    this.ifxDropdown = index.createEvent(this, "ifxDropdown", 7);
    this.placement = 'bottom-start';
    this.defaultOpen = false;
    this.internalIsOpen = false;
    this.noAppendToBody = false;
    this.disabled = undefined;
    this.noCloseOnOutsideClick = false;
    this.noCloseOnMenuClick = false;
    this.trigger = undefined;
    this.menu = undefined;
  }
  componentWillLoad() {
    //maybe not needed
    this.updateSlotContent();
    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
  }
  watchHandlerIsOpen(newValue, oldValue) {
    if (newValue !== oldValue && newValue !== this.internalIsOpen) {
      if (newValue) {
        this.openDropdown();
      }
      else {
        this.closeDropdown();
      }
    }
  }
  watchHandlerDisabled(newValue) {
    if (this.trigger) {
      this.trigger.disabled = newValue;
    }
  }
  watchHandlerSlot() {
    this.updateSlotContent();
  }
  // handling assignment of trigger and menu
  updateSlotContent() {
    // Get dropdown trigger. name has to start with ifx-dropdown-trigger
    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');
    if (this.trigger) {
      this.trigger.disabled = this.disabled;
      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));
      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));
    }
    // Remove menu if exists from body
    if (!this.noAppendToBody) {
      if (this.menu) {
        this.menu.remove();
      }
      // Get new menu and add to body
      this.menu = this.el.querySelector('ifx-dropdown-menu');
      // event handler for closing dropdown on menu click
      document.body.append(this.menu);
    }
    else {
      this.menu = this.el.querySelector('ifx-dropdown-menu');
    }
    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));
    this.menu.addEventListener('click', this.menuClickHandler.bind(this));
  }
  menuClickHandler() {
    if (!this.noCloseOnMenuClick) {
      this.closeDropdown();
    }
  }
  triggerClickHandler() {
    if (!this.internalIsOpen) {
      this.openDropdown();
    }
    else {
      this.closeDropdown();
    }
  }
  disconnectedCallback() {
    // Destroy popper instance if exists
    if (this.popperInstance) {
      this.popperInstance.destroy();
      this.popperInstance = null;
    }
    // Remove menu if exists
    if (this.menu) {
      this.menu.remove();
    }
  }
  async isOpen() {
    return this.internalIsOpen;
  }
  async closeDropdown() {
    if (this.internalIsOpen) {
      this.internalIsOpen = false;
      // sets isOpen prop on trigger and menu
      this.trigger.isOpen = false;
      this.menu.isOpen = false;
      // Emit close event
      this.ifxClose.emit();
    }
    // Destroy popper instance if exists
    if (this.popperInstance) {
      this.popperInstance.destroy();
      this.popperInstance = null;
    }
  }
  async openDropdown() {
    if (!this.internalIsOpen && !this.disabled) {
      this.internalIsOpen = true;
      // sets isOpen prop on trigger and menu
      this.trigger.isOpen = true;
      this.menu.isOpen = true;
      // Create popper instance for positioning
      this.popperInstance = popper.createPopper(this.el, this.menu, { placement: this.placement });
      this.ifxOpen.emit();
    }
  }
  //emitted by and listening to it from the dropdown menu right now
  // @Listen('ifxDropdownMenu')
  // handleDropdownMenuEvents(event: CustomEvent) {
  //   this.ifxDropdown.emit(event.detail)
  //   console.log('Selected item received in higher-level parent:');
  // }
  handleOutsideClick(event) {
    const target = event.target;
    // Close dropdown if outside click
    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {
      this.closeDropdown();
    }
  }
  render() {
    return (index.h("div", { "aria-label": 'dropdown menu', class: 'dropdown' }, index.h("slot", null)));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "defaultOpen": ["watchHandlerIsOpen"],
    "disabled": ["watchHandlerDisabled"]
  }; }
};
Dropdown.style = dropdownCss;

exports.ifx_dropdown = Dropdown;

//# sourceMappingURL=ifx-dropdown.cjs.entry.js.map