import { r as l, h as i, H as r, g as d } from "./index.61732cef.js";
import { c as h } from "./index-orsBiyT_.fc4357c3.js";
import { D as m } from "./media-query.service-CCYT6DU8.f0931fdc.js";
import "react";
import "react-dom";
import "./utils-CCck-DTo.e4e43b6a.js";
const f = () => ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-state-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}", b = class {
  constructor(e) {
    l(this, e), this.intent = "default", this.size = "m", this.truncateLabel = !0, this.mediaQueryUnsubscribe = () => {
    };
  }
  componentDidLoad() {
    this.mediaQueryUnsubscribe = m.subscribe((e) => {
      this.forceIconProps(e);
    });
  }
  disconnectedCallback() {
    this.mediaQueryUnsubscribe();
  }
  forceIconProps(e) {
    var o, a, c;
    const n = (o = this.iconEl) == null ? void 0 : o.children[0], t = (a = this.suffixEl) == null ? void 0 : a.children[0];
    n == null || n.setAttribute("size", e ? "20" : "24");
    const s = (c = this.iconBadgeEl) == null ? void 0 : c.children[0];
    s == null || s.setAttribute("size", "xs"), s == null || s.setAttribute("variant", "dot"), (t == null ? void 0 : t.tagName) !== "SWIRL-TAG" && (t == null || t.setAttribute("size", e ? "20" : "24"));
  }
  render() {
    const e = Boolean(this.badge), n = Boolean(this.iconBadge), t = Boolean(this.el.querySelector('[slot="suffix"]')), s = (Boolean(this.suffix) || t) && !this.disabled, o = h("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
    return i(r, { key: "a8ec31c9d8234291c8379e9b3521f91c176e811e" }, i("button", { key: "3018e2f041a84b321b9cef388c85c59afa518b79", "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: o, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, i("slot", { key: "34bebbac07562f76eb29e1b93900019a75143add", name: "avatar" }), this.icon && i("span", { key: "15b82e7eb50d334254f1f6da7d55cecad4706475", class: "action-list-item__icon", innerHTML: this.icon, ref: (a) => this.iconEl = a }, n && i("span", { key: "0c4c8fc78fd13d707cb33dab2309c85f97a4e201", class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (a) => this.iconBadgeEl = a })), i("span", { key: "c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55", class: "action-list-item__label-container" }, i("span", { key: "9626f3a01f7c95da947b7665e7c97a9542f48cfb", class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && i("span", { key: "e002430aa42252b68c1550af4d2c75dd744f78ee", class: "action-list-item__description" }, this.description)), e && i("span", { key: "1aca4916c0f3fca1601c49db73ae72516520572f", class: "action-list-item__badge", innerHTML: this.badge }), s && i("span", { key: "c355f7123d3d5deba0a72ca3ee1142ef3210d96e", class: "action-list-item__suffix", innerHTML: t ? void 0 : this.suffix, ref: (a) => this.suffixEl = a }, i("slot", { key: "d3d6cac336709a2592f637971f0479587cbf0dee", name: "suffix" }))));
  }
  get el() {
    return d(this);
  }
};
b.style = f();
export {
  b as swirl_action_list_item
};
