import { r as registerInstance, h, g as getElement, H as Host } from './index-442cf464.js';

const fabListCss = ":host{margin:64px 0;display:none;position:absolute;top:0;flex-direction:column;align-items:center;min-width:54px;min-height:54px}:host(.fab-list-active){display:flex}::slotted(.fab-button-in-list){margin:8px 0;width:54px;height:54px;transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin:5px 0}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin:0 5px}::slotted(.fab-button-in-list.fab-button-show){transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;flex-direction:column-reverse}:host(.fab-list-side-start){margin:0 64px;right:0;flex-direction:row-reverse}:host(.fab-list-side-end){margin:0 64px;left:0;flex-direction:row}";

const FabList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * If `true`, the fab list will be show all fab buttons in the list.
     */
    this.activated = false;
    /**
     * The side the fab list will show on relative to the main fab button.
     */
    this.side = 'bottom';
  }
  activatedChanged(activated) {
    const fabs = Array.from(this.el.querySelectorAll('lu-fab-button'));
    // if showing the fabs add a timeout, else show immediately
    const timeout = activated ? 30 : 0;
    fabs.forEach((fab, i) => {
      setTimeout(() => fab.show = activated, i * timeout);
    });
  }
  hostData() {
    return {
      class: {
        'fab-list-active': this.activated,
        [`fab-list-side-${this.side}`]: true
      }
    };
  }
  __stencil_render() {
    return h("slot", null);
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "activated": ["activatedChanged"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
FabList.style = fabListCss;

export { FabList as lu_fab_list };

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