import { r as m, i as f, s as g, x as s, e as u } from "./query-assigned-elements-D930kELM.mjs";
import { n } from "./property-DJzm_oB9.mjs";
import { o as l } from "./class-map-DPUylGZM.mjs";
import "./icon.mjs";
const h = '.mdc-ripple-surface{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-ripple-surface:before,.mdc-ripple-surface:after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface:after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface:before,.mdc-ripple-surface:after{top:0%;left:0%;width:100%;height:100%}.mdc-ripple-surface.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size, 50%);height:var(--mdc-ripple-fg-size, 50%)}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover:before,.mdc-ripple-surface.mdc-ripple-surface--hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused:before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface:after,.mdc-ripple-surface:before{border-radius:0 16px 16px 0}.itemContent{padding:0 32px 0 var(--indent);margin-right:16px}.itemContent:hover{cursor:pointer;background-color:var(--mdc-theme-surface-neutral-highlight-hover);border-radius:0 16px 16px 0}.selected{background-color:var(--mdc-theme-surface-primary-highlight);color:var(--mdc-theme-primary);border-radius:0 16px 16px 0}.selected:hover{background-color:var(--mdc-theme-surface-primary-highlight-hover)}.mainContent{display:flex;flex-direction:row;padding:4px 0}[name=label]::slotted(*){font-family:var(--mdc-typography-body1-font-family);font-size:var(--mdc-typography-body1-font-size);font-weight:var(--mdc-typography-body1-font-weight);line-height:var(--mdc-typography-body1-line-height);letter-spacing:.25px;padding-left:16px}[name=extraContent]::slotted(*){padding-left:64px;padding-bottom:4px;margin-top:-4px;letter-spacing:.4px;color:var(--mdc-theme-text-secondary-on-background);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)}.hidden{display:none}.visible{display:flex;flex-direction:column}.endOfNest{padding:8px;padding-left:calc(var(--indent) + 20px);letter-spacing:.4px;-webkit-user-select:none;user-select:none;color:var(--mdc-theme-text-disabled-on-background);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)}.arrowIcon{color:var(--mdc-theme-text-primary-on-background)}.open{transition:transform .1s ease-out;transform:rotate(90deg)}.close{transition:transform .1s ease-in;transform:rotate(0)}';
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, i, a, p) => {
  for (var e = p > 1 ? void 0 : p ? y(i, a) : i, c = t.length - 1, d; c >= 0; c--)
    (d = t[c]) && (e = (p ? d(i, a, e) : d(e)) || e);
  return p && e && v(i, a, e), e;
};
let r = class extends g {
  constructor() {
    super(...arguments), this.isOpen = !1, this.icon = "", this.indentLevel = 0, this.indentMultiple = 16;
  }
  render() {
    const t = {
      hidden: !this.isOpen,
      visible: this.isOpen
    }, i = {
      open: this.isOpen,
      close: !this.isOpen
    }, a = "arrow_right", p = s`<cv-icon>${this.icon}</cv-icon>`, e = s`<cv-icon class="${l(i)} arrowIcon"
      >${a}</cv-icon
    >`;
    return s`
      <div
        class="itemContent mdc-ripple-surface"
        @click="${this._handleClick}"
        style="--indent:${this.indentLevel * this.indentMultiple + 8}px"
      >
        <div class="mainContent">
          ${e} ${p}
          <slot name="label"></slot>
        </div>
        <slot name="extraContent"></slot>
      </div>
      <slot name="nest" class="${l(t)}">
        <div
          class="endOfNest"
          style="--indent:${this.indentLevel * this.indentMultiple + this.indentMultiple}px"
        >
          No results
        </div>
      </slot>
    `;
  }
  _handleClick() {
    this.isOpen = !this.isOpen;
    const t = new CustomEvent("select", {
      detail: {
        message: `Emitting an event from ${this}`
      },
      // bubbles and composed are required in order to allow custom event to pass through shadow DOM boundary to cv-tree-list.
      bubbles: !0,
      composed: !0
    });
    this.dispatchEvent(t);
  }
};
r.styles = [
  f`
      ${m(h)}
    `
];
o([
  n({ type: Boolean })
], r.prototype, "isOpen", 2);
o([
  n({ type: String })
], r.prototype, "icon", 2);
o([
  n({ type: Number })
], r.prototype, "indentLevel", 2);
o([
  n({ type: Number })
], r.prototype, "indentMultiple", 2);
r = o([
  u("cv-tree-list-item")
], r);
const O = r;
export {
  r as CovalentTreeListItem,
  O as default
};
