@arcgis/map-components 5.2.0-next.74 → 5.2.0-next.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/3MDNGD5N.js +2 -0
- package/dist/cdn/4RYR4YDD.js +2 -0
- package/dist/cdn/{Y52XLS45.js → 4ULHWCEQ.js} +1 -1
- package/dist/cdn/{4IYAEXT6.js → 5AQ2DLHA.js} +1 -1
- package/dist/cdn/5GD232OU.js +2 -0
- package/dist/cdn/6C542P4V.js +2 -0
- package/dist/cdn/6XJLNNXF.js +2 -0
- package/dist/cdn/AYJ4XEW3.js +2 -0
- package/dist/cdn/BZZONX7U.js +2 -0
- package/dist/cdn/CO4UDHQO.js +5 -0
- package/dist/cdn/DXRIB5HU.js +2 -0
- package/dist/cdn/{AXEUVRDP.js → GYD6SJRD.js} +1 -1
- package/dist/cdn/HSRSC5A3.js +2 -0
- package/dist/cdn/KKN5ZNLH.js +2 -0
- package/dist/cdn/LCWKOR7D.js +2 -0
- package/dist/cdn/LFEMVA6D.js +2 -0
- package/dist/cdn/LWGNINKF.js +2 -0
- package/dist/cdn/{6T4SNDWL.js → N7YPGWHZ.js} +1 -1
- package/dist/cdn/NAW2XY64.js +2 -0
- package/dist/cdn/{RNUWRSX7.js → NESU6NXH.js} +1 -1
- package/dist/cdn/NVYQR4DS.js +2 -0
- package/dist/cdn/QO6WDURE.js +2 -0
- package/dist/cdn/RIZHD5EC.js +2 -0
- package/dist/cdn/UYF6TF6U.js +2 -0
- package/dist/cdn/WD25DNJL.js +2 -0
- package/dist/cdn/assets/utility-network-aggregated-geometry-result-item/t9n/messages.en.json +1 -0
- package/dist/cdn/assets/utility-network-trace-results-next/t9n/messages.en.json +1 -1
- package/dist/cdn/assets/utility-network-validate-network-topology/t9n/messages.en.json +1 -1
- package/dist/cdn/index.js +1 -1
- package/dist/cdn/main.css +1 -1
- package/dist/chunks/titleUtils.js +40 -0
- package/dist/chunks/utils2.js +36 -71
- package/dist/components/arcgis-feature-table/customElement.js +1 -1
- package/dist/components/arcgis-layer-list/customElement.js +1 -1
- package/dist/components/arcgis-legend/customElement.js +1 -1
- package/dist/components/arcgis-legend-card-element/customElement.js +34 -33
- package/dist/components/arcgis-legend-card-univariate-above-and-below-ramp/customElement.js +11 -11
- package/dist/components/arcgis-legend-card-univariate-color-size-ramp/customElement.js +9 -9
- package/dist/components/arcgis-legend-card-view/customElement.js +1 -1
- package/dist/components/arcgis-legend-classic-color-ramp/customElement.js +15 -15
- package/dist/components/arcgis-legend-classic-element/customElement.js +39 -35
- package/dist/components/arcgis-legend-classic-size-ramp/customElement.js +5 -4
- package/dist/components/arcgis-legend-classic-univariate-above-and-below-ramp/customElement.js +6 -6
- package/dist/components/arcgis-legend-classic-univariate-color-size-ramp/customElement.js +3 -3
- package/dist/components/arcgis-legend-classic-view/customElement.js +41 -18
- package/dist/components/arcgis-legend-relationship-ramp/customElement.js +8 -8
- package/dist/components/arcgis-legend-spike-ramp/customElement.js +13 -13
- package/dist/components/arcgis-scene/customElement.d.ts +1 -0
- package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.d.ts +105 -0
- package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.js +125 -0
- package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/index.js +5 -0
- package/dist/components/arcgis-utility-network-trace-analysis-next/customElement.d.ts +6 -0
- package/dist/components/arcgis-utility-network-trace-analysis-next/customElement.js +9 -9
- package/dist/components/arcgis-utility-network-trace-analysis-next/types.d.ts +5 -4
- package/dist/components/arcgis-utility-network-trace-results-next/customElement.d.ts +4 -25
- package/dist/components/arcgis-utility-network-trace-results-next/customElement.js +86 -86
- package/dist/components/arcgis-utility-network-trace-results-next/index.js +1 -4
- package/dist/components/arcgis-utility-network-validate-network-topology/customElement.d.ts +19 -0
- package/dist/components/arcgis-utility-network-validate-network-topology/customElement.js +129 -86
- package/dist/docs/api.json +1 -1
- package/dist/docs/docs.json +1 -1
- package/dist/docs/vscode.html-custom-data.json +1 -1
- package/dist/docs/web-types.json +1 -1
- package/dist/index.d.ts +7 -7
- package/dist/loader.js +3 -3
- package/dist/types/lumina.d.ts +6 -5
- package/dist/types/preact.d.ts +7 -6
- package/dist/types/react.d.ts +8 -7
- package/dist/types/stencil.d.ts +6 -5
- package/package.json +5 -5
- package/dist/cdn/2O6GHHUY.js +0 -2
- package/dist/cdn/7THMBHKF.js +0 -2
- package/dist/cdn/A6CH2UFJ.js +0 -2
- package/dist/cdn/AZSWPMSD.js +0 -2
- package/dist/cdn/CQV2TQUQ.js +0 -2
- package/dist/cdn/D75QAAQT.js +0 -5
- package/dist/cdn/GG4ZP72A.js +0 -2
- package/dist/cdn/GOIKNGEI.js +0 -2
- package/dist/cdn/HZR3HENL.js +0 -2
- package/dist/cdn/IIYUVBKU.js +0 -2
- package/dist/cdn/KUR5PBEN.js +0 -2
- package/dist/cdn/LIEZSWE4.js +0 -2
- package/dist/cdn/MOOIQJP4.js +0 -2
- package/dist/cdn/NJ4CBOJN.js +0 -2
- package/dist/cdn/SWDOEOEG.js +0 -2
- package/dist/cdn/TZTJY3L5.js +0 -2
- package/dist/cdn/X3TEGOBL.js +0 -2
- package/dist/cdn/XLAW24IV.js +0 -2
- package/dist/cdn/ZMLP2ZB4.js +0 -2
- package/dist/cdn/assets/utility-network-aggregated-geometry-next/t9n/messages.en.json +0 -1
- package/dist/components/arcgis-utility-network-aggregated-geometry-next/customElement.d.ts +0 -63
- package/dist/components/arcgis-utility-network-aggregated-geometry-next/customElement.js +0 -109
- package/dist/components/arcgis-utility-network-aggregated-geometry-next/index.js +0 -2
- /package/dist/components/{arcgis-utility-network-aggregated-geometry-next → arcgis-utility-network-aggregated-geometry-result-item}/index.d.ts +0 -0
|
@@ -4,8 +4,8 @@ import { css as w, html as l } from "lit";
|
|
|
4
4
|
import { LitElement as u, safeStyleMap as i } from "@arcgis/lumina";
|
|
5
5
|
import { useDirection as x } from "@arcgis/lumina/controllers";
|
|
6
6
|
import { e as R, a as z, b as $, c as E, d as S } from "../../chunks/univariateUtils.js";
|
|
7
|
-
const C = w`.layer-row,.symbol{display:flex;align-items:center}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-
|
|
8
|
-
class
|
|
7
|
+
const C = w`.layer-row,.symbol{display:flex;align-items:center}.symbol-container{position:relative}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.layer-cell{padding:var(--calcite-space-2xs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.univariate-color-ramp-card{position:relative}.univariate-color-ramp-card:before{content:"";border-left:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-surface-1);width:100%;height:15px;display:block;position:absolute;top:var(--calcite-border-width-sm)}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
|
|
8
|
+
class L extends u {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments), this._direction = x(), this.legendElement = null, this.opacity = 1;
|
|
11
11
|
}
|
|
@@ -19,18 +19,18 @@ class k extends u {
|
|
|
19
19
|
const { legendElement: s, opacity: n } = this, { sizeRampElement: e, colorRampElement: c } = R(s, this.messages, "horizontal");
|
|
20
20
|
if (!e)
|
|
21
21
|
return null;
|
|
22
|
-
const m = z(e, "full", !1, "horizontal"),
|
|
23
|
-
width:
|
|
22
|
+
const m = z(e, "full", !1, "horizontal"), p = $(e, "full", !1, "horizontal"), d = E(c, {
|
|
23
|
+
width: p,
|
|
24
24
|
height: 12,
|
|
25
25
|
rampAlignment: "horizontal",
|
|
26
26
|
opacity: n,
|
|
27
27
|
type: "full",
|
|
28
28
|
cssEffectFilter: this.cssEffectFilter,
|
|
29
29
|
ariaLabel: this.messages?.previewColorRampAriaLabel
|
|
30
|
-
}), r = S(e, "card"), f = e.infos.length - 1, v = e.infos.map((a, o) => o === 0 || o === f ? l`<div>${a.label}</div>` : null),
|
|
30
|
+
}), r = S(e, "card"), f = e.infos.length - 1, v = e.infos.map((a, o) => o === 0 || o === f ? l`<div>${a.label}</div>` : null), y = {
|
|
31
31
|
display: "flex",
|
|
32
32
|
flexDirection: "column"
|
|
33
|
-
},
|
|
33
|
+
}, g = {
|
|
34
34
|
display: "flex",
|
|
35
35
|
flexDirection: "row"
|
|
36
36
|
}, t = {
|
|
@@ -44,10 +44,10 @@ class k extends u {
|
|
|
44
44
|
flexDirection: "row",
|
|
45
45
|
justifyContent: "space-between"
|
|
46
46
|
};
|
|
47
|
-
return l`<div class="layer-row" style=${i(
|
|
47
|
+
return l`<div class="layer-row" style=${i(y)}><div class="symbol-container" style=${i(g)}>${e.infos.map((a) => l`<div class="symbol">${a.preview}</div>`)}</div><div class="univariate-color-ramp-card" style=${i(t)}><div>${d}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${i(h)}>${v}</div></div></div>`;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
b("arcgis-legend-card-univariate-color-size-ramp",
|
|
50
|
+
b("arcgis-legend-card-univariate-color-size-ramp", L);
|
|
51
51
|
export {
|
|
52
|
-
|
|
52
|
+
L as LegendCardUnivariateColorSizeRamp
|
|
53
53
|
};
|
|
@@ -7,7 +7,7 @@ import { LitElement as d } from "@arcgis/lumina";
|
|
|
7
7
|
import { classes as h } from "@arcgis/toolkit/dom";
|
|
8
8
|
import { H as g } from "../../chunks/heading.js";
|
|
9
9
|
import { g as m } from "../../chunks/globalCss.js";
|
|
10
|
-
const f = a`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-
|
|
10
|
+
const f = a`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-space-md)}`, u = 768;
|
|
11
11
|
class v extends d {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
2
|
import { c as r } from "../../chunks/runtime.js";
|
|
3
|
-
import { css as
|
|
4
|
-
import { LitElement as
|
|
5
|
-
import { s as
|
|
6
|
-
const m =
|
|
7
|
-
class d extends
|
|
3
|
+
import { css as s, html as l } from "lit";
|
|
4
|
+
import { LitElement as i, safeStyleMap as c, safeClassMap as o } from "@arcgis/lumina";
|
|
5
|
+
import { s as p, a as n } from "../../chunks/utils2.js";
|
|
6
|
+
const m = s`.layer-row{display:flex}.layer-cell{padding:var(--calcite-space-2xs) 0;vertical-align:middle;word-break:break-word}.layer-cell-symbols{text-align:center}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.color-ramp{width:24px}.opacity-ramp{background-image:url(data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAHgAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgQAMAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAAAmbWRhdBIACggYCL/kgIaDQjIQGAAAAEBAA1LuL7oS8L0QEA==)}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:var(--calcite-font-size-sm);white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}.layer-caption{display:table-caption;padding:var(--calcite-space-sm) 0}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}`;
|
|
7
|
+
class d extends i {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments), this.legendElement = null, this.opacity = 1;
|
|
10
10
|
}
|
|
@@ -18,20 +18,20 @@ class d extends s {
|
|
|
18
18
|
const e = this.legendElement.preview;
|
|
19
19
|
if (!e)
|
|
20
20
|
return null;
|
|
21
|
-
const
|
|
22
|
-
e.className = `color-ramp ${
|
|
23
|
-
const t =
|
|
24
|
-
return
|
|
21
|
+
const A = this.legendElement.type === "opacity-ramp", a = A ? "opacity-ramp" : "";
|
|
22
|
+
e.className = `color-ramp ${a}`, this.opacity != null && (e.style.opacity = this.opacity.toString());
|
|
23
|
+
const t = A ? this.messages.previewOpacityRampAriaLabel : this.messages.previewColorRampAriaLabel;
|
|
24
|
+
return p(e, t), e;
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
const { legendElement: e, _preview:
|
|
28
|
-
if (!
|
|
27
|
+
const { legendElement: e, _preview: A } = this;
|
|
28
|
+
if (!A)
|
|
29
29
|
return null;
|
|
30
|
-
const
|
|
31
|
-
return l`<div class="layer-row"><div class="layer-cell layer-cell-symbols"><div class="ramps">${
|
|
30
|
+
const a = { height: A.style.height };
|
|
31
|
+
return l`<div class="layer-row"><div class="layer-cell layer-cell-symbols"><div class="ramps">${A}</div></div><div class="layer-cell layer-cell-info"><div class="ramp-labels" style=${c(a)}>${e.infos.map((t) => this._renderRampLabel(t, e.type))}</div></div></div>`;
|
|
32
32
|
}
|
|
33
|
-
_renderRampLabel(e,
|
|
34
|
-
return l`<div class=${
|
|
33
|
+
_renderRampLabel(e, A) {
|
|
34
|
+
return l`<div class=${o(e.label ? "ramp-label" : void 0)}>${n(e, A, this.messages)}</div>`;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
r("arcgis-legend-classic-color-ramp", d);
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
|
-
import { c as
|
|
3
|
-
import { css as
|
|
4
|
-
import { LitElement as u, safeClassMap as
|
|
5
|
-
import { classes as
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { c as w } from "../../chunks/runtime.js";
|
|
3
|
+
import { css as f, html as s } from "lit";
|
|
4
|
+
import { LitElement as u, safeClassMap as m, nothing as o, safeStyleMap as $ } from "@arcgis/lumina";
|
|
5
|
+
import { classes as y } from "@arcgis/toolkit/dom";
|
|
6
|
+
import { a as E, g as p } from "../../chunks/titleUtils.js";
|
|
7
|
+
import { s as h, i as L, g as b } from "../../chunks/utils2.js";
|
|
8
|
+
const x = f`:host{contain:content}.layer-body:has(>arcgis-legend-classic-element){display:flex;flex-direction:column;gap:calc(var(--arcgis-internal-legend-layer-gap) / 2)}.layer-body arcgis-legend-classic-element{margin-inline-start:var(--arcgis-internal-legend-layer-padding)}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;word-break:break-word;font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-medium);padding-bottom:var(--calcite-space-2xs)}.layer-row{display:table-row}.layer-body:has(>.layer-row+.layer-row)>.layer-row .layer-cell{padding-block:var(--calcite-space-2xs)}.layer-cell{vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-inline-start:var(--calcite-space-xs);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.layer-cell-inline-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}`;
|
|
9
|
+
class z extends u {
|
|
9
10
|
static {
|
|
10
|
-
this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
|
|
11
|
+
this.properties = { cssEffectFilter: 1, layer: 0, inlineLayerTitle: 1, legendElement: 0, messages: 0 };
|
|
11
12
|
}
|
|
12
13
|
static {
|
|
13
|
-
this.styles =
|
|
14
|
+
this.styles = x;
|
|
14
15
|
}
|
|
15
16
|
render() {
|
|
16
|
-
const e = this._renderLegendElement(),
|
|
17
|
-
return s`<section class="layer-table">${
|
|
17
|
+
const e = this._renderLegendElement(), i = E(this.legendElement, this.messages), a = i ? s`<div class="layer-caption">${i}</div>` : null;
|
|
18
|
+
return s`<section class="layer-table">${a}${e}</section>`;
|
|
18
19
|
}
|
|
19
20
|
_renderLegendElement() {
|
|
20
21
|
switch (this.legendElement.type) {
|
|
@@ -31,7 +32,7 @@ class x extends u {
|
|
|
31
32
|
return s`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
|
|
32
33
|
case "pie-chart-ramp": {
|
|
33
34
|
const { preview: e } = this.legendElement;
|
|
34
|
-
return
|
|
35
|
+
return h(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
|
|
35
36
|
}
|
|
36
37
|
case "univariate-above-and-below-ramp":
|
|
37
38
|
return s`<arcgis-legend-classic-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-above-and-below-ramp>`;
|
|
@@ -42,41 +43,44 @@ class x extends u {
|
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
_renderSymbolTable(e) {
|
|
45
|
-
const a = e.infos.map((
|
|
46
|
+
const i = this.inlineLayerTitle && e.infos.length === 1 ? this.inlineLayerTitle : void 0, a = e.infos.map((l) => this._renderElementInfo(l, e.legendType, i)).filter(Boolean);
|
|
46
47
|
return a.length ? s`<div class="layer-body">${a}</div>` : null;
|
|
47
48
|
}
|
|
48
|
-
_renderElementInfo(e, a) {
|
|
49
|
-
const { layer:
|
|
49
|
+
_renderElementInfo(e, i, a) {
|
|
50
|
+
const { layer: l } = this, t = "label" in e ? e.label : null;
|
|
50
51
|
if ("type" in e && e.type)
|
|
51
|
-
return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${
|
|
52
|
+
return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${l} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
|
|
52
53
|
if (!("preview" in e && e.preview) && !("src" in e && e.src))
|
|
53
54
|
return null;
|
|
54
|
-
const r =
|
|
55
|
+
const r = L(l, i), d = {
|
|
55
56
|
"imagery-layer-info-stretched": r
|
|
56
|
-
}
|
|
57
|
-
return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
|
|
57
|
+
}, g = {
|
|
58
58
|
"imagery-layer-info-stretched": r
|
|
59
|
-
}
|
|
59
|
+
}, n = p(this.messages, t, !1) || "", c = !n && a ? a : "", v = {
|
|
60
|
+
"layer-cell-inline-title": !!c,
|
|
61
|
+
...d
|
|
62
|
+
};
|
|
63
|
+
return s`<div class="layer-row"><div class=${m(y("layer-cell", "layer-cell-symbols", g))}>${this._renderPreview(e, r)}</div><div class=${m(y("layer-cell", "layer-cell-info", v))}>${n || c}</div></div>`;
|
|
60
64
|
}
|
|
61
|
-
_renderPreview(e,
|
|
62
|
-
const { layer:
|
|
65
|
+
_renderPreview(e, i) {
|
|
66
|
+
const { layer: a } = this;
|
|
63
67
|
if ("preview" in e && e.preview) {
|
|
64
|
-
const { preview: l } = e,
|
|
65
|
-
return
|
|
68
|
+
const { preview: l } = e, t = "previewAriaLabel" in e ? e.previewAriaLabel : null, r = "label" in e ? p(this.messages, e.label, !1) : null;
|
|
69
|
+
return h(l, b(this.messages, t || r)), s`<div class="symbol">${l}</div>`;
|
|
66
70
|
}
|
|
67
|
-
return "src" in e && e.src ? this._renderImage(e,
|
|
71
|
+
return "src" in e && e.src ? this._renderImage(e, a, i) : null;
|
|
68
72
|
}
|
|
69
|
-
_renderImage(e,
|
|
70
|
-
const { previewAriaLabel: l, src:
|
|
71
|
-
"imagery-layer-stretched-image":
|
|
72
|
-
symbol: !
|
|
73
|
-
},
|
|
74
|
-
opacity: `${
|
|
75
|
-
},
|
|
76
|
-
return s`<img alt=${
|
|
73
|
+
_renderImage(e, i, a) {
|
|
74
|
+
const { previewAriaLabel: l, src: t, opacity: r } = e, d = p(this.messages, e.label, !1), g = {
|
|
75
|
+
"imagery-layer-stretched-image": a,
|
|
76
|
+
symbol: !a
|
|
77
|
+
}, n = {
|
|
78
|
+
opacity: `${r ?? i.opacity}`
|
|
79
|
+
}, c = b(this.messages, l || d);
|
|
80
|
+
return s`<img alt=${c ?? o} .ariaLabel=${c} class=${m(y(g))} height=${e.height ?? void 0 ?? o} src=${t ?? o} style=${$(n)} width=${e.width ?? void 0 ?? o}>`;
|
|
77
81
|
}
|
|
78
82
|
}
|
|
79
|
-
|
|
83
|
+
w("arcgis-legend-classic-element", z);
|
|
80
84
|
export {
|
|
81
|
-
|
|
85
|
+
z as ArcgisLegendClassicElement
|
|
82
86
|
};
|
|
@@ -3,8 +3,9 @@ import { c as t } from "../../chunks/runtime.js";
|
|
|
3
3
|
import { css as n, html as i } from "lit";
|
|
4
4
|
import { LitElement as m, safeClassMap as r } from "@arcgis/lumina";
|
|
5
5
|
import { classes as l } from "@arcgis/toolkit/dom";
|
|
6
|
-
import {
|
|
7
|
-
|
|
6
|
+
import { g as o } from "../../chunks/titleUtils.js";
|
|
7
|
+
import { s as c, g as p } from "../../chunks/utils2.js";
|
|
8
|
+
const d = n`.size-ramp-container{display:table}.size-ramp-row{display:table-row}.size-ramp-row:not(:last-child) .size-ramp-cell,.size-ramp-row:not(:last-child) .size-ramp-label{padding-bottom:var(--calcite-space-xs)}.size-ramp-cell{min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.size-ramp-label{padding-inline-start:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.size-ramp-symbol-container{min-width:10px;text-align:center}.size-ramp-symbol{display:flex;justify-content:center}`;
|
|
8
9
|
class g extends m {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments), this.legendElement = null;
|
|
@@ -23,8 +24,8 @@ class g extends m {
|
|
|
23
24
|
const { preview: s } = e;
|
|
24
25
|
if (!s)
|
|
25
26
|
return null;
|
|
26
|
-
const a =
|
|
27
|
-
return
|
|
27
|
+
const a = o(this.messages, e.label, !1);
|
|
28
|
+
return c(s, p(this.messages, a)), i`<div class="size-ramp-row"><div class=${r(l("size-ramp-cell", "size-ramp-symbol-container"))}><div class="size-ramp-symbol">${s}</div></div><div class=${r(l("size-ramp-cell", "size-ramp-label"))}>${a}</div></div>`;
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
t("arcgis-legend-classic-size-ramp", g);
|
package/dist/components/arcgis-legend-classic-univariate-above-and-below-ramp/customElement.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { c as k } from "../../chunks/runtime.js";
|
|
3
3
|
import { css as B, html as l } from "lit";
|
|
4
4
|
import { LitElement as F, safeClassMap as b, safeStyleMap as e } from "@arcgis/lumina";
|
|
5
|
-
import { g as P, b as
|
|
6
|
-
const H = B`.layer-body{
|
|
5
|
+
import { g as P, b as f, c as h, d as U, u as j, f as g, h as o } from "../../chunks/univariateUtils.js";
|
|
6
|
+
const H = B`.layer-body{display:table}.layer-row{display:table-row}.layer-cell{display:table-cell;padding:var(--calcite-space-2xs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-above-below-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-above-below-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-above-below-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-above-below-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-above-below-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-above-below-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
|
|
7
7
|
class I extends F {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments), this.legendElement = null, this.opacity = 1;
|
|
@@ -18,7 +18,7 @@ class I extends F {
|
|
|
18
18
|
const { legendElement: y, opacity: n } = this, { sizeRampElement: i, colorRampElement: c } = P(y, this.messages, n);
|
|
19
19
|
if (!i)
|
|
20
20
|
return null;
|
|
21
|
-
const p = this.messages.previewColorRampAriaLabel, d =
|
|
21
|
+
const p = this.messages.previewColorRampAriaLabel, d = f(i, "above", !0), m = f(i, "below", !0), v = 12, s = h(c, {
|
|
22
22
|
width: v,
|
|
23
23
|
height: d,
|
|
24
24
|
rampAlignment: "vertical",
|
|
@@ -26,7 +26,7 @@ class I extends F {
|
|
|
26
26
|
type: "above",
|
|
27
27
|
cssEffectFilter: this.cssEffectFilter,
|
|
28
28
|
ariaLabel: p
|
|
29
|
-
}), w =
|
|
29
|
+
}), w = h(c, {
|
|
30
30
|
width: v,
|
|
31
31
|
height: m,
|
|
32
32
|
rampAlignment: "vertical",
|
|
@@ -34,8 +34,8 @@ class I extends F {
|
|
|
34
34
|
type: "below",
|
|
35
35
|
cssEffectFilter: this.cssEffectFilter,
|
|
36
36
|
ariaLabel: p
|
|
37
|
-
}), u = U(i),
|
|
38
|
-
return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!
|
|
37
|
+
}), u = U(i), r = i.infos.map((a) => a.label), $ = r.map((a, t) => t === 0 ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : t === 2 ? l`<div></div>` : null), x = r.length - 1, R = Math.floor(r.length / 2), L = r.map((a, t) => t === R || t === x ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : null), E = { display: "table-cell", verticalAlign: "middle" }, z = { marginTop: `${u}px` }, A = { height: `${d}px` }, S = { height: `${m}px` };
|
|
38
|
+
return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!s && t % 2 === 0 ? l`<div class="layer-cell layer-cell-info">${r[t]}</div>` : null}</div>`)}</div>${s ? l`<div style=${e(z)}><div style=${e(g)}><div style=${e(o)}><div class="ramps">${s}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(A)}>${$}</div></div></div><div style=${e(g)}><div style=${e(o)}><div class="ramps">${w}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(S)}>${L}</div></div></div></div>` : null}</div>`;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
k("arcgis-legend-classic-univariate-above-and-below-ramp", I);
|
|
@@ -4,7 +4,7 @@ import { css as w, html as i } from "lit";
|
|
|
4
4
|
import { LitElement as x, safeClassMap as o, safeStyleMap as e } from "@arcgis/lumina";
|
|
5
5
|
import { classes as R } from "@arcgis/toolkit/dom";
|
|
6
6
|
import { e as z, d as $, b as C, c as E, u as S, f as L, h as n } from "../../chunks/univariateUtils.js";
|
|
7
|
-
const U = w`.layer-
|
|
7
|
+
const U = w`.layer-row,.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.size-ramp~.layer-cell-info{width:80%;max-width:80%}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
|
|
8
8
|
class A extends x {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments), this.legendElement = null, this.opacity = 1;
|
|
@@ -27,8 +27,8 @@ class A extends x {
|
|
|
27
27
|
type: "full",
|
|
28
28
|
cssEffectFilter: this.cssEffectFilter,
|
|
29
29
|
ariaLabel: this.messages.previewColorRampAriaLabel
|
|
30
|
-
}), f = a.infos.length - 1,
|
|
31
|
-
return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(
|
|
30
|
+
}), f = a.infos.length - 1, b = a.infos.map((t, s) => s === 0 || s === f ? i`<div class=${o(t.label ? l ? "univariate-label" : "ramp-label" : void 0)}>${t.label}</div>` : null), h = { display: "table-cell", verticalAlign: "middle" }, g = { marginTop: `${m}px` }, y = { height: `${r}px` };
|
|
31
|
+
return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(h)}>${t.preview}</div></div>`)}</div><div style=${e(g)}><div style=${e(L)}><div style=${e(n)}><div class="ramps">${v}</div></div><div style=${e(n)}><div class="ramp-labels" style=${e(y)}>${b}</div></div></div></div></div>`;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
u("arcgis-legend-classic-univariate-color-size-ramp", A);
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
|
-
import { c as
|
|
3
|
-
import { css as
|
|
4
|
-
import { LitElement as
|
|
2
|
+
import { c as m } from "../../chunks/runtime.js";
|
|
3
|
+
import { css as y, html as a } from "lit";
|
|
4
|
+
import { LitElement as p, safeClassMap as d } from "@arcgis/lumina";
|
|
5
5
|
import { classes as g } from "@arcgis/toolkit/dom";
|
|
6
|
-
import { H as
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import { H as f } from "../../chunks/heading.js";
|
|
7
|
+
import { g as v } from "../../chunks/titleUtils.js";
|
|
8
|
+
const u = y`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:block;padding:var(--arcgis-internal-padding)}.layers{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layers>.layer{position:relative}.layers>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin);font-size:var(--calcite-font-size-md);font-weight:var(--calcite-font-weight-semibold)}.layer{word-wrap:break-word}.layer-elements{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-element-gap);overflow:auto}.layer-children{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layer-children>.layer{margin-inline-start:var(--arcgis-internal-legend-layer-padding);position:relative}.layer-children>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer-children.layer-children-compact>.layer.layer-child-inline-title{margin-inline-start:0}.layer-children.layer-children-compact>.layer:not(:last-child):after{content:none}.layer-children.layer-children-compact{gap:var(--calcite-space-2xs)}.layer-child{padding:0}.layer-child-title{font-weight:var(--calcite-font-weight-medium)}`;
|
|
9
|
+
function w(r) {
|
|
10
|
+
return "type" in r && !!r.type;
|
|
11
|
+
}
|
|
12
|
+
function h(r, e) {
|
|
13
|
+
const t = r.legendElements?.filter(Boolean);
|
|
14
|
+
if (!r.parent || !r.title || t?.length !== 1)
|
|
15
|
+
return;
|
|
16
|
+
const [i] = t;
|
|
17
|
+
if (i.type !== "symbol-table" || i.infos.length !== 1)
|
|
18
|
+
return;
|
|
19
|
+
const [l] = i.infos;
|
|
20
|
+
if (!l || w(l))
|
|
21
|
+
return;
|
|
22
|
+
const n = "preview" in l && !!l.preview || "src" in l && !!l.src, s = "label" in l ? v(e, l.label, !1) : "";
|
|
23
|
+
return n && !s ? r.title ?? void 0 : void 0;
|
|
24
|
+
}
|
|
25
|
+
class _ extends p {
|
|
9
26
|
constructor() {
|
|
10
27
|
super(...arguments), this.headingLevel = 3, this.type = "classic";
|
|
11
28
|
}
|
|
@@ -13,34 +30,40 @@ class y extends d {
|
|
|
13
30
|
this.properties = { activeLayerInfos: 0, headingLevel: 9, type: 32, messages: 0 };
|
|
14
31
|
}
|
|
15
32
|
static {
|
|
16
|
-
this.styles =
|
|
33
|
+
this.styles = u;
|
|
17
34
|
}
|
|
18
35
|
render() {
|
|
19
|
-
const
|
|
20
|
-
return
|
|
36
|
+
const t = this.activeLayerInfos?.toArray().map((i) => this._renderLegendForLayer(i)).filter(Boolean);
|
|
37
|
+
return t?.length ? a`<section class="layers">${t}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
|
|
21
38
|
}
|
|
22
39
|
_renderLegendForLayer(e) {
|
|
23
40
|
if (!e.ready)
|
|
24
41
|
return null;
|
|
25
|
-
const
|
|
42
|
+
const t = h(e, this.messages), i = e.title && !t ? f({
|
|
26
43
|
level: this.headingLevel,
|
|
44
|
+
class: e.parent ? "layer-child-title" : void 0,
|
|
27
45
|
children: e.title
|
|
28
46
|
}) : null;
|
|
29
47
|
if (e.children.length) {
|
|
30
|
-
const l = e.children.toArray().map((
|
|
31
|
-
|
|
48
|
+
const l = e.children.toArray(), n = l.length > 0 && l.every((o) => !!h(o, this.messages)), s = l.map((o) => this._renderLegendForLayer(o)), c = g("layer-children", {
|
|
49
|
+
"layer-children-compact": n
|
|
50
|
+
});
|
|
51
|
+
return a`<section class="layer">${i}<div class=${d(c)}>${s}</div></section>`;
|
|
32
52
|
}
|
|
33
|
-
return this._renderLegendElementsForLayer(e,
|
|
53
|
+
return this._renderLegendElementsForLayer(e, i, t);
|
|
34
54
|
}
|
|
35
|
-
_renderLegendElementsForLayer(e,
|
|
55
|
+
_renderLegendElementsForLayer(e, t, i) {
|
|
36
56
|
const l = e.legendElements?.filter(Boolean);
|
|
37
57
|
if (!l?.length)
|
|
38
58
|
return null;
|
|
39
|
-
const
|
|
40
|
-
|
|
59
|
+
const n = l.map((c) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .inlineLayerTitle=${i} .layer=${e.layer} .legendElement=${c} .messages=${this.messages}></arcgis-legend-classic-element>`), s = {
|
|
60
|
+
"layer-child": !!e.parent,
|
|
61
|
+
"layer-child-inline-title": !!i
|
|
62
|
+
};
|
|
63
|
+
return a`<section class=${d(g("layer", s))}>${t}<div class="layer-elements">${n}</div></section>`;
|
|
41
64
|
}
|
|
42
65
|
}
|
|
43
|
-
|
|
66
|
+
m("arcgis-legend-classic-view", _);
|
|
44
67
|
export {
|
|
45
|
-
|
|
68
|
+
_ as LegendClassicView
|
|
46
69
|
};
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { c as F } from "../../chunks/runtime.js";
|
|
3
3
|
import { css as P, html as b, svg as X } from "lit";
|
|
4
4
|
import { getBoundingBox as j, computeBBox as I, getTransformMatrix as A } from "@arcgis/core/applications/Components/svgUtils.js";
|
|
5
|
-
import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as
|
|
5
|
+
import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as l } from "@arcgis/lumina";
|
|
6
6
|
import { useDirection as N } from "@arcgis/lumina/controllers";
|
|
7
7
|
import { classes as p } from "@arcgis/toolkit/dom";
|
|
8
8
|
import { g as T, a as G, b as J, c as K } from "../../chunks/svgUtils.js";
|
|
9
|
-
const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-
|
|
9
|
+
const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-inline-end:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-inline-start:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`, Q = "http://www.w3.org/2000/svg";
|
|
10
10
|
class V extends U {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments), this._direction = N(), this.legendElement = null;
|
|
@@ -17,12 +17,12 @@ class V extends U {
|
|
|
17
17
|
static {
|
|
18
18
|
this.styles = O;
|
|
19
19
|
}
|
|
20
|
-
_getLineMarkers(n,
|
|
20
|
+
_getLineMarkers(n, r) {
|
|
21
21
|
const e = "arrowStart", s = "arrowEnd", i = n === "left", t = {
|
|
22
22
|
markerStart: null,
|
|
23
23
|
markerEnd: null
|
|
24
24
|
};
|
|
25
|
-
switch (
|
|
25
|
+
switch (r) {
|
|
26
26
|
case "HL":
|
|
27
27
|
i ? t.markerStart = `url(#${s})` : t.markerEnd = `url(#${e})`;
|
|
28
28
|
break;
|
|
@@ -39,11 +39,11 @@ class V extends U {
|
|
|
39
39
|
return t;
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
const n = this.legendElement, { focus:
|
|
42
|
+
const n = this.legendElement, { focus: r, labels: e } = n, s = !!r, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
|
|
43
43
|
return s ? b`<div class="diamond-container" style=${h(t)}><div class="diamond-left-column">${a ? e.right : e.left}</div><div class="diamond-middle-column"><div class="diamond-middle-column-label">${e.top}</div>${i}<div class="diamond-middle-column-label">${e.bottom}</div></div><div class="diamond-right-column">${a ? e.left : e.right}</div></div>` : b`<div class="square-table"><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-bottom"))}>${a ? e.top : e.left}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-bottom"))}>${a ? e.left : e.top}</div></div><div class="square-table-row"><div class="square-table-cell"></div>${i}<div class="square-table-cell"></div></div><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-top"))}>${a ? e.right : e.bottom}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-top"))}>${a ? e.bottom : e.right}</div></div></div>`;
|
|
44
44
|
}
|
|
45
45
|
_renderRamp(n) {
|
|
46
|
-
const { focus:
|
|
46
|
+
const { focus: r, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!r, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
|
|
47
47
|
for (let f = 0; f < e; f++) {
|
|
48
48
|
const H = f * u;
|
|
49
49
|
for (let g = 0; g < e; g++) {
|
|
@@ -62,11 +62,11 @@ class V extends U {
|
|
|
62
62
|
const x = 15, q = 15, w = 10;
|
|
63
63
|
let y;
|
|
64
64
|
m || (y = "margin: -15px -15px -18px -15px");
|
|
65
|
-
const S = this._getLineMarkers("left",
|
|
65
|
+
const S = this._getLineMarkers("left", r), E = this._getLineMarkers("right", r), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
|
|
66
66
|
filter: this.cssEffectFilter,
|
|
67
67
|
opacity: t == null ? "" : `${t}`
|
|
68
68
|
};
|
|
69
|
-
return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ??
|
|
69
|
+
return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? l} role=img style=${h(y)} width=${d ?? l} xmlns=${Q}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${v}</defs><g transform=${D ?? l}>${$}</g><g transform=${B ?? l}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? l} marker-start=${S.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? l} marker-start=${E.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
F("arcgis-legend-relationship-ramp", V);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
2
|
import { c as W } from "../../chunks/runtime.js";
|
|
3
|
-
import { css as X, html as
|
|
3
|
+
import { css as X, html as v } from "lit";
|
|
4
4
|
import { LitElement as Y, safeStyleMap as b } from "@arcgis/lumina";
|
|
5
5
|
import { s as A, g as z, p as k } from "../../chunks/utils2.js";
|
|
6
|
-
const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-
|
|
6
|
+
const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-space-sm-plus)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-space-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding-inline-end:var(--calcite-space-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-space-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
|
|
7
7
|
function u(m) {
|
|
8
|
-
return m.infos.filter((r,
|
|
8
|
+
return m.infos.filter((r, o) => o % 2 === 0);
|
|
9
9
|
}
|
|
10
10
|
function w(m) {
|
|
11
11
|
return !!(m && typeof m == "object");
|
|
@@ -21,35 +21,35 @@ class j extends Y {
|
|
|
21
21
|
this.styles = C;
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return this.legendElement.infos.length !== 5 ? null :
|
|
24
|
+
return this.legendElement.infos.length !== 5 ? null : v`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
|
|
25
25
|
}
|
|
26
26
|
_renderSpikeRampPreview() {
|
|
27
|
-
const r = this.legendElement, [
|
|
27
|
+
const r = this.legendElement, [o, l, d] = u(r).map(({ preview: p, label: a }) => {
|
|
28
28
|
if (!p)
|
|
29
29
|
return null;
|
|
30
30
|
const i = p.cloneNode(!0);
|
|
31
31
|
return i.classList.add("spike-ramp-symbol-preview"), A(i, z(this.messages, a)), i;
|
|
32
32
|
});
|
|
33
|
-
return !
|
|
33
|
+
return !o || !l || !d ? null : v`<div class="spike-ramp-preview"><div>${d}</div><div>${l}</div><div>${o}</div></div>`;
|
|
34
34
|
}
|
|
35
35
|
_renderSpikeRampLines() {
|
|
36
|
-
const r = this.legendElement, [{ width:
|
|
36
|
+
const r = this.legendElement, [{ width: o, height: l }, { width: d }, { width: p, height: a }] = u(r).map(({ size: g }) => w(g) ? { width: k(g.width), height: k(g.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = o + d + p + i * 3, h = l, s = document.createElement("canvas");
|
|
37
37
|
s.width = (n + i) * e, s.height = h * e, s.style.width = `${s.width / e}px`, s.style.height = `${s.height / e}px`;
|
|
38
38
|
const t = s.getContext("2d");
|
|
39
39
|
t.beginPath();
|
|
40
|
-
const f = n - (
|
|
40
|
+
const f = n - (o / 2 + i), x = 0, y = n + c, $ = 0;
|
|
41
41
|
t.moveTo(f * e, x * e), t.lineTo(y * e, $ * e);
|
|
42
|
-
const R = (n - c) / 2, E = (
|
|
42
|
+
const R = (n - c) / 2, E = (l - a) / 2, S = n + c, L = (l - a) / 2;
|
|
43
43
|
t.moveTo(R * e, E * e), t.lineTo(S * e, L * e);
|
|
44
44
|
const P = p / 2, _ = h - a, H = n + c, T = h - a;
|
|
45
|
-
return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(),
|
|
45
|
+
return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), v`<div class="spike-ramp-lines">${s}</div>`;
|
|
46
46
|
}
|
|
47
47
|
_renderSpikeRampLabels() {
|
|
48
|
-
const r = this.legendElement, [{ label:
|
|
48
|
+
const r = this.legendElement, [{ label: o, height: l }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
|
|
49
49
|
label: s,
|
|
50
50
|
height: w(t) ? k(t.height) : 0
|
|
51
|
-
})), i =
|
|
52
|
-
return
|
|
51
|
+
})), i = l - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
|
|
52
|
+
return v`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${o}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
W("arcgis-legend-spike-ramp", j);
|
|
@@ -959,6 +959,7 @@ export abstract class ArcgisScene extends LitElement {
|
|
|
959
959
|
*
|
|
960
960
|
* @param hitTarget
|
|
961
961
|
* @param options
|
|
962
|
+
* @see [Sample - Hit test by screen rectangle in 3D](https://developers.arcgis.com/javascript/latest/sample-code/scene-hittest-screen-rectangle/)
|
|
962
963
|
*/
|
|
963
964
|
hitTest(hitTarget: MouseEvent | ScreenPoint | ScreenRect, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>;
|
|
964
965
|
/**
|