@arcgis/common-components 5.1.0-next.9 → 5.1.0-next.90
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/README.md +24 -1
- package/dist/cdn/{7HQMPKZO.js → 3G2YIQ2H.js} +1 -1
- package/dist/cdn/3XQ2BXVZ.js +2 -0
- package/dist/cdn/BKYTDR46.js +2 -0
- package/dist/cdn/{7PB2GGQH.js → BZM2IT6I.js} +1 -1
- package/dist/cdn/{23DDMSOB.js → EUASID5E.js} +1 -1
- package/dist/cdn/{7CI55VCH.js → HYLC5GEB.js} +1 -1
- package/dist/cdn/IFVBIQTC.js +2 -0
- package/dist/cdn/{ZLXAKPUH.js → IRNUEFLU.js} +1 -1
- package/dist/cdn/K7ZYVDSB.js +2 -0
- package/dist/cdn/{4CW7U27R.js → M4VPJH2A.js} +1 -1
- package/dist/cdn/MB7UDGWW.js +2 -0
- package/dist/cdn/{AXTSUI2Q.js → MK3AKKYE.js} +1 -1
- package/dist/cdn/NJDJB5PA.js +2 -0
- package/dist/cdn/{4DCAUWTC.js → O6URHY4T.js} +1 -1
- package/dist/cdn/{ZOWIFVL3.js → OCSJN2DD.js} +1 -1
- package/dist/cdn/{7Y42J3JI.js → ODQFCCON.js} +1 -1
- package/dist/cdn/OTH3D6VO.js +2 -0
- package/dist/cdn/RKCOXVOG.js +2 -0
- package/dist/cdn/TFC6EZUO.js +2 -0
- package/dist/cdn/THRWQA3M.js +4 -0
- package/dist/cdn/{C6JAR4IN.js → YNZWIV4G.js} +1 -1
- package/dist/cdn/{YVSTPEPS.js → YXVSNI5R.js} +1 -1
- package/dist/cdn/{J5X5TNVW.js → Z2BJWRNF.js} +1 -1
- package/dist/cdn/assets/field-pick-list/t9n/messages.no.json +1 -1
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ar.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.bg.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.bs.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ca.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.cs.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.da.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.de.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.el.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.en-US.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.en.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.es.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.et.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.fi.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.fr.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.he.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.hr.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.hu.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.id.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.it.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ja.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ko.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.lt.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.lv.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.nl.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.no.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.pl.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.pt-BR.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.pt-PT.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ro.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.ru.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.sk.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.sl.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.sr.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.sv.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.th.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.tr.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.uk.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.vi.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.zh-CN.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.zh-HK.json +1 -0
- package/dist/cdn/assets/spatial-reference-picker/t9n/messages.zh-TW.json +1 -0
- package/dist/cdn/index.js +1 -1
- package/dist/cdn/main.css +1 -1
- package/dist/chunks/commonFunctions.js +7 -3
- package/dist/components/arcgis-ckeditor5/customElement.js +7 -7
- package/dist/components/arcgis-ckeditor5-popover/customElement.js +1 -1
- package/dist/components/arcgis-field-info/customElement.d.ts +2 -2
- package/dist/components/arcgis-field-info/utils/basic.d.ts +20 -2
- package/dist/components/arcgis-field-pick-list/customElement.d.ts +3 -3
- package/dist/components/arcgis-field-pick-list/customElement.js +1 -1
- package/dist/components/arcgis-field-pick-list/utils/types.d.ts +20 -2
- package/dist/components/arcgis-histogram/customElement.d.ts +10 -10
- package/dist/components/arcgis-histogram/customElement.js +81 -90
- package/dist/components/arcgis-histogram/types.d.ts +1 -3
- package/dist/components/arcgis-label-input/customElement.d.ts +5 -6
- package/dist/components/arcgis-label-input/customElement.js +22 -17
- package/dist/components/arcgis-picker-input/customElement.js +11 -11
- package/dist/components/arcgis-slider/customElement.d.ts +72 -67
- package/dist/components/arcgis-slider/customElement.js +349 -304
- package/dist/components/arcgis-slider-input/customElement.d.ts +6 -0
- package/dist/components/arcgis-slider-input/customElement.js +12 -12
- package/dist/components/arcgis-spatial-reference-picker/customElement.d.ts +327 -0
- package/dist/components/arcgis-spatial-reference-picker/customElement.js +7702 -0
- package/dist/components/arcgis-spatial-reference-picker/index.d.ts +1 -0
- package/dist/components/arcgis-spatial-reference-picker/index.js +3 -0
- package/dist/components/arcgis-spatial-reference-picker-tree/customElement.d.ts +35 -0
- package/dist/components/arcgis-spatial-reference-picker-tree/customElement.js +77 -0
- package/dist/components/arcgis-spatial-reference-picker-tree/index.d.ts +1 -0
- package/dist/components/arcgis-spatial-reference-picker-tree/index.js +3 -0
- package/dist/components/arcgis-ticks/customElement.d.ts +20 -23
- package/dist/components/arcgis-ticks/customElement.js +7 -7
- package/dist/components/arcgis-ticks/types.d.ts +23 -0
- package/dist/components/arcgis-unique-values-list/customElement.d.ts +9 -4
- package/dist/components/arcgis-unique-values-list/customElement.js +158 -151
- package/dist/components/arcgis-unique-values-list/utils/basic.d.ts +13 -2
- 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 +20 -0
- package/dist/loader.js +4 -2
- package/dist/types/lumina.d.ts +14 -2
- package/dist/types/preact.d.ts +16 -2
- package/dist/types/react.d.ts +18 -2
- package/dist/types/stencil.d.ts +14 -2
- package/dist/utils/spatial-references.d.ts +1 -0
- package/dist/utils/types.d.ts +3 -0
- package/package.json +5 -6
- package/dist/cdn/2BDHDUXG.js +0 -2
- package/dist/cdn/3O7GAC23.js +0 -2
- package/dist/cdn/57I35HLF.js +0 -2
- package/dist/cdn/6DQVLQL6.js +0 -2
- package/dist/cdn/EKKJN7WZ.js +0 -2
- package/dist/cdn/UTXWKXMT.js +0 -4
- package/dist/cdn/XEB2RUND.js +0 -2
- package/dist/cdn/ZL3E4ZGE.js +0 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./customElement.js";
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference path="../../index.d.ts" />
|
|
2
|
+
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
3
|
+
import type { NestedObject } from "../../utils/spatial-references.js";
|
|
4
|
+
|
|
5
|
+
/** @internal */
|
|
6
|
+
export abstract class ArcgisSpatialReferencePickerTree extends LitElement {
|
|
7
|
+
/**
|
|
8
|
+
* The data to display in the tree. Supports nested data.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* data = {
|
|
12
|
+
* "parent item": {
|
|
13
|
+
* "child item": "child item value",
|
|
14
|
+
* "sub-parent child item": {
|
|
15
|
+
* "child item of nested parent key": "child item of nested parent value"
|
|
16
|
+
* },
|
|
17
|
+
* "child item 2 key": "child item 2 value"
|
|
18
|
+
* },
|
|
19
|
+
* "item 2": "item 2 value",
|
|
20
|
+
* ...
|
|
21
|
+
* };
|
|
22
|
+
* Keys of parent items are displayed as the item's label.
|
|
23
|
+
* Values of elements without children are displayed as the item's label.
|
|
24
|
+
* In this case, "sub-parent child item" is displayed as the label for that item and
|
|
25
|
+
* "child item of nested parent value" is displayed as the label for it's child.
|
|
26
|
+
*/
|
|
27
|
+
accessor data: NestedObject;
|
|
28
|
+
/** The key of the selected item. (Wkid when used as spatial reference selection) */
|
|
29
|
+
accessor value: string | undefined;
|
|
30
|
+
/** Emitted when the selected value of the tree changes. */
|
|
31
|
+
readonly arcgisChange: import("@arcgis/lumina").TargetedEvent<this, void>;
|
|
32
|
+
readonly "@eventTypes": {
|
|
33
|
+
arcgisChange: ArcgisSpatialReferencePickerTree["arcgisChange"]["detail"];
|
|
34
|
+
};
|
|
35
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
|
|
2
|
+
import { c as h } from "../../chunks/runtime.js";
|
|
3
|
+
import { keyed as n } from "lit/directives/keyed.js";
|
|
4
|
+
import { LitElement as d, createEvent as l, nothing as p } from "@arcgis/lumina";
|
|
5
|
+
import { css as m, html as a } from "lit";
|
|
6
|
+
const u = m`:host{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;height:100%;width:100%}`;
|
|
7
|
+
class v extends d {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments), this.treeItemsOpen = /* @__PURE__ */ new Set(), this.handleMutations = (e) => {
|
|
10
|
+
e.forEach((s) => {
|
|
11
|
+
if (s.type === "attributes" && s.attributeName === "expanded") {
|
|
12
|
+
const t = s.target;
|
|
13
|
+
"key" in t.dataset && t.dataset.key !== void 0 && this.treeItemsOpen.has(t.dataset.key) !== t.expanded && this.toggleTreeItem(t.dataset.key);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
}, this.renderedTree = [], this.data = {}, this.arcgisChange = l();
|
|
17
|
+
}
|
|
18
|
+
static {
|
|
19
|
+
this.properties = { renderedTree: 16, data: 0, value: 1 };
|
|
20
|
+
}
|
|
21
|
+
static {
|
|
22
|
+
this.styles = u;
|
|
23
|
+
}
|
|
24
|
+
load() {
|
|
25
|
+
this.setupComponent();
|
|
26
|
+
}
|
|
27
|
+
willUpdate(e) {
|
|
28
|
+
e.has("data") && (this.hasUpdated || Object.keys(this.data ?? {}).length > 0) && this.setupComponent();
|
|
29
|
+
}
|
|
30
|
+
loaded() {
|
|
31
|
+
this.manager.onLifecycle(() => {
|
|
32
|
+
this.observer = new MutationObserver(this.handleMutations);
|
|
33
|
+
const e = this.el.shadowRoot ?? this.el;
|
|
34
|
+
return this.observer.observe(e, {
|
|
35
|
+
attributes: !0,
|
|
36
|
+
subtree: !0,
|
|
37
|
+
attributeFilter: ["expanded"]
|
|
38
|
+
}), () => {
|
|
39
|
+
this.observer?.disconnect(), this.observer = void 0;
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
setupComponent() {
|
|
44
|
+
this.treeItemsOpen.clear(), this.buildJSXTree();
|
|
45
|
+
}
|
|
46
|
+
buildJSXTree() {
|
|
47
|
+
const e = (s) => {
|
|
48
|
+
const t = [];
|
|
49
|
+
for (const r of Object.keys(s)) {
|
|
50
|
+
const i = s[r];
|
|
51
|
+
let o;
|
|
52
|
+
typeof i == "object" && (o = this.treeItemsOpen.has(r) ? e(i) : []);
|
|
53
|
+
const c = typeof i == "object" ? r : i;
|
|
54
|
+
t.push(this.createTreeItem(r, c, o));
|
|
55
|
+
}
|
|
56
|
+
return t;
|
|
57
|
+
};
|
|
58
|
+
this.renderedTree = e(this.data);
|
|
59
|
+
}
|
|
60
|
+
toggleTreeItem(e) {
|
|
61
|
+
this.treeItemsOpen.has(e) ? this.treeItemsOpen.delete(e) : this.treeItemsOpen.add(e), this.buildJSXTree();
|
|
62
|
+
}
|
|
63
|
+
createTreeItem(e, s, t) {
|
|
64
|
+
return a`<calcite-tree-item data-key=${e ?? p} .selected=${this.value === e} .expanded=${this.treeItemsOpen.has(e)}>${s}${t !== void 0 && n(`${e}-child-tree`, a`<calcite-tree slot=children>${t}</calcite-tree>`) || ""}</calcite-tree-item>`;
|
|
65
|
+
}
|
|
66
|
+
handleTreeSelect(e) {
|
|
67
|
+
const t = e.currentTarget?.selectedItems[0]?.dataset.key;
|
|
68
|
+
t !== void 0 && (this.value = t, this.arcgisChange.emit());
|
|
69
|
+
}
|
|
70
|
+
render() {
|
|
71
|
+
return n("base-tree", a`<calcite-tree scale=s @calciteTreeSelect=${this.handleTreeSelect}>${this.renderedTree}</calcite-tree>`);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
h("arcgis-spatial-reference-picker-tree", v);
|
|
75
|
+
export {
|
|
76
|
+
v as ArcgisSpatialReferencePickerTree
|
|
77
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./customElement.js";
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
/// <reference path="../../index.d.ts" />
|
|
2
|
-
/// <reference types="@arcgis/core/interfaces.d.ts" />
|
|
3
2
|
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
3
|
+
import type { Layout, TickMode, TickValues } from "./types.js";
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* The ticks component displays visual markers along a line to indicate scale, intervals, or specific values. It is often used in conjunction with the
|
|
7
7
|
* [Slider component](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/). Ticks help users understand the
|
|
8
8
|
* slider’s range and make more precise selections.
|
|
9
9
|
*
|
|
10
|
-
* Tick placement is controlled by the [mode](
|
|
11
|
-
* line. Tick positions are derived from the component’s [min](
|
|
12
|
-
* [interpolationExponent](
|
|
13
|
-
* The component can also be made [interactive](
|
|
10
|
+
* Tick placement is controlled by the [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode), which defines how the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) are parsed and translated into positions along the
|
|
11
|
+
* line. Tick positions are derived from the component’s [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#max) range, with optional non-linear scaling via
|
|
12
|
+
* [interpolationExponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interpolationExponent). Ticks can be displayed in vertical or horizontal [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#layout), with optional [showLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showLabels) and a [showBaseline](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showBaseline).
|
|
13
|
+
* The component can also be made [interactive](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interactive) to respond to user clicks on individual ticks. The [labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#labelFormatter) property allows customization of tick label formatting.
|
|
14
14
|
*
|
|
15
15
|
* @cssproperty [--arcgis-ticks-tick-length] - Specifies the length of the ticks.
|
|
16
16
|
* @cssproperty [--arcgis-ticks-tick-color] - Specifies the color of the ticks.
|
|
17
17
|
* @cssproperty [--arcgis-ticks-gap] - Specifies the gap between the ticks and labels.
|
|
18
18
|
* @since 5.0
|
|
19
19
|
* @example
|
|
20
|
-
* The following example creates a vertical slider with
|
|
21
|
-
* The ticks are
|
|
20
|
+
* The following example creates a vertical slider with ticks.
|
|
21
|
+
* The ticks are positioned at the end of the slider and displayed every 10 units from 0 to 100.
|
|
22
22
|
* ```html
|
|
23
23
|
* <arcgis-slider id="sliderComponent" min="0" max="100" show-range-labels values="50" layout="vertical">
|
|
24
24
|
* <arcgis-ticks slot="content-end" style="flex:1;"
|
|
@@ -34,7 +34,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
34
34
|
*/
|
|
35
35
|
export abstract class ArcgisTicks extends LitElement {
|
|
36
36
|
/**
|
|
37
|
-
* When `true`, ticks are clickable and the component emits
|
|
37
|
+
* When `true`, ticks are clickable and the component emits [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick) when the user selects a tick.
|
|
38
38
|
*
|
|
39
39
|
* @default false
|
|
40
40
|
* @see [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick)
|
|
@@ -65,7 +65,7 @@ export abstract class ArcgisTicks extends LitElement {
|
|
|
65
65
|
* };
|
|
66
66
|
* ```
|
|
67
67
|
*/
|
|
68
|
-
accessor labelFormatter: (
|
|
68
|
+
accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
|
|
69
69
|
/**
|
|
70
70
|
* Determines whether the labels are placed before or after the ticks.
|
|
71
71
|
*
|
|
@@ -98,10 +98,11 @@ export abstract class ArcgisTicks extends LitElement {
|
|
|
98
98
|
*/
|
|
99
99
|
accessor mirrored: boolean;
|
|
100
100
|
/**
|
|
101
|
-
* The
|
|
102
|
-
*
|
|
103
|
-
* - `
|
|
104
|
-
* - `
|
|
101
|
+
* The manner in which ticks are positioned along the component. It determines how [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted.
|
|
102
|
+
*
|
|
103
|
+
* - `count`: Places a fixed number of ticks (specified in [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values)) at equal intervals.
|
|
104
|
+
* - `percent`: Interprets [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) as percentages. If it's a single number, that number is the interval between ticks; if it's an array, the array specifies the percentage positions for ticks.
|
|
105
|
+
* - `value`: Places ticks only at the values listed in [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values).
|
|
105
106
|
*
|
|
106
107
|
* @default "count"
|
|
107
108
|
* @example
|
|
@@ -118,8 +119,8 @@ export abstract class ArcgisTicks extends LitElement {
|
|
|
118
119
|
* </arcgis-slider>
|
|
119
120
|
* ```
|
|
120
121
|
* @example
|
|
121
|
-
* In count mode, values
|
|
122
|
-
* For example, use `11` ticks to show 0–100 in
|
|
122
|
+
* In count mode, the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) property specifies the number of ticks to render (not a list of tick values).
|
|
123
|
+
* For example, use `11` ticks to show 0–100 in intervals of 10 (0, 10, 20, ..., 100).
|
|
123
124
|
* ```html
|
|
124
125
|
* <!-- 11 ticks from 0 to 100 -->
|
|
125
126
|
* <arcgis-slider min="0" max="100" show-range-labels values="20, 50">
|
|
@@ -163,7 +164,9 @@ export abstract class ArcgisTicks extends LitElement {
|
|
|
163
164
|
*/
|
|
164
165
|
accessor showLabels: boolean;
|
|
165
166
|
/**
|
|
166
|
-
* Indicates where ticks
|
|
167
|
+
* Indicates where ticks are rendered along the component. This can be set as comma-separated
|
|
168
|
+
* numbers in the attribute (e.g., `<arcgis-ticks values="10, 20, 30"></arcgis-ticks>`) or programmatically as
|
|
169
|
+
* either a single number or an array of numbers (e.g., `ticks.values = 10`, `ticks.values = [10, 20, 30]`).
|
|
167
170
|
* See the description for [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode) for more information about how this property is interpreted by each mode.
|
|
168
171
|
*
|
|
169
172
|
* @see [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode)
|
|
@@ -186,10 +189,4 @@ export abstract class ArcgisTicks extends LitElement {
|
|
|
186
189
|
readonly "@eventTypes": {
|
|
187
190
|
arcgisTickClick: ArcgisTicks["arcgisTickClick"]["detail"];
|
|
188
191
|
};
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
export type Layout = "horizontal" | "vertical";
|
|
192
|
-
|
|
193
|
-
export type TickMode = "count" | "percent" | "value";
|
|
194
|
-
|
|
195
|
-
export type TickValues = number[] | number;
|
|
192
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
|
|
2
2
|
import { c as $ } from "../../chunks/runtime.js";
|
|
3
3
|
import { css as M, html as c } from "lit";
|
|
4
|
-
import { LitElement as _, createEvent as C, safeClassMap as h,
|
|
4
|
+
import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as u } from "@arcgis/lumina";
|
|
5
5
|
import { formatNumber as z } from "@arcgis/core/intl.js";
|
|
6
6
|
const n = {
|
|
7
7
|
container: "container",
|
|
@@ -12,7 +12,7 @@ const n = {
|
|
|
12
12
|
tickMax: "tick--max",
|
|
13
13
|
tickLabel: "tick-label",
|
|
14
14
|
baseline: "baseline"
|
|
15
|
-
}, A = M`:host{display:flex;--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-gap: 1em;--arcgis-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--arcgis-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:.125rem;transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
|
|
15
|
+
}, A = M`:host{display:flex;--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-gap: 1em;--arcgis-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--arcgis-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:.125rem;transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
|
|
16
16
|
class F extends _ {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), this._formatOptions = {
|
|
@@ -66,13 +66,13 @@ class F extends _ {
|
|
|
66
66
|
}
|
|
67
67
|
_renderContent() {
|
|
68
68
|
const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: o, mirrored: l, showLabels: x } = this, g = [], b = [];
|
|
69
|
-
for (const [
|
|
70
|
-
const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${
|
|
69
|
+
for (const [d, f] of L(r, i, t, e, a)) {
|
|
70
|
+
const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${d}%` }, w = {
|
|
71
71
|
[n.tick]: !0,
|
|
72
|
-
[n.tickMin]:
|
|
73
|
-
[n.tickMax]:
|
|
72
|
+
[n.tickMin]: d === 0,
|
|
73
|
+
[n.tickMax]: d === 100
|
|
74
74
|
};
|
|
75
|
-
g.push(c`<div class=${h(w)} style=${u(p)} data-value=${
|
|
75
|
+
g.push(c`<div class=${h(w)} style=${u(p)} data-value=${f ?? v}></div>`), x && b.push(c`<div class=${h(n.tickLabel)} style=${u(p)} data-value=${f ?? v}>${this._internalLabelFormatter(f)}</div>`);
|
|
76
76
|
}
|
|
77
77
|
return [c`<div class=${h(n.labelsContainer)}>${b}</div>`, c`<div class=${h(n.ticksContainer)}>${g}</div>`];
|
|
78
78
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The layout of the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component, which determines the orientation of the ticks.
|
|
3
|
+
*
|
|
4
|
+
* @since 5.0
|
|
5
|
+
*/
|
|
6
|
+
export type Layout = "horizontal" | "vertical";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The mode of positioning ticks along the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component. It drives how [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted.
|
|
10
|
+
* - `count`: Places a fixed number of ticks (provided in the [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) property) at equal distances from each other.
|
|
11
|
+
* - `percent`: [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted as percentage. If [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
|
|
12
|
+
* - `value`: Indicates that ticks will only be placed at the values specified in the property.
|
|
13
|
+
*
|
|
14
|
+
* @since 5.0
|
|
15
|
+
*/
|
|
16
|
+
export type TickMode = "count" | "percent" | "value";
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Indicates where ticks will be rendered along the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component.
|
|
20
|
+
*
|
|
21
|
+
* @since 5.0
|
|
22
|
+
*/
|
|
23
|
+
export type TickValues = number[] | number;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference path="../../index.d.ts" />
|
|
2
|
-
|
|
2
|
+
import type SceneView from "@arcgis/core/views/SceneView.js";
|
|
3
|
+
import type MapView from "@arcgis/core/views/MapView.js";
|
|
3
4
|
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
5
|
+
import type { UniqueValueCountInfo } from "@arcgis/core/smartMapping/statistics/types.js";
|
|
4
6
|
import type { SupportedLayer } from "./utils/basic.js";
|
|
7
|
+
import type { VisualizationSource } from "../../utils/types.js";
|
|
5
8
|
import type { T9nMeta } from "@arcgis/lumina/controllers";
|
|
6
9
|
|
|
7
10
|
/**
|
|
@@ -85,15 +88,17 @@ export abstract class ArcgisUniqueValuesList extends LitElement {
|
|
|
85
88
|
* List of all unique values. If not provided component will get the unique values from the layer.
|
|
86
89
|
* An empty list would mean that there are no unique values for this field on the layer. The component renders nothing then.
|
|
87
90
|
*/
|
|
88
|
-
accessor uniqueValues:
|
|
91
|
+
accessor uniqueValues: UniqueValueCountInfo[] | undefined;
|
|
89
92
|
/** MapView instance, required if uniqueValues is not provided and/or to display dates in the correct timezone */
|
|
90
|
-
accessor view:
|
|
93
|
+
accessor view: MapView | SceneView | undefined;
|
|
94
|
+
/** Optional, specify visualization source other than the layer itself. */
|
|
95
|
+
accessor visualizationSource: VisualizationSource | undefined;
|
|
91
96
|
/**
|
|
92
97
|
* Get all unique values.
|
|
93
98
|
* E.g. to be used to limit how often these unique values need to be requested from the layer.
|
|
94
99
|
*/
|
|
95
100
|
getUniqueValues(): Promise<{
|
|
96
|
-
uniqueValues:
|
|
101
|
+
uniqueValues: UniqueValueCountInfo[];
|
|
97
102
|
partialUniqueValues: boolean;
|
|
98
103
|
} | undefined>;
|
|
99
104
|
/** Sets focus on component */
|