@arcgis/map-components
Version:
ArcGIS Map Components
129 lines (128 loc) • 8.44 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as f } from "../../chunks/runtime.js";
import { css as g, html as n } from "lit";
import { keyed as d } from "lit/directives/keyed.js";
import { ArcgisUtilityNetworkAssociationList as y } from "../arcgis-utility-network-association-list/customElement.js";
import { stripHTML as p } from "@arcgis/core/applications/Components/stringUtils.js";
import { formatNumber as w, substitute as $ } from "@arcgis/core/intl.js";
import { renderElement as h, safeClassMap as b } from "@arcgis/lumina";
import { i as m } from "../../chunks/layer-utils.js";
const F = g`:host{position:relative;flex:1 1 auto}.list-item--hidden{display:none}.feature-observer{bottom:var(--calcite-spacing-xxl);position:relative;text-align:center;z-index:2}.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}.notice-container{margin-bottom:var(--calcite-spacing-xs)}`, _ = "nested";
class A extends y {
constructor() {
super(...arguments), this.autoDestroyDisabled = !1, this.displayCount = 3, this.useFeatureNextFlowItem = !1, this.flowType = "feature-utility-network-association-type";
}
static {
this.properties = { autoDestroyDisabled: 5, description: 1, displayCount: 9, endIndex: 32, flowItems: 0, useFeatureNextFlowItem: 5, flowType: 1, heading: 1, map: 0, referenceElement: 1, spatialReference: 0, timeZone: 1, view: 0 };
}
static {
this.styles = F;
}
get endIndex() {
const { currentFeaturePage: e, featuresPerPage: t, maxFeatureCount: s } = this;
return Math.min(e * t, s);
}
async destroy() {
await this.manager.destroy();
}
_featureViewModelMatch(e, t) {
const s = e.graphic, i = s?.layer;
let o = null;
m(i) && i.parent ? o = i.parent.globalIdField ?? null : i && "globalIdField" in i && (o = i.globalIdField);
const l = o ? s?.getAttribute(o) : null, r = t.graphic, a = r?.layer;
let c = null;
m(a) && a.parent ? c = a.parent.globalIdField ?? null : a && "globalIdField" in a && (c = a.globalIdField);
const u = c ? r?.getAttribute(c) : null;
return !!(l && u && l === u);
}
_findFlowItem(e) {
return this.flowItems?.findIndex((t) => {
if (t.flowType !== "feature-association")
return !1;
const s = t.viewModel;
return this._featureViewModelMatch(s, e);
}) ?? -1;
}
_formatPercentAlong(e) {
const { percentAlong: t } = e;
return t == null ? "" : w(t, {
style: "percent",
maximumFractionDigits: 2
});
}
async _handleFeatureClick(e, t, s) {
const { flowItems: i } = this;
if (e) {
i?.destroyAll();
return;
}
if (t < 0 || !i) {
await this._selectAssociation(s);
return;
}
for (; i.length > t + 1; )
i.pop();
}
_isConnectivityAssociation(e) {
const { associationType: t } = e;
return t === "connectivity" || t === "junction-junction-connectivity" || t === "junction-edge-from-connectivity" || t === "junction-edge-midspan-connectivity" || t === "junction-edge-to-connectivity";
}
_isConnectivityMidspanAssociation(e) {
return e.associationType === "junction-edge-midspan-connectivity";
}
_isParentFeature(e) {
const t = this.flowItems?.getItemAt(0);
if (!t)
return !1;
const s = t.parentFeatureViewModel;
return this._featureViewModelMatch(s, e);
}
async _selectAssociation(e) {
const { flowItems: t } = this;
if (!t)
return;
const s = this.useFeatureNextFlowItem ? h(d(this.parentFeatureViewModel, n`<arcgis-feature-next .autoDestroyDisabled=${this.autoDestroyDisabled} .flowItems=${t} .flowType=${"feature-association"} .graphic=${e.graphic} .map=${this.map} .referenceElement=${this.referenceElement} show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view}></arcgis-feature-next>`)) : h(d(this.parentFeatureViewModel, n`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .flowItems=${t} .flowType=${"feature-association"} .graphic=${e.graphic} .map=${this.map} .referenceElement=${this.referenceElement} show-utility-network-content .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} .view=${this.view}></arcgis-feature>`));
t.push(s);
}
_showAllAssociations(e) {
const { flowItems: t, description: s } = this;
if (!t || !e)
return;
this.showAllEnabled = !0;
const i = e?.title ?? "";
t.push(h(n`<arcgis-feature-utility-network-association-list .autoDestroyDisabled=${this.autoDestroyDisabled} .associationViewModels=${this.associationViewModels} .description=${s} .flowItems=${t} .flowType=${this.flowType} .heading=${i} .messages=${this.messages} .parentFeatureViewModel=${this.parentFeatureViewModel} .referenceElement=${this.referenceElement} .selectedLayer=${e} .showAllEnabled=${this.showAllEnabled} .useFeatureNextFlowItem=${this.useFeatureNextFlowItem}></arcgis-feature-utility-network-association-list>`));
}
render() {
const { associationViewModels: e, state: t } = this, s = this.selectedLayer?.title ?? this.messages?.noTitle ?? "";
return n`<div class="root">${t === "loading" || t === "querying" ? this._renderLoading() : n`<calcite-list .displayMode=${_} .filterEnabled=${this.showAllEnabled && !!this.selectedLayer} .filterLabel=${this.messages?.associationFilterPlaceholder} .filterPlaceholder=${this.messages?.associationFilterPlaceholder} .label=${s}>${this.showAllEnabled && this.selectedLayer ? n`${this._renderFeatureCountWarning()}${this._renderAssociatedFeatureListPage()}${this._renderFeatureObserver()}` : Array.from(e.keys(), (i) => this._renderTypeList(i))}</calcite-list>`}</div>`;
}
_renderAssociatedFeature(e) {
const { featureViewModel: t, title: s } = e, i = this.state === "loading", o = this._findFlowItem(t), l = o < 0 && this._isParentFeature(t), r = l || o >= 0, a = `associated-feature-${e.association.globalId}`;
return n`<calcite-list-item class=${b(i ? "list-item--hidden" : "")} .description=${p(e.terminalName ?? "")} .label=${p(s)} =${async () => await this._handleFeatureClick(l, o, t)}>${this._isConnectivityAssociation(e.association) ? this._renderConnectivityIcon(e.association.associationType, a) : null}${this._isConnectivityMidspanAssociation(e.association) ? n`<calcite-chip .label=${this._formatPercentAlong(e.association)} scale=s slot=content-end>${this._formatPercentAlong(e.association)}</calcite-chip>` : null}${this._renderChevronIconNode(r)}</calcite-list-item>`;
}
_renderAssociatedFeatureList(e) {
return e.toArray().map((t) => this._renderAssociatedFeature(t));
}
_renderAssociatedFeatureListPage() {
const e = this.associationViewModels.get(this.selectedLayer).slice(0, this.endIndex);
return [...this._renderTooltips(e), ...this._renderAssociatedFeatureList(e)];
}
_renderChevronIconNode(e) {
return n`<calcite-icon flip-rtl .icon=${e ? "move-up" : "chevron-right"} scale=s slot=content-end></calcite-icon>`;
}
_renderItemTooltip(e) {
const { tooltipReferenceMap: t } = this, s = `associated-feature-${e.association.globalId}`;
return this._isConnectivityAssociation(e.association) ? n`<calcite-tooltip overlay-positioning=fixed .referenceElement=${t.get(s)}>${this.getConnectivityTooltip(e.association.associationType)}</calcite-tooltip>` : null;
}
_renderTypeList(e) {
const { messages: t } = this, { displayCount: s } = this, i = this.associationViewModels.get(e), o = i.slice(0, s), l = o.length < i.length, r = $(t?.numberRecords ?? "", { number: i.length.toString() }), a = t?.showAll ?? "";
return d("show-all", n`<calcite-list-item expanded .label=${e.title} .value=${e.id}><calcite-chip .label=${String(i.length)} scale=s slot=content-end>${i.length}</calcite-chip><calcite-list .group=${e.id} .label=${e.title ?? ""}>${[this._renderTooltips(o), this._renderAssociatedFeatureList(o)]}${l ? d("show-all-item", n`<calcite-list-item .description=${r} .label=${a} =${() => this._showAllAssociations(e)}><calcite-icon icon=list scale=s slot=content-end></calcite-icon></calcite-list-item>`) : null}</calcite-list></calcite-list-item>`);
}
_renderTooltips(e) {
return e.toArray().map((t) => this._renderItemTooltip(t));
}
}
f("arcgis-feature-utility-network-association-list", A);
export {
A as ArcgisFeatureUtilityNetworkAssociationList
};