'use strict';

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

const index = require('./index-b7293b2f.js');

const fabCss = ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-27px}:host(.fab-horizontal-start){left:calc(10px + var(--lu-safe-area-left, 0px))}:host(.fab-horizontal-end){right:calc(10px + var(--lu-safe-area-right, 0px))}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:-27px}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:-27px}:host(.fab-vertical-center){margin-top:-27px;top:50%}";

const Fab = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * If `true`, the fab will display on the edge of the header if
     * `vertical` is `"top"`, and on the edge of the footer if
     * it is `"bottom"`. Should be used with a `fixed` slot.
     */
    this.edge = false;
    /**
     * If `true`, both the `lu-fab-button` and all `lu-fab-list` inside `lu-fab` will become active.
     * That means `lu-fab-button` will become a `close` icon and `lu-fab-list` will become visible.
     */
    this.activated = false;
  }
  activatedChanged() {
    const activated = this.activated;
    const fab = this.el.querySelector('lu-fab-button');
    if (fab) {
      fab.activated = activated;
    }
    Array.from(this.el.querySelectorAll('lu-fab-list')).forEach((list) => {
      list.activated = activated;
    });
  }
  componentDidLoad() {
    if (this.activated) {
      this.activatedChanged();
    }
  }
  onClick(event) {
    if (event && event.target && event.target.parentElement && event.target.parentElement.toggleButton ||
      event && event.target && event.target.toggleButton) {
      const hasList = !!this.el.querySelector('lu-fab-list');
      if (hasList) {
        this.activated = !this.activated;
      }
    }
  }
  /**
   * Close an active FAB list container
   */
  async close() {
    return this.activated = false;
  }
  hostData() {
    return {
      class: {
        [`fab-horizontal-${this.horizontal}`]: this.horizontal !== undefined,
        [`fab-vertical-${this.vertical}`]: this.vertical !== undefined,
        'fab-edge': this.edge
      }
    };
  }
  __stencil_render() {
    return index.h("slot", null);
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "activated": ["activatedChanged"]
  }; }
  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
Fab.style = fabCss;

exports.lu_fab = Fab;

//# sourceMappingURL=lu-fab.cjs.entry.js.map