import _ from "./grid.js";
import f from "./grid-item.js";
import { C as v } from "../chunks/icon-button.C2s3pHG4.js";
import { C as S } from "../chunks/image.RAgoEmf7.js";
import $ from "./space.js";
import C from "./tooltip.js";
import { n, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as I } from "../chunks/component.styles.CRO4Odto.js";
import { a as u } from "../chunks/index.Cpamj0jB.js";
import { c as k } from "../chunks/custom-element.L4WJXn1j.js";
import { w as U } from "../chunks/watch.BCJD77bD.js";
import { i as A, x as o } from "../chunks/lit-element.jLBm65_O.js";
import { r as x } from "../chunks/state.CSDxrqLd.js";
import { e as E } from "../chunks/query.BBf1UFkC.js";
import { e as h } from "../chunks/class-map.BiVq-cVR.js";
import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
import { c as m } from "../chunks/repeat.DbF2p5ae.js";
import { o as g } from "../chunks/style-map.llVFPd__.js";
import { n as y } from "../chunks/when.Dr1es41R.js";
import { S as j } from "../chunks/sortable.esm.oSzf6C5Q.js";
var c = /* @__PURE__ */ ((t) => (t.Masonry = "masonry", t.Standard = "standard", t))(c || {});
const D = A`:host{--actions-background-color:var(--cx-color-neutral-100);--border-radius:0px;--item-border-radius:var(--cx-border-radius-medium);--padding:0px;--width:100%;--height:auto;width:var(--width,100%);height:var(--height,100%);display:block;overflow:auto}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}.masonry-list{column-gap:var(--spacing-container-gap)}.masonry-list__item{border-radius:var(--item-border-radius);display:block;position:relative;overflow:hidden}.masonry-list__item--error:before{content:"";border:2px solid var(--cx-color-danger);border-radius:var(--item-border-radius);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.container--masonry .masonry-list__item{margin-bottom:var(--spacing-container-gap)}.container--standard cx-grid-item::part(base){height:100%}.masonry-list__item__image{width:100%;height:100%}.masonry-list__item__actions{opacity:0;width:100%;transition:opacity var(--cx-transition-fast) ease-in-out;z-index:10;position:absolute;bottom:0;left:0}.masonry-list__item__actions:before{content:"";background-color:var(--actions-background-color);opacity:.5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.masonry-list__item:hover .masonry-list__item__actions{opacity:1}.masonry-list__item__action{z-index:5;flex:auto;position:relative}.masonry-list__item__action::part(base){border-radius:0;width:100%}.container--sortable .masonry-list__item{cursor:move}`;
var K = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (t, i, a, s) => {
  for (var l = s > 1 ? void 0 : s ? z(i, a) : i, d = t.length - 1, p; d >= 0; d--)
    (p = t[d]) && (l = (s ? p(i, a, l) : p(l)) || l);
  return s && l && K(i, a, l), l;
};
let r = class extends w {
  constructor() {
    super(), this.data = [], this.variant = c.Standard, this.cols = 3, this.rowHeight = "auto", this.actions = [], this.sortable = !1, this.spacing = "medium", this.idKey = "id", this.sortableInstance = null, this.previous = [], this.abortDrag = !1, this.handleEnd = this.handleEnd.bind(this), this.handleStart = this.handleStart.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleItemClick = this.handleItemClick.bind(this);
  }
  getAllItems() {
    return Array.from(this.list.querySelectorAll(".masonry-list__item"));
  }
  handleStart(t) {
    t.item && (this.previous = [t.item.previousSibling]);
  }
  async handleEnd(t) {
    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((i) => {
      i && i.after(t.item);
    }), this.requestUpdate());
  }
  destroySortable() {
    this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
  }
  initSortable() {
    this.sortableInstance = j.create(this.list, {
      animation: 100,
      onAdd: this.handleSortableUpdate,
      onEnd: this.handleEnd,
      onRemove: this.handleSortableUpdate,
      onStart: this.handleStart,
      onUpdate: this.handleSortableUpdate
    });
  }
  handleSortableChange() {
    this.destroySortable(), this.sortable && this.initSortable();
  }
  connectedUpdatedCallback() {
    this.handleSortableChange();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.destroySortable();
  }
  handleItemClick(t, i) {
    this.emit("cx-masonry-select", {
      detail: { event: t, item: i }
    });
  }
  handleSortableUpdate(t) {
    const i = this.data[t.oldIndex], a = [...this.data];
    a.splice(t.oldIndex, 1), a.splice(t.newIndex, 0, i);
    const s = {
      from: t.from,
      item: t.item,
      items: this.getAllItems(),
      itemsData: a,
      newIndex: t.newIndex,
      oldIndex: t.oldIndex,
      to: t.to,
      type: t.type
    };
    this.emit("cx-reorder", {
      detail: s
    });
  }
  renderActions(t) {
    const i = (a) => {
      const s = () => {
        this.emit(a.event, {
          detail: { item: t }
        });
      };
      return o`<cx-icon-button class="masonry-list__item__action" name=${b(a.icon)} src=${b(a.src)} @click=${s} size="small" style=${g({
        color: a.color
      })}></cx-icon-button>`;
    };
    return o`<cx-space class="masonry-list__item__actions" direction="horizontal" spacing="x-small" justify-content="space-around">${m(
      this.actions,
      (a) => a.event,
      (a) => a.tooltip ? o`<cx-tooltip content=${a.tooltip}>${i(a)}</cx-tooltip>` : i(a)
    )}</cx-space>`;
  }
  renderMasonry() {
    return o`<div class="masonry-list" style=${g({
      "column-count": this.cols
    })} part="list">${m(
      this.data,
      (t) => t[this.idKey],
      (t) => {
        const i = (a) => {
          this.handleItemClick(a, t);
        };
        return o`<div data-id=${t[this.idKey]} class=${h({
          "masonry-list__item": !0,
          "masonry-list__item--error": t.hasError ?? !1
        })} part="item" @click=${i}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} object-fit=${t.objectFit || u.Cover} ?loading=${t.loading}></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div>`;
      }
    )}</div>`;
  }
  renderStandard() {
    return o`<cx-grid columns=${this.cols} spacing="var(--cx-spacing-${this.spacing})" use-flex-gap class="masonry-list" part="list">${m(
      this.data,
      (t) => t[this.idKey],
      (t) => {
        const i = (a) => {
          this.handleItemClick(a, t);
        };
        return o`<cx-grid-item xs="1"><div class=${h({
          "masonry-list__item": !0,
          "masonry-list__item--error": t.hasError ?? !1
        })} style=${g({
          height: this.rowHeight
        })} part="item" @click=${i} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} width="100%" height="100%" object-fit=${t.objectFit || u.Cover} ?loading=${t.loading}></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
      }
    )}</cx-grid>`;
  }
  render() {
    return o`<div part="base" class=${h({
      container: !0,
      "container--masonry": this.variant === c.Masonry,
      "container--sortable": this.sortable,
      "container--standard": this.variant === c.Standard
    })}>${y(
      this.variant === c.Masonry,
      () => this.renderMasonry(),
      () => this.renderStandard()
    )}</div>`;
  }
};
r.styles = [I, D];
r.dependencies = {
  "cx-grid": _,
  "cx-grid-item": f,
  "cx-icon-button": v,
  "cx-image": S,
  "cx-space": $,
  "cx-tooltip": C
};
e([
  E(".masonry-list")
], r.prototype, "list", 2);
e([
  n({ type: Array })
], r.prototype, "data", 2);
e([
  n({ reflect: !0, type: String })
], r.prototype, "variant", 2);
e([
  n({ reflect: !0, type: Number })
], r.prototype, "cols", 2);
e([
  n({ attribute: "row-height", type: String })
], r.prototype, "rowHeight", 2);
e([
  n({ type: Array })
], r.prototype, "actions", 2);
e([
  n({ reflect: !0, type: Boolean })
], r.prototype, "sortable", 2);
e([
  n({ reflect: !0, type: String })
], r.prototype, "spacing", 2);
e([
  n({ attribute: "id-key", reflect: !0, type: String })
], r.prototype, "idKey", 2);
e([
  x()
], r.prototype, "sortableInstance", 2);
e([
  x()
], r.prototype, "previous", 2);
e([
  x()
], r.prototype, "abortDrag", 2);
e([
  U("sortable", { waitUntilFirstUpdate: !0 })
], r.prototype, "handleSortableChange", 1);
r = e([
  k("cx-masonry")
], r);
export {
  r as default
};
