import { s as u, x as l, r as v, i as m, e as g } from "./query-assigned-elements-D930kELM.mjs";
import { o as p } from "./class-map-DPUylGZM.mjs";
import { n as h } from "./property-DJzm_oB9.mjs";
var f = Object.defineProperty, d = (s, e, i, n) => {
  for (var t = void 0, a = s.length - 1, r; a >= 0; a--)
    (r = s[a]) && (t = r(e, i, t) || t);
  return t && f(e, i, t), t;
};
class o extends u {
  constructor() {
    super(...arguments), this.state = "neutral", this.statusText = "", this.statusHelper = "", this.titleText = "";
  }
  render() {
    const e = {
      active: this.state === "active",
      caution: this.state === "caution",
      error: this.state === "error",
      positive: this.state === "positive"
    };
    return l`
      <div class="status-header ${p(e)}">
        <div class="status-header-title">
          <div class="status-header-title-text">${this.titleText}</div>
          <slot name="status-header-actions"></slot>
        </div>
        <div class="status-header-status">
          <div class="status-header-icon">
            <slot name="status-header-icon"></slot>
          </div>
          <div class="status-header-text-block">
            <div class="status-header-text">${this.statusText}</div>
            <div class="status-header-helper">${this.statusHelper}</div>
          </div>
          <div class="status-header-slot">
            <slot name="status-header-text"></slot>
          </div>
        </div>
        <slot></slot>
      </div>
    `;
  }
}
d([
  h()
], o.prototype, "state");
d([
  h({ type: String })
], o.prototype, "statusText");
d([
  h({ type: String })
], o.prototype, "statusHelper");
d([
  h({ type: String })
], o.prototype, "titleText");
const y = ".status-header{--cv-status-header-background: transparent;--cv-status-header-icon-background: var( --mdc-theme-surface-neutral-highlight-hover );--cv-status-header-icon-color: var(--mdc-theme-text-icon-on-background);--cv-status-header-status-color: var(--mdc-theme-on-surface);background-color:var(--cv-status-header-background)}.status-header .status-header-content{max-width:inherit;flex-direction:column}.status-header .status-header-icon{background-color:var(--cv-status-header-icon-background);color:var(--cv-status-header-icon-color)}.status-header .status-header-text{--mdc-theme-primary: var(--mdc-theme-surface-neutral-highlight-hover);--mdc-theme-on-surface: var(--mdc-theme-text-icon-on-background);color:var(--cv-status-header-status-color)}.status-header .status-header-helper{color:var(--mdc-theme-text-secondary-on-background)}.status-header .status-header-title-text{color:var(--mdc-theme-on-surface)}.status-header.active{--cv-status-header-background: var( --mdc-theme-surface-secondary-highlight );--cv-status-header-icon-background: var( --mdc-theme-surface-secondary-highlight-hover );--cv-status-header-icon-color: var(--mdc-theme-secondary);--cv-status-header-status-color: var(--mdc-theme-secondary)}.status-header.caution{--cv-status-header-background: var(--mdc-theme-surface-caution-highlight);--cv-status-header-icon-background: var( --mdc-theme-surface-caution-highlight-hover );--cv-status-header-icon-color: var(--mdc-theme-caution);--cv-status-header-status-color: var(--mdc-theme-caution)}.status-header.error{--cv-status-header-background: var( --mdc-theme-surface-negative-highlight );--cv-status-header-icon-background: var( --mdc-theme-surface-negative-highlight-hover );--cv-status-header-icon-color: var(--mdc-theme-negative);--cv-status-header-status-color: var(--mdc-theme-negative)}.status-header.positive{--cv-status-header-background: var( --mdc-theme-surface-positive-highlight );--cv-status-header-icon-background: var( --mdc-theme-surface-positive-highlight-hover );--cv-status-header-icon-color: var(--mdc-theme-positive);--cv-status-header-status-color: var(--mdc-theme-positive)}.status-header-title{padding:0 0 16px 16px;height:fit-content;display:flex;justify-content:space-between;align-items:center}.status-header-title-text{font-family:var(--mdc-typography-headline6-font-family);font-size:var(--mdc-typography-headline6-font-size);font-weight:var(--mdc-typography-headline6-font-weight);line-height:var(--mdc-typography-headline6-line-height)}.status-header-text{font-family:var(--mdc-typography-body2-font-family);font-size:var(--mdc-typography-body2-font-size);font-weight:var(--mdc-typography-body2-font-weight);line-height:var(--mdc-typography-body2-line-height)}.status-header-icon{--mdc-icon-size: 36px;border-radius:50%;min-width:72px;height:72px;display:flex;justify-content:center;align-items:center}.status-header-status{padding-left:32px;padding-bottom:16px;display:flex;flex-direction:row;align-items:center}.status-header-text-block{display:flex;flex-direction:column;margin-left:12px;margin-right:56px}.status-header-text-block .status-header-helper{font-family:var(--mdc-typography-caption-font-family);font-size:var(--mdc-typography-caption-font-size);font-weight:var(--mdc-typography-caption-font-weight);line-height:var(--mdc-typography-caption-line-height)}";
var x = Object.getOwnPropertyDescriptor, b = (s, e, i, n) => {
  for (var t = n > 1 ? void 0 : n ? x(e, i) : e, a = s.length - 1, r; a >= 0; a--)
    (r = s[a]) && (t = r(t) || t);
  return t;
};
let c = class extends o {
};
c.styles = [
  m`
      ${v(y)}
    `
];
c = b([
  g("cv-status-header")
], c);
const z = c;
export {
  c as CovalentStatusHeader,
  z as default
};
