@arcgis/map-components
Version:
ArcGIS Map Components
72 lines (71 loc) • 4.32 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as a, html as i } from "lit";
import n from "@arcgis/core/views/interactive/sketch/SketchOptions.js";
import { LitElement as c, nothing as r } from "@arcgis/lumina";
import { usePropertyChange as d } from "@arcgis/lumina/controllers";
import { u as h } from "../../chunks/useT9n.js";
import { V as s } from "../../chunks/visible-element.js";
const b = a`.root{display:flex;flex-flow:column wrap;min-width:100%;& calcite-label:last-child{--calcite-label-margin-bottom: 0}}.block{border-block-end:none;margin:0}.block-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-xs, 6px)}.radio-button-label-wrapper{align-items:center;display:flex;gap:var(--calcite-space-base, 2px)}`;
class p extends c {
constructor() {
super(...arguments), this.messages = h({ blocking: !0 }), this.showHeader = !1, this.hideTooltipsToggle = !1, this.hideLabelsToggle = !1, this.showDirectionModePicker = !1, this.sketchOptions = new n(), this.arcgisPropertyChange = d()("tooltipsEnabled", "labelsEnabled", "directionMode");
}
static {
this.properties = { _hasContent: 32, showHeader: 5, label: 1, hideTooltipsToggle: 5, hideLabelsToggle: 5, showDirectionModePicker: 5, sketchOptions: 0, tooltipsEnabled: 5, labelsEnabled: 5, directionMode: 1 };
}
static {
this.styles = b;
}
get _hasContent() {
return !this.hideTooltipsToggle || !this.hideLabelsToggle || this.showDirectionModePicker;
}
get tooltipsEnabled() {
return this.sketchOptions.tooltips.enabled;
}
set tooltipsEnabled(e) {
this.sketchOptions.tooltips.enabled = e;
}
get labelsEnabled() {
return this.sketchOptions.labels.enabled;
}
set labelsEnabled(e) {
this.sketchOptions.labels.enabled = e;
}
get directionMode() {
return this.sketchOptions.values.directionMode;
}
set directionMode(e) {
this.sketchOptions.values.directionMode = e;
}
_onDirectionModeChange(e) {
this.sketchOptions.values.directionMode = e.currentTarget.selectedItem?.value;
}
render() {
const { label: e, messages: t } = this, o = e ?? t.componentLabel;
return i`<div aria-label=${o ?? r} class="root">${this._hasContent ? i`<calcite-block class="block" expanded .heading=${this.showHeader ? e : ""} .label=${o ?? ""}><div class="block-content">${s({ hidden: this.hideTooltipsToggle, children: this._renderTooltipsToggle() })}${s({ hidden: this.hideLabelsToggle, children: this._renderLabelsToggle() })}${s({ hidden: !this.showDirectionModePicker, children: this._renderDirectionModePicker() })}</div></calcite-block>` : void 0}</div>`;
}
_renderTooltipsToggle() {
const { messages: e } = this;
return i`<arcgis-labeled-switch .checked=${this.sketchOptions.tooltips.effectiveEnabled} .hint=${e.tooltipsToggleHint} .label=${e.tooltipsToggle} =${(t) => {
this.sketchOptions.tooltips.enabled = t.detail;
}} .disabled=${this.sketchOptions.tooltips.forceEnabled}></arcgis-labeled-switch>`;
}
_renderLabelsToggle() {
const { messages: e } = this;
return i`<arcgis-labeled-switch .checked=${this.sketchOptions.labels.enabled} .hint=${e.labelsToggleHint} .label=${e.labelsToggle} =${(t) => {
this.sketchOptions.labels.enabled = t.detail;
}}></arcgis-labeled-switch>`;
}
_renderDirectionModePicker() {
const { messages: e } = this, { directionMode: t } = this.sketchOptions.values;
return i`<calcite-label layout=default scale=s>${e.directionModePicker}<calcite-radio-button-group name=direction-mode layout=horizontal scale=s =${this._onDirectionModeChange}>${this._renderDirectionModeOption("relative", t, e.directionModeRelative)}${this._renderDirectionModeOption("absolute", t, e.directionModeAbsolute)}</calcite-radio-button-group></calcite-label>`;
}
_renderDirectionModeOption(e, t, o) {
return i`<calcite-label layout=inline scale=s><calcite-radio-button .checked=${e === t} scale=s .value=${e}></calcite-radio-button><div class="radio-button-label-wrapper"><calcite-icon .icon=${`${e}-direction`} scale=s></calcite-icon>${o}</div></calcite-label>`;
}
}
l("arcgis-sketch-tooltip-controls", p);
export {
p as ArcgisSketchTooltipControls
};