import { Host, h } from '@stencil/core';
/**
 * Outputs a banner for displaying important messages and related optional actions.
 * @docsPage
 * @exSlot Here’s a short message about what’s going on. Here’s more about what’s happening. Here’s a <a href="#">clickable action</a>.
 */
export class BsBanner {
  constructor() {
    this.isDismissed = false;
  }
  handleDismiss() {
    this.isDismissed = true;
    this.dismiss.emit();
  }
  render() {
    return (h(Host, { role: "alert", class: "bs-banner", "data-dismissed": this.isDismissed ? true : undefined }, h("div", { class: "bs-banner-content" }, h("bs-icon-warning", { size: "lg", class: "bs-banner-warning-icon" }), h("div", { "data-slot": true }, h("slot", null)), h("button", { type: "button", title: "Close Banner", onClick: () => this.handleDismiss() }, h("bs-icon-close", null)))));
  }
  static get is() { return "bs-banner"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-banner.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-banner.css"]
    };
  }
  static get states() {
    return {
      "isDismissed": {}
    };
  }
  static get events() {
    return [{
        "method": "dismiss",
        "name": "dismiss",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the user has dismissed the banner."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=bs-banner.js.map
