import { c as l } from "../../chunks/runtime.js";
import { css as d, html as i } from "lit";
import { watch as o } from "@arcgis/core/core/reactiveUtils.js";
import { substitute as g } from "@arcgis/core/intl.js";
import { LitElement as h, safeClassMap as a } from "@arcgis/lumina";
import { classes as m } from "@arcgis/toolkit/dom";
import { H as f } from "../../chunks/heading.js";
import { g as _ } from "../../chunks/globalCss.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const v = d`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.arcgis-legend--card__message{padding:.5em 1em}.arcgis-legend--card__service-caption-text{margin:0}.arcgis-legend--card__service-content{display:flex;flex:1}.arcgis-legend--card__service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.arcgis-legend--card__service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:fit-content;display:flex;flex-direction:column;flex:1}.arcgis-legend--card__service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, n = {
  message: "arcgis-legend--card__message",
  serviceCaptionText: "arcgis-legend--card__service-caption-text",
  serviceContent: "arcgis-legend--card__service-content",
  service: "arcgis-legend--card__service",
  serviceCaptionContainer: "arcgis-legend--card__service-caption-container"
}, u = 768;
class p extends h {
  constructor() {
    super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
  }
  static {
    this.properties = { stacked: 16, activeLayerInfos: 0, headingLevel: 9, messages: 0, view: 0, layout: 1, type: 32 };
  }
  static {
    this.styles = v;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      o(() => [this.layout, this.view.width], () => {
        this.stacked = this.layout === "stack" || (!this.layout || this.layout === "auto") && this.view.width <= u;
      }, { initial: !0 })
    ]);
  }
  render() {
    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class=${a(n.message)}>${this.messages.noLegend}</div>`;
  }
  _renderTitle(e) {
    return i`<div class=${a(n.serviceCaptionContainer)}>${f({ class: m(n.serviceCaptionText, _.heading), level: this.headingLevel, children: e })}</div>`;
  }
  _renderCarousel() {
    const e = [], t = this.activeLayerInfos;
    if (t)
      for (const s of t)
        this._renderSections(s, e);
    return e?.length ? i`<calcite-carousel .label=${this.messages.carousel ?? ""}>${e.map((s, r) => i`<calcite-carousel-item .label=${g(this.messages?.pagination?.pageText ?? "", {
      index: r + 1,
      total: e.length
    })}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
  }
  _renderLayers() {
    const t = this.activeLayerInfos?.toArray()?.map((s) => this._renderLegendForLayer(s)).filter(Boolean);
    return t?.length ? t : null;
  }
  _renderLegendForLayer(e) {
    if (!e.ready)
      return null;
    if (e.children.length) {
      const t = e.children.toArray().map(this._renderLegendForLayer, this);
      return i`<section class=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${t}</div></section>`;
    }
    return this._renderLegendElementsForLayer(e);
  }
  _renderLegendElementsForLayer(e) {
    const t = e.legendElements?.filter(Boolean);
    if (!t?.length)
      return null;
    const s = t.map((r) => i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`);
    return i`<section class=${a(n.service)}>${this._renderTitle(e.title)}<div class=${a(n.serviceContent)}>${s}</div></section>`;
  }
  _renderSections(e, t) {
    if (!e.ready)
      return;
    if (e.children.length)
      for (const r of e.children)
        this._renderSections(r, t);
    const s = e.legendElements;
    if (s?.length)
      for (const r of s) {
        const c = i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`;
        c && t.push(c);
      }
  }
}
l("arcgis-legend-card-view", p);
export {
  p as LegendCardView
};
