@arcgis/map-components/dist/components/arcgis-layer-list-next/layer-list-item/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { html as c } from "lit";
import { keyed as Y } from "lit/directives/keyed.js";
import { isLayerFromCatalog as Ce } from "@arcgis/core/layers/catalog/catalogUtils.js";
import { safeClassMap as d, safeStyleMap as Te, nothing as r } from "@arcgis/lumina";
import { classes as F } from "@arcgis/toolkit/dom";
import { createRef as Z, ref as ee } from "lit/directives/ref.js";
import { g as Se, a as le } from "../../../chunks/action-utils.js";
import { h as xe, j as te, l as Me, k as Le, n as Ee, o as ke, g as we } from "../../../chunks/layer-list-utils.js";
import { s as Pe } from "../../../chunks/component-utils.js";
const ne = /* @__PURE__ */ new Map();
function ce(i) {
  return i ? ne.get(i) ?? !1 : !1;
}
function De(i, e) {
  const l = !(i.aria?.pressed ?? ce(e));
  return i.aria = { ...i.aria, pressed: l }, e && ne.set(e, l), l;
}
function O(i) {
  return i && "visibilityMode" in i ? i.visibilityMode : null;
}
function ie(i, e) {
  if (!("visible" in i))
    return;
  O(e) === "exclusive" && i.visible || (i.visible = !i.visible);
}
function Fe(i, e) {
  i.panel.open = !i.panel.open, i.panel.open && e && e();
}
function Oe(i, e, l, m) {
  i && l === e.layer?.uid && (Pe(i), m?.(null));
}
function Ge(i, e, l) {
  l.type === "toggle" && (l.value = !l.value), i(l, e);
}
function Re(i) {
  return i.actionsSections.map((e) => e.filter((l) => l.visible));
}
function se(i, e) {
  const { icon: l } = e;
  if (l)
    return null;
  const m = "image" in e ? e.image : void 0;
  return m ? c`<span aria-hidden=true class=${d(F(i.itemActionIcon, { [i.itemActionImage]: !!m }))} style=${Te(Se(m))}></span>` : null;
}
function ae(i, e, l) {
  const { item: m, css: a, handleAction: f } = i, { active: C, disabled: I, title: b, type: T, indicator: h } = e, S = le(e);
  return c`<calcite-action .active=${T === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${S} .indicator=${h} .loading=${C} @click=${() => Ge(f, m, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${b ?? ""} .textEnabled=${l} title=${b ?? void 0 ?? r}>${se(a, e)}</calcite-action>`;
}
function Ve(i) {
  const { item: e, parent: l, hideStatusIndicators: m, css: a, visibilityAppearance: f, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: b, listModeDisabled: T = !1, selectionMode: h, displayMode: S, layerTablesEnabled: x, showErrors: oe, parentTitles: G, selectedItems: re, activeItem: de, handleCatalogOpen: ue, handleTablesOpen: me, selectedDragItemLayerUid: $e, handleSelectedDragItemLayerUidChange: ge, handlePanelOpen: pe, messages: n, setCurrentActiveItem: R, clearActiveItem: V } = i, g = Z(), M = Z(), y = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
  let H = null;
  m || (H = c`<arcgis-layer-list-item-indicator class=${d(a.statusIndicator)} .messages=${n} .item=${e} .parent=${l} slot=content-end></arcgis-layer-list-item-indicator>`);
  let U = null;
  {
    const { layer: t } = e, s = t && "persistenceEnabled" in t && (Ce(t) || !t.persistenceEnabled);
    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && s && (U = c`<calcite-icon class=${d(a.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
  }
  let q = null;
  if ("visible" in e && "visibleToggle" in a && f) {
    const t = O(l);
    if (t !== "inherited") {
      const s = xe({
        visible: e.visible,
        exclusive: t === "exclusive",
        visibilityAppearance: f
      }), o = f === "checkbox", u = n.layerVisibility, v = e.title ?? e.layer?.title ?? "", p = v ? `${u ?? ""}: ${v}` : u ?? "", P = ce(e.layer?.id);
      q = c`<calcite-action .aria=${{ pressed: P }} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} .label=${p} @click=${(D) => {
        De(D.currentTarget, e.layer?.id), ie(e, l);
      }} .slot=${o ? "actions-start" : "actions-end"} .text=${u ?? ""} title=${u ?? r}>${o ? null : c`<calcite-icon class=${d(F({
        [a.visibleIcon]: t !== "exclusive" && e.visible
      }))} .icon=${s} scale=s></calcite-icon>`}</calcite-action>`;
    }
  }
  let j = null;
  {
    const t = e.panel;
    t?.open && !t.disabled && !t.flowEnabled && (j = c`<div class=${d(a.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
  }
  let B = null;
  {
    const t = e.panel;
    if (t?.visible) {
      const { open: s, title: o, disabled: u } = t, v = { icon: t.icon, image: t.image, indicator: !1 }, p = le(v);
      B = c`<calcite-action .active=${s} .disabled=${u} .icon=${p} @click=${() => Fe(e, pe)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${se(a, t)}</calcite-action>`;
    }
  }
  let N = null;
  {
    const t = e.layer, s = t?.type === "catalog-footprint", o = t?.type === "sublayer" && te(t, "footprints");
    "itemCatalogIcon" in a && (s || o) && (N = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
  }
  let _ = null;
  {
    const t = e.layer, s = t?.type === "catalog-dynamic-group", o = t?.type === "sublayer" && te(t, "layers-in-view");
    "itemCatalogIcon" in a && (s || o) && (_ = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
  }
  let z = null;
  if ("visible" in e) {
    const t = e.layer;
    !C && t?.type === "catalog-dynamic-group" && (z = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => ue?.(e)} scale=s slot=actions-end .text=${y ?? ""}></calcite-action>`);
  }
  let J = null, L = !1;
  {
    const t = e.layer;
    if (x && t)
      switch (t.type) {
        case "knowledge-graph":
          L = x.includes(t.type) && "tables" in t && !!t.tables?.length;
          break;
        case "map-image":
        case "tile":
          L = x.includes(t.type) && "subtables" in t && !!t.subtables?.length;
          break;
      }
    "itemTableIcon" in a && "visible" in e && "tables" in n && L && (J = Y(`${e.uid}-tables`, c`<calcite-list-item class=${d(a.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => me?.(e)} .value=${e}><calcite-icon class=${d(a.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
  }
  let K = null;
  if ("children" in e) {
    const t = [...G ?? [], e.title], { children: s, layer: o } = e, u = o?.type !== "catalog-dynamic-group" && Me(e), v = T ? !1 : Le(o), p = o?.type === "group", P = !v && !u && I && p, D = p && "sortable" in e && e.sortable, Ie = I && ("childrenSortable" in e && e.childrenSortable || D) && Ee(e), Ae = u ? (s?.filter(($) => !$.hidden && (oe || !$.error)).toArray() ?? []).map(($) => Ve({ ...i, item: $, parent: e, parentTitles: t })) : null;
    (u || P) && (K = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${b ?? r} .displayMode=${S} .dragEnabled=${Ie} .group=${p ? b : `${b}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${h}>${Ae}${J}</calcite-list>`);
  }
  let E = null;
  if (e.error) {
    const t = "layerError" in n ? n.layerError : n.tableError;
    E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${t}</div></calcite-notice></div>`;
  } else "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${ee(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
  const Q = Re(e), k = e.actionsSections.reduce((t, s) => t + s.length, 0), W = ke(Q), be = Q.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((s) => ae(i, s, !0))}</calcite-action-group>`), ye = (t) => {
    e.actionsOpen = t.currentTarget.open;
  };
  let X = null;
  k > 1 && (X = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${ye}><calcite-action .aria=${{
    expanded: e.actionsOpen ?? !1,
    hasPopup: "true"
  }} icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${be}</calcite-action-menu>`);
  let w = null;
  k === 1 && W ? w = ae(i, W, !1) : k > 1 && (w = X);
  const ve = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${y} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${y} (${n.layerInvisibleAtScale})` : y, fe = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, he = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
  return queueMicrotask(() => {
    Oe(g.value ?? null, e, $e, ge), M.value && (i.handleTooltipReferenceChange?.(A?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(A?.uid, null))), e.panel && (e.panel.container = g.value);
  }), Y(e.uid, c`<calcite-list-item class=${d(F(a.item, "itemActive" in a && { [a.itemActive]: de?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || fe} id=${A?.uid ?? r} .label=${y} .metadata=${{ parentTitles: G ?? [], _title: y }} .expanded=${"open" in e && e.open} .selected=${h !== "none" ? re.includes(e) : !1} title=${ve ?? r} .unavailable=${he} .value=${e} @focusin=${() => {
    R?.(e), g.value?.classList.add(a.itemActive);
  }} @focusout=${() => {
    V?.(), g.value?.classList.remove(a.itemActive);
  }} @mouseover=${() => {
    R?.(e), g.value?.classList.add(a.itemActive);
  }} @mouseleave=${() => {
    V?.(), g.value?.classList.remove(a.itemActive);
  }} @calciteListItemSelect=${(t) => {
    t.target === t.currentTarget && "visible" in e && we(t.currentTarget, i.operationalItems) === e && h === "none" && O(l) !== "inherited" && ie(e, l);
  }} @calciteListItemToggle=${(t) => {
    "open" in e && (t.stopPropagation(), e.open = t.target.expanded);
  }} ${ee(g)}>${N}${_}${H}${q}${z}${U}${K}${E}${j}${B}${w}</calcite-list-item>`);
}
export {
  Ve as ArcgisLayerListItem
};