import { Component, h, Host } from '@stencil/core';
import notificationsService from '../services/notifications.service';
export class NotificationsSection {
  disconnectedCallback() {
    notificationsService.clearNotifications();
  }
  render() {
    const { items } = notificationsService.state;
    if (items.length <= 0)
      return h(Host, null);
    const firstAlert = items[0];
    const className = `alert alert-${firstAlert.type}`;
    return (h("div", { class: className, role: "alert" },
      h("div", { class: "d-flex" },
        h("p", { class: "mb-0 flex-grow-1" },
          h("strong", null, items[0].details.title)),
        h("button", { onClick: this.handleClose, type: "button", class: "close pb-1", "aria-label": "Close" },
          h("span", { "aria-hidden": "true" }, "\u00D7"))),
      h("p", { class: "mb-0 mt-1" }, items[0].details.description)));
  }
  handleClose() {
    notificationsService.closeCurrent();
  }
  static get is() { return "ap-ben-notifications-section"; }
}
