import { r as o, c as r, h as i, H as c, g as b } from "./index.61732cef.js";
import { c as l } from "./index-orsBiyT_.fc4357c3.js";
import { D as d } from "./media-query.service-CCYT6DU8.f0931fdc.js";
import "react";
import "react-dom";
import "./utils-CCck-DTo.e4e43b6a.js";
const h = () => ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);height:1.25rem}}", m = {
  default: void 0,
  critical: "<swirl-icon-error></swirl-icon-error>",
  success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
  warning: "<swirl-icon-warning></swirl-icon-warning>",
  info: "<swirl-icon-info></swirl-icon-info>"
}, f = class {
  constructor(n) {
    o(this, n), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.dismissable = !1, this.dismissLabel = "Dismiss", this.importance = "status", this.intent = "default", this.showIcon = !1, this.size = "m", this.mediaQueryUnsubscribe = () => {
    }, this.onAction = (e) => {
      this.action.emit(e);
    }, this.onDismiss = (e) => {
      this.dismiss.emit(e);
    };
  }
  componentDidLoad() {
    this.mediaQueryUnsubscribe = d.subscribe((n) => {
      this.forceIconProps(n);
    });
  }
  disconnectedCallback() {
    this.mediaQueryUnsubscribe();
  }
  forceIconProps(n) {
    var a, s;
    const e = (a = this.iconEl) == null ? void 0 : a.children[0], t = (s = this.dismissButtonEl) == null ? void 0 : s.children[0];
    e == null || e.setAttribute("size", n ? "20" : "24"), t == null || t.setAttribute("size", n ? "20" : "24");
  }
  determineIcon() {
    return this.icon ? this.icon : m[this.intent];
  }
  render() {
    const n = this.determineIcon(), e = Boolean(this.actionLabel) || this.dismissable, t = this.icon || this.showIcon && Boolean(n), a = l("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
      "banner--has-icon": t
    });
    return i(c, { key: "d9f612a8cccf6eca41e32850b3b91c784d718976" }, i("div", { key: "bed14a2caee73bb791efc7955276ccc2f939d623", "aria-describedby": "content", class: a, role: this.importance, tabIndex: 0 }, i("div", { key: "f0e1a9f7657f37605f038c43ee74cd352c480524", class: "banner__content", id: "content", part: "banner__content" }, t && i("span", { key: "23f830c1fe486a9f3ba519605b5ea97c94fd660f", "aria-hidden": "true", class: "banner__icon", innerHTML: n, ref: (s) => this.iconEl = s }), i("span", { key: "56306cab17a0c89f701730a11a7b61905030a7bf", class: "banner__text" }, this.content)), e && i("div", { key: "69cb51d812a88503f8f20e03541f70cc8ccdd500", class: "banner__controls" }, this.actionLabel && i("button", { key: "bd391ec1cfa4a6819650251cff32cbfbfe06ed92", class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && i("button", { key: "67f4a85d7ba5b5c4108362e2f661a77bf59903fa", "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (s) => this.dismissButtonEl = s, type: "button" }, i("swirl-icon-close", { key: "abc8f0ca930848944cafc40df706cb240f0399dc" })))));
  }
  get element() {
    return b(this);
  }
};
f.style = h();
export {
  f as swirl_banner
};
