@arcgis/common-components 5.1.0-next.67 → 5.1.0-next.69

package/dist/components/arcgis-spatial-reference-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-spatial-reference-picker/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-input";
+import "../arcgis-spatial-reference-picker-tree/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-spatial-reference-picker-tree/customElement.d.ts

@@ -0,0 +1,35 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { NestedObject } from "../../utils/spatial-references.js";
+
+/** @internal */
+export abstract class ArcgisSpatialReferencePickerTree extends LitElement {
+  /**
+   * The data to display in the tree. Supports nested data.
+   *
+   * @example
+   * data = {
+   *  "parent item": {
+   *    "child item": "child item value",
+   *    "sub-parent child item": {
+   *      "child item of nested parent key": "child item of nested parent value"
+   *    },
+   *    "child item 2 key": "child item 2 value"
+   *  },
+   *  "item 2": "item 2 value",
+   *  ...
+   * };
+   * Keys of parent items are displayed as the item's label.
+   * Values of elements without children are displayed as the item's label.
+   * In this case, "sub-parent child item" is displayed as the label for that item and
+   * "child item of nested parent value" is displayed as the label for it's child.
+   */
+  accessor data: NestedObject;
+  /** The key of the selected item. (Wkid when used as spatial reference selection) */
+  accessor value: string | undefined;
+  /** Emitted when the selected value of the tree changes. */
+  readonly arcgisChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisChange: ArcgisSpatialReferencePickerTree["arcgisChange"]["detail"];
+  };
+}

package/dist/components/arcgis-spatial-reference-picker-tree/customElement.js

@@ -0,0 +1,77 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import { keyed as n } from "lit/directives/keyed.js";
+import { LitElement as d, createEvent as l, nothing as p } from "@arcgis/lumina";
+import { css as m, html as a } from "lit";
+const u = m`:host{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;height:100%;width:100%}`;
+class v extends d {
+  constructor() {
+    super(...arguments), this.treeItemsOpen = /* @__PURE__ */ new Set(), this.handleMutations = (e) => {
+      e.forEach((s) => {
+        if (s.type === "attributes" && s.attributeName === "expanded") {
+          const t = s.target;
+          "key" in t.dataset && t.dataset.key !== void 0 && this.treeItemsOpen.has(t.dataset.key) !== t.expanded && this.toggleTreeItem(t.dataset.key);
+        }
+      });
+    }, this.renderedTree = [], this.data = {}, this.arcgisChange = l();
+  }
+  static {
+    this.properties = { renderedTree: 16, data: 0, value: 1 };
+  }
+  static {
+    this.styles = u;
+  }
+  load() {
+    this.setupComponent();
+  }
+  willUpdate(e) {
+    e.has("data") && (this.hasUpdated || Object.keys(this.data ?? {}).length > 0) && this.setupComponent();
+  }
+  loaded() {
+    this.manager.onLifecycle(() => {
+      this.observer = new MutationObserver(this.handleMutations);
+      const e = this.el.shadowRoot ?? this.el;
+      return this.observer.observe(e, {
+        attributes: !0,
+        subtree: !0,
+        attributeFilter: ["expanded"]
+      }), () => {
+        this.observer?.disconnect(), this.observer = void 0;
+      };
+    });
+  }
+  setupComponent() {
+    this.treeItemsOpen.clear(), this.buildJSXTree();
+  }
+  buildJSXTree() {
+    const e = (s) => {
+      const t = [];
+      for (const r of Object.keys(s)) {
+        const i = s[r];
+        let o;
+        typeof i == "object" && (o = this.treeItemsOpen.has(r) ? e(i) : []);
+        const c = typeof i == "object" ? r : i;
+        t.push(this.createTreeItem(r, c, o));
+      }
+      return t;
+    };
+    this.renderedTree = e(this.data);
+  }
+  toggleTreeItem(e) {
+    this.treeItemsOpen.has(e) ? this.treeItemsOpen.delete(e) : this.treeItemsOpen.add(e), this.buildJSXTree();
+  }
+  createTreeItem(e, s, t) {
+    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>`;
+  }
+  handleTreeSelect(e) {
+    const t = e.currentTarget?.selectedItems[0]?.dataset.key;
+    t !== void 0 && (this.value = t, this.arcgisChange.emit());
+  }
+  render() {
+    return n("base-tree", a`<calcite-tree scale=s @calciteTreeSelect=${this.handleTreeSelect}>${this.renderedTree}</calcite-tree>`);
+  }
+}
+h("arcgis-spatial-reference-picker-tree", v);
+export {
+  v as ArcgisSpatialReferencePickerTree
+};

package/dist/components/arcgis-spatial-reference-picker-tree/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-spatial-reference-picker-tree/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-tree-item";
+import "@esri/calcite-components/components/calcite-tree";
+export * from "./customElement.js";

package/dist/components/arcgis-ticks/customElement.d.ts

@@ -17,7 +17,7 @@ import type { Layout, TickMode, TickValues } from "./types.js";
  * @cssproperty [--arcgis-ticks-gap] - Specifies the gap between the ticks and labels.
  * @since 5.0
  * @example
- * The following example creates a vertical slider and ticks.
+ * The following example creates a vertical slider with ticks.
  * The ticks are positioned at the end of the slider and displayed every 10 units from 0 to 100.
  * ```html
  * <arcgis-slider id="sliderComponent" min="0" max="100" show-range-labels values="50" layout="vertical">
@@ -119,8 +119,8 @@ export abstract class ArcgisTicks extends LitElement {
    * </arcgis-slider>
    * ```
    * @example
-   * In count mode, values specifies the number of ticks to render (not a list of tick values).
-   * For example, use `11` ticks to show 0–100 in steps of 10 (0, 10, 20, ..., 100).
+   * 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).
+   * For example, use `11` ticks to show 0–100 in intervals of 10 (0, 10, 20, ..., 100).
    * ```html
    * <!-- 11 ticks from 0 to 100 -->
    * <arcgis-slider min="0" max="100" show-range-labels values="20, 50">
@@ -164,7 +164,9 @@ export abstract class ArcgisTicks extends LitElement {
    */
   accessor showLabels: boolean;
   /**
-   * Indicates where ticks will be rendered along the component.
+   * Indicates where ticks are rendered along the component. This can be set as comma-separated
+   * numbers in the attribute (e.g., `<arcgis-ticks values="10, 20, 30"></arcgis-ticks>`) or programmatically as
+   * either a single number or an array of numbers (e.g., `ticks.values = 10`, `ticks.values = [10, 20, 30]`).
    * 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.
    *
    * @see [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode)