UNPKG

@arcgis/map-components

Version:
76 lines (75 loc) 3.92 kB
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */ import { c as d } from "../../chunks/runtime.js"; import { css as h, html as s } from "lit"; import { substitute as p } from "@arcgis/core/intl.js"; import { LitElement as g, createEvent as u, safeClassMap as b, safeStyleMap as f, nothing as n } from "@arcgis/lumina"; const v = h`:host{--internal-block-spacing: var(--calcite-spacing-sm-plus);--internal-inline-spacing: var(--calcite-spacing-md);--internal-collapse-toggle-size: 32px;--internal-color-indicator-width: 3px;--internal-opacity-disabled: .4}.container{position:relative;background:var(--calcite-color-foreground-2)}.disabled{filter:grayscale(1);opacity:var(--internal-opacity-disabled)}.color-indicator{position:absolute;inset-inline-start:0;top:0;width:var(--internal-color-indicator-width);height:100%}.header{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.content{display:block;padding:var(--internal-block-spacing) var(--internal-inline-spacing);padding-top:0}.collapse-toggle{flex-shrink:0;width:var(--internal-collapse-toggle-size);height:var(--internal-collapse-toggle-size)}.label{--calcite-label-margin-bottom: 0;flex-grow:1;flex-shrink:1;padding-inline-start:var(--internal-inline-spacing);min-width:0}`; class m extends g { constructor() { super(...arguments), this.expanded = !1, this.featureSelected = !1, this.hideCheckbox = !1, this.arcgisExpandedToggle = u(); } static { this.properties = { effectiveDisplayUnits: 0, expanded: 5, featureSelected: 5, hideCheckbox: 5, messages: 0, result: 0 }; } static { this.styles = v; } async destroy() { await this.manager.destroy(); } render() { return s`<div class=${b({ container: !0, expanded: this.expanded, disabled: this._disabled })}>${this._renderColorIndicator()}<div class="header">${this._renderLabelWithCheckbox()}${this._renderCollapseToggleButton()}</div>${this.expanded ? this._renderStatistics() : void 0}</div>`; } _renderColorIndicator() { return s`<div class="color-indicator" style=${f({ backgroundColor: this.result.profile.color.toCss() })}></div>`; } _renderCollapseToggleButton() { const { expanded: e, messages: t } = this, i = t[e ? "hideDetails" : "showDetails"] ?? ""; return s`<calcite-action class="collapse-toggle" .icon=${e ? "chevron-up" : "chevron-down"} @click=${() => this.arcgisExpandedToggle.emit(this.result.profile)} .text=${i} title=${i ?? n}></calcite-action>`; } _renderLabelWithCheckbox() { const { result: e, hideCheckbox: t, messages: i } = this; return s`<calcite-label class="label" layout=inline>${t ? void 0 : this._renderCheckbox()}${r(e, i)}</calcite-label>`; } _renderCheckbox() { const { result: e, messages: t } = this, { profile: i } = e, l = i.enabled, c = t[l ? "hideProfile" : "showProfile"] ?? "", o = p(c, { name: r(e, t) }); return s`<calcite-checkbox .checked=${l} class="checkbox" title=${o ?? n} .disabled=${this._disabled} @calciteCheckboxChange=${() => { i.enabled = !i.enabled; }}></calcite-checkbox>`; } _renderStatistics() { return s`<div class="content"><arcgis-elevation-profile-statistics .messages=${this.messages} .result=${this._disabled ? void 0 : this.result} .effectiveDisplayUnits=${this.effectiveDisplayUnits}></arcgis-elevation-profile-statistics></div>`; } get _disabled() { return !this.featureSelected && this.result.profile.type === "input"; } } function r({ profile: a }, { profiles: e }) { const t = a.title; if (t != null) return t; if (!e) return ""; switch (a.type) { case "ground": return e.ground; case "input": return e.input; case "query": return e.query; case "scene": return e.scene; default: return ""; } } d("arcgis-elevation-profile-legend-item", m); export { m as ArcgisElevationProfileLegendItem };