import { n as a, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as u } from "../chunks/component.styles.CRO4Odto.js";
import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
import { L as x } from "../chunks/i18n.BABe9hN4.js";
import { H as f } from "../chunks/slot.j5oheLJC.js";
import { w as p } from "../chunks/watch.BCJD77bD.js";
import { i as b, x as d } from "../chunks/lit-element.jLBm65_O.js";
import { e as _ } from "../chunks/query.BBf1UFkC.js";
import { e as n } from "../chunks/class-map.BiVq-cVR.js";
import { C as g } from "../chunks/icon-button.C2s3pHG4.js";
import y from "./line-clamp.js";
const w = b`.tab{border-radius:var(--cx-border-radius-small);padding:var(--tab-padding,var(--cx-spacing-x-small));font:var(--cx-font-label-small);font-weight:var(--cx-font-weight-medium);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition:var(--transition-speed) box-shadow, var(--transition-speed) color;max-width:var(--tab-max-width,none);align-items:center;display:inline-flex}.tab__label{flex:auto;min-width:0}.tab__label::part(content){word-break:break-all}.tab.tab--default{color:var(--tab-color,var(--cx-color-neutral-700));background-color:var(--tab-background-color,transparent)}.tab.tab--button{color:var(--tab-color,var(--cx-color-neutral-600));background-color:var(--tab-background-color,transparent);border-radius:var(--tab-border-radius,10px)}.tab.tab.tab--default:hover:not(.tab--disabled){color:var(--cx-color-primary)}.tab.tab.tab--button:hover:not(.tab--disabled):not(.tab--active){color:var(--cx-color-neutral-800)}.tab.tab--default.tab--active:not(.tab--disabled){color:var(--tab-active-color,var(--cx-color-primary));background-color:var(--tab-active-background-color,transparent)}.tab.tab--button.tab--active:not(.tab--disabled){background-color:var(--tab-active-background-color,var(--cx-color-neutral-200));color:var(--tab-active-color,var(--cx-color-neutral-800))}.tab.tab--closable{padding-inline-end:var(--cx-spacing-small)}.tab.tab--disabled{opacity:.5;cursor:default}.tab__close-button{font-size:var(--cx-font-size-small);margin-inline-start:var(--cx-spacing-small)}.tab__close-button::part(base){padding:var(--cx-spacing-3x-small)}@media (forced-colors:active){.tab.tab--active:not(.tab--disabled){outline-offset:-3px;outline:1px solid #0000}}`, k = b`.timeline-item{gap:var(--cx-spacing-small);font-family:var(--cx-font-sans);font-size:var(--timeline-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-font-weight-regular);border-radius:var(--cx-border-radius-small);padding:var(--tab-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition:var(--transition-speed) box-shadow, var(--transition-speed) color;max-width:var(--tab-max-width,none);flex-direction:column;display:flex;position:relative}.timeline-item--single{align-items:center}.timeline-item__content{--timeline-item-content-width:var(--min-tab-width);align-items:center;gap:var(--cx-spacing-x-large);left:calc(var(--i) / (var(--n) - 1) * (100% - var(--timeline-item-content-width)));width:var(--timeline-item-content-width);flex-direction:column;transition:left .4s linear;display:flex;position:relative}.timeline-item__label{flex:auto;min-width:0}.timeline-item__label::part(content){word-break:break-all}.timeline-item{color:var(--marker-color,var(--cx-color-neutral-700));background-color:var(--tab-background-color,transparent)}.timeline-item.timeline-item--active:not(.timeline-item--disabled),:host(:hover) .timeline-item:not(.timeline-item--disabled){color:var(--marker-active-color,var(--cx-color-primary))}.timeline-item.timeline-item--disabled{opacity:.5;cursor:default}@media (forced-colors:active){.timeline-item.timeline-item--active:not(.timeline-item--disabled){outline-offset:-3px;outline:1px solid #0000}}.timeline-item__thumbnail{width:var(--marker-image-width,120px);height:var(--marker-image-height,100px);border-radius:var(--marker-image-border-radius,var(--cx-border-radius-small));max-width:100%;display:block;overflow:hidden}.timeline-item.timeline-item--active:not(.timeline-item--disabled) .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty),:host(:hover) .timeline-item:not(.timeline-item--disabled) .timeline-item__thumbnail:not(.timeline-item__thumbnail--empty){outline:4px solid var(--marker-active-color,var(--cx-color-primary))}.timeline-item__thumbnail.timeline-item__thumbnail--empty{display:none}.timeline-item__thumbnail::slotted(img){object-fit:cover;width:100%;height:100%}.timeline-item__indicator{isolation:isolate;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.timeline-item__indicator__dot{width:var(--cx-spacing-small);height:var(--cx-spacing-small);border-radius:var(--cx-border-radius-circle);background-color:var(--marker-color);z-index:1;display:block}.timeline-item__indicator__dot--active:not(.timeline-item__indicator__dot--disabled),:host(:hover) .timeline-item__indicator__dot:not(.timeline-item__indicator__dot--disabled){background-color:var(--marker-active-color)}`, C = b`
  :host {
    display: inline-block;
    flex: 0 0 auto;
  }

  :host(:focus) {
    outline: transparent;
  }

  :host(:focus-visible):not([disabled]) {
    color: var(--cx-color-primary);
  }

  :host(:focus-visible) {
    outline: var(--cx-focus-ring);
    outline-offset: calc(
      -1 * var(--cx-focus-ring-width) - var(--cx-focus-ring-offset)
    );
  }

  ${w}

  ${k}
`;
var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (i, r, s, o) => {
  for (var l = o > 1 ? void 0 : o ? z(r, s) : r, c = i.length - 1, m; c >= 0; c--)
    (m = i[c]) && (l = (o ? m(r, s, l) : m(l)) || l);
  return o && l && $(r, s, l), l;
};
let I = 0, t = class extends v {
  constructor() {
    super(...arguments), this.localize = new x(this), this.hasSlotController = new f(this, "thumbnail"), this.attrId = ++I, this.componentId = `cx-tab-${this.attrId}`, this.panel = "", this.active = !1, this.closable = !1, this.disabled = !1, this.tabIndex = 0, this.first = !1, this.last = !1, this.single = !1;
  }
  runFirstUpdated() {
    this.setAttribute("role", "tab");
  }
  handleCloseClick(i) {
    i.stopPropagation(), this.emit("cx-close");
  }
  handleActiveChange() {
    this.setAttribute("aria-selected", this.active ? "true" : "false");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.disabled && !this.active ? this.tabIndex = -1 : this.tabIndex = 0;
  }
  renderNormalTab(i) {
    return d`<div part="base" class=${n({
      tab: !0,
      "tab--active": this.active,
      "tab--closable": this.closable,
      "tab--disabled": this.disabled,
      [`tab--${i}`]: !0
    })}><cx-line-clamp part="label" class="tab__label" lines="1"><slot></slot></cx-line-clamp>${this.closable ? d`<cx-icon-button part="close-button" exportparts="base:close-button__base" name="close" label=${this.localize.term("close")} class="tab__close-button" @click=${this.handleCloseClick} tabindex="-1"></cx-icon-button>` : ""}</div>`;
  }
  renderTimelineTab() {
    return d`<div part="base" class=${n({
      "timeline-item": !0,
      "timeline-item--active": this.active,
      "timeline-item--disabled": this.disabled,
      "timeline-item--single": this.single
    })}><div class="timeline-item__content"><div class="timeline-item__indicator"><div class=${n({
      "timeline-item__indicator__dot": !0,
      "timeline-item__indicator__dot--active": this.active,
      "timeline-item__indicator__dot--disabled": this.disabled
    })}></div></div><cx-line-clamp part="label" class="timeline-item__label" lines="1"><slot></slot></cx-line-clamp><slot name="thumbnail" class=${n({
      "timeline-item__thumbnail": !0,
      "timeline-item__thumbnail--empty": !this.hasSlotController.test("thumbnail")
    })}></slot></div></div>`;
  }
  render() {
    this.id = this.id.length > 0 ? this.id : this.componentId;
    const i = (this.parentElement && this.parentElement.getAttribute("variant")) ?? "default";
    switch (i) {
      case "timeline":
        return this.renderTimelineTab();
      default:
        return this.renderNormalTab(i);
    }
  }
};
t.styles = [u, C];
t.dependencies = {
  "cx-icon-button": g,
  "cx-line-clamp": y
};
e([
  _(".tab")
], t.prototype, "tab", 2);
e([
  a({ reflect: !0 })
], t.prototype, "panel", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "active", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "closable", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "disabled", 2);
e([
  a({ attribute: "tabindex", reflect: !0, type: Number })
], t.prototype, "tabIndex", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "first", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "last", 2);
e([
  a({ reflect: !0, type: Boolean })
], t.prototype, "single", 2);
e([
  p("active")
], t.prototype, "handleActiveChange", 1);
e([
  p("disabled")
], t.prototype, "handleDisabledChange", 1);
t = e([
  h("cx-tab")
], t);
export {
  t as default
};
