import { r as g, c as w, h as e, H as x, g as k } from "./index.e6beb8d9.js";
import { c as y } from "./index-orsBiyT_.fc4357c3.js";
import { v as C } from "./v4-DD3477fe.2624487e.js";
import "react";
import "react-dom";
const I = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);background-color:var(--s-surface-raised-50-default);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--swirl-tag-background-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%}.data-cell__input ::slotted(swirl-form-control){--swirl-form-control-label-background-color:var(       --swirl-data-cell-input-background,       var(--s-surface-default)     )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}", S = class {
  constructor(s) {
    g(this, s), this.valueChange = w(this, "valueChange", 7), this.intent = "default", this.vertical = !1, this.elementId = `data-cell-${C()}`, this.handleRadioClick = (a) => {
      const t = a.target, l = this.el.querySelector('swirl-radio[slot="content"]');
      t.contains(l) && (l == null ? void 0 : l.querySelector('input[type="radio"]')).click();
    }, this.handleClick = (a) => {
      this.handleRadioClick(a), this.valueChange.emit(a);
    };
  }
  render() {
    var d, f, u, h;
    const s = Boolean(((d = this.el.querySelector('[slot="media"]')) == null ? void 0 : d.parentElement.tagName) === "SWIRL-DATA-CELL"), a = Boolean(((f = this.el.querySelector('[slot="suffix"]')) == null ? void 0 : f.parentElement.tagName) === "SWIRL-DATA-CELL"), t = Boolean(this.label), l = Boolean(((u = this.el.querySelector('[slot="content"]')) == null ? void 0 : u.parentElement.tagName) === "SWIRL-DATA-CELL"), c = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]')), i = Boolean(this.el.querySelector('swirl-radio[slot="content"]')), b = y("data-cell", {
      "data-cell--vertical": this.vertical,
      "data-cell--has-media": s,
      "data-cell--has-suffix": a,
      "data-cell--has-content": l,
      "data-cell--no-label": !t,
      "data-cell--interactive": c || i,
      [`data-cell--intent-${this.intent}`]: this.intent
    }), n = `${this.elementId}-label`, p = `${this.elementId}-value`, r = ((h = this.el.parentElement) == null ? void 0 : h.tagName) === "SWIRL-DATA-CELL-STACK", v = r ? "listitem" : "group", o = c || i ? "button" : void 0, _ = r && !o ? "group" : o, m = e("swirl-stack", { key: "ab16afe01f6c3c18dd67a5da174026e1e8de6bf3", orientation: "horizontal", align: "center", spacing: "4" }, e("span", { key: "ae92a2d8cb8431aaf862e93eb847943b9a6d8279", class: "data-cell__label", id: n, role: "term" }, this.label), this.tooltip && e("swirl-tooltip", { key: "6454b08e1b64849e0900e144b30cf74d8b6581f3", class: "data-cell__tooltip", content: this.tooltip, position: "right" }, e("swirl-icon-info", { key: "dfe5c87e7a844fa5a1aa57e20fd2f3b262ad9876", size: 16, tabIndex: 0 })));
    return e(x, { key: "0a0404e543eb4072e67660e330704495f45eef66", role: v }, e("div", { key: "eac7c29bb73dd59d41146a85cc0c11dc33cccedd", class: b, part: "data-cell", onClick: c || i ? this.handleClick : void 0, role: _, tabIndex: c || i ? 0 : void 0 }, s && e("div", { key: "83898c60be03a148614ec046f9d89428d48051a9", class: "data-cell__media", "aria-hidden": "true" }, e("slot", { key: "3050473fef6c3b8378f51edb2f36e6b250a3db68", name: "media" })), e("div", { key: "5239437999175393cb8c5737f0fcc9576684da41", class: "data-cell__content" }, t && e("div", { key: "15eb00504d85050f405024166f4642fa17ebf6d5", class: "data-cell__label-wrapper" }, m), (l || this.value || a) && e("div", { key: "7cae24859db14bff3fe9bb5309122f72a03331a6", class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": t ? n : void 0, id: p }, l ? e("div", { class: "data-cell__input" }, e("slot", { name: "content" })) : this.value && e("div", { class: "data-cell__value" }, this.value))), a && e("div", { key: "07b26cd6a1cb75dd47e7a00e6db49fd7c921497e", class: "data-cell__suffix" }, e("slot", { key: "77b8abbfd5742cf0987c350e8f7464f76eabbf03", name: "suffix" }))));
  }
  get el() {
    return k(this);
  }
};
S.style = I();
export {
  S as swirl_data_cell
};
