@arcgis/map-components/dist/components/arcgis-link-chart-layout-switcher/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as h } from "../../chunks/runtime.js";
import { html as i } from "lit";
import d from "@arcgis/core/widgets/LinkChartLayoutSwitcher/LinkChartLayoutSwitcherViewModel.js";
import { usePropertyChange as m } from "@arcgis/lumina/controllers";
import { m as g } from "../../chunks/useViewModel.js";
import { u as p } from "../../chunks/useT9n.js";
import { reEmitEvent as u } from "@arcgis/lumina/controllers/accessor";
import { LitElement as y, createEvent as w } from "@arcgis/lumina";
const e = {
  forceDirected: "organic-standard",
  community: "organic-community",
  simple: "basic-grid",
  mechanical: "hierarchical-bottom-to-top",
  radialTree: "radial-root-centric",
  smartTree: "tree-left-to-right",
  geographic: "geographic-organic-standard",
  chronologicalSingle: "chronological-mono-timeline",
  chronologicalMultiple: "chronological-multi-timeline"
}, l = {
  basicLayoutCategory: [e.simple],
  organicLayoutCategory: [
    e.forceDirected,
    e.community,
    e.geographic
  ],
  treeLayoutCategory: [e.smartTree, e.radialTree],
  hierarchicalLayoutCategory: [e.mechanical],
  chronologicalLayoutCategory: [e.chronologicalSingle, e.chronologicalMultiple]
}, s = {
  [e.forceDirected]: "force-directed-link-chart-layout",
  [e.community]: "community-link-chart-layout",
  [e.simple]: "simple-link-chart-layout",
  [e.mechanical]: "hierarchical-link-chart-layout",
  [e.radialTree]: "radial-tree-link-chart-layout",
  [e.smartTree]: "smart-tree-link-chart-layout",
  [e.geographic]: "geographic-link-chart-layout",
  [e.chronologicalSingle]: "single-timeline",
  [e.chronologicalMultiple]: "multi-timeline"
}, n = {
  [e.forceDirected]: "forceDirected",
  [e.community]: "community",
  [e.simple]: "simple",
  [e.mechanical]: "hierarchical",
  [e.radialTree]: "radialTree",
  [e.smartTree]: "smartTree",
  [e.geographic]: "geographic",
  [e.chronologicalSingle]: "chronologicalSingle",
  [e.chronologicalMultiple]: "chronologicalMultiple"
}, v = g(d);
class L extends y {
  constructor() {
    super(...arguments), this.messages = p(), this.viewModel = v(this), this.view = this.viewModel.view, this.appearance = "dropdown", this.autoDestroyDisabled = !1, this.closeOnSelectDisabled = !1, this.icon = "nodes-link", this.layout = this.viewModel.layout, this.preventExtentUpdate = this.viewModel.preventExtentUpdate, this.state = this.viewModel.state, this.arcgisSwitchLayout = u(() => this.viewModel, "switchLayout"), this.arcgisPropertyChange = m()("state"), this.arcgisReady = w();
  }
  static {
    this.properties = { view: 0, appearance: 1, autoDestroyDisabled: 5, closeOnSelectDisabled: 5, icon: 1, label: 1, layout: 32, messageOverrides: 0, preventExtentUpdate: 5, referenceElement: 1, state: 32 };
  }
  async destroy() {
    await this.manager.destroy();
  }
  async switchLayout(t) {
    this.viewModel.switchLayout(t);
  }
  _renderDropdown() {
    const { messages: t, icon: o } = this;
    return i`<calcite-dropdown scale=s width=m max-items=9 .closeOnSelectDisabled=${this.closeOnSelectDisabled}><calcite-action slot=trigger .disabled=${this.viewModel.state === "disabled"} .icon=${o ?? void 0} .label=${t.layoutOptions ?? "Layout"} scale=s .text=${t.layoutOptions ?? "Layout"}></calcite-action>${Object.entries(l).map(([c, a]) => i`<calcite-dropdown-group selection-mode=single .groupTitle=${this.messages[c]}>${a.map((r) => i`<calcite-dropdown-item .iconStart=${s[r]} .selected=${r === this.layout ? !0 : void 0} @click=${() => {
      this.switchLayout(r);
    }}>${t[n[r]]}</calcite-dropdown-item>`)}</calcite-dropdown-group>`)}</calcite-dropdown>`;
  }
  _renderMenuBar() {
    const { messages: t } = this;
    return i`<calcite-action-bar scale=s floating overflow-actions-disabled>${Object.entries(l).map(([o, c]) => i`<calcite-action-group .label=${this.messages[o]}>${c.map((a) => i`<calcite-action scale=s .icon=${s[a]} .active=${a === this.layout ? !0 : void 0} @click=${() => {
      this.switchLayout(a);
    }} .text=${t[n[a]]}></calcite-action>`)}</calcite-action-group>`)}</calcite-action-bar>`;
  }
  render() {
    const { appearance: t } = this, o = t === "menu-bar" ? this._renderMenuBar() : this._renderDropdown();
    return i`<div class="root">${o}</div>`;
  }
}
h("arcgis-link-chart-layout-switcher", L);
export {
  L as ArcgisLinkChartLayoutSwitcher
};