@arcgis/map-components
Version:
ArcGIS Map Components
65 lines (64 loc) • 4.61 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { ref as c } from "lit/directives/ref.js";
import { css as r, html as i } from "lit";
import { LitElement as h, createEvent as p, nothing as a } from "@arcgis/lumina";
import { V as o } from "../../chunks/visible-element.js";
const d = r`:host{--arcgis-unit-select-inline-size: 180px}calcite-popover[calcite-hydrated-hidden]{inset-block-start:-999999px;inset-inline-start:-999999px}.popover-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);max-width:300px}.uniform-chart-scaling-label{--calcite-label-margin-bottom: 0}.uniform-chart-scaling-checkbox-wrapper{width:var(--arcgis-unit-select-inline-size);flex-shrink:0}.slot-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.slot-content ::slotted(*){max-inline-size:100%}`;
class g extends h {
constructor() {
super(...arguments), this._onUniformChartScalingChange = (e) => {
this.arcgisElevationProfileSettingsUniformChartScalingChange.emit(e.currentTarget.checked);
}, this._onActionRef = (e) => {
this._actionElement = e ?? void 0;
}, this._popoverIsOpen = !1, this.hideDistanceDisplayUnitSelect = !1, this.hideElevationDisplayUnitSelect = !1, this.hideUniformChartScalingToggle = !1, this.hasCustomStartContent = !1, this.hasCustomEndContent = !1, this.arcgisElevationProfileSettingsUniformChartScalingChange = p();
}
static {
this.properties = { _popoverIsOpen: 16, _actionElement: 16, viewModel: 0, hideDistanceDisplayUnitSelect: 5, hideElevationDisplayUnitSelect: 5, hideUniformChartScalingToggle: 5, hasCustomStartContent: 5, hasCustomEndContent: 5, messages: 0, uniformChartScaling: 5, unitOptionsDistance: 0, unitOptionsElevation: 0 };
}
static {
this.styles = d;
}
async destroy() {
await this.manager.destroy();
}
_onPopoverClose() {
this._popoverIsOpen = !1;
}
_onPopoverOpen() {
this._popoverIsOpen = !0;
}
render() {
const { messages: e } = this;
if (!e || !this.hasCustomStartContent && !this.hasCustomEndContent && this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect && this.hideUniformChartScalingToggle)
return;
const t = (this._popoverIsOpen ? e.hideSettings : e.showSettings) ?? "";
return i`<calcite-action icon=gear .text=${t} title=${t ?? a} ${c(this._onActionRef)}></calcite-action>${this._actionElement ? i`<calcite-popover auto-close .label=${t} placement=bottom-end .referenceElement=${this._actionElement} =${this._onPopoverOpen} =${this._onPopoverClose}><div class="popover-content">${this._renderCustomContent("settings-start", this.hasCustomStartContent)}${this._renderUnitSelector()}${this._renderUniformChartScalingToggle()}${this._renderCustomContent("settings-end", this.hasCustomEndContent)}</div></calcite-popover>` : void 0}`;
}
_renderUnitSelector() {
const { viewModel: e, messages: t } = this;
if (!e || this.hideDistanceDisplayUnitSelect && this.hideElevationDisplayUnitSelect)
return;
const n = "inline-space-between";
return i`${o({ hidden: this.hideDistanceDisplayUnitSelect, children: i`<arcgis-unit-select .options=${this.unitOptionsDistance} .selectLabel=${t.unitDistanceSelectLabel} .value=${e.distanceUnit} .layout=${n} =${(s) => {
e.distanceUnit = s.detail;
}}></arcgis-unit-select>` })}${o({ hidden: this.hideElevationDisplayUnitSelect, children: i`<arcgis-unit-select .options=${this.unitOptionsElevation} .selectLabel=${t.unitElevationSelectLabel} .value=${e.elevationUnit} .layout=${n} =${(s) => {
e.elevationUnit = s.detail;
}}></arcgis-unit-select>` })}`;
}
_renderUniformChartScalingToggle() {
const { messages: e, hideUniformChartScalingToggle: t, uniformChartScaling: n } = this;
if (t)
return;
const s = e?.[n ? "uniformChartScalingDisable" : "uniformChartScalingEnable"] ?? "";
return i`<calcite-label class="uniform-chart-scaling-label" layout=inline-space-between>${e?.uniformChartScalingLabel}<div class="uniform-chart-scaling-checkbox-wrapper"><calcite-checkbox .checked=${n} title=${s ?? a} =${this._onUniformChartScalingChange}></calcite-checkbox></div></calcite-label>`;
}
_renderCustomContent(e, t) {
if (t)
return i`<div class="slot-content"><slot name=${e ?? a}></slot></div>`;
}
}
l("arcgis-elevation-profile-settings", g);
export {
g as ArcgisElevationProfileSettings
};