@arcgis/map-components 5.2.0-next.5 → 5.2.0-next.7

package/dist/components/arcgis-legend-classic-view/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
-import { css as c, html as t } from "lit";
+import { css as c, html as a } from "lit";
 import { LitElement as d, safeClassMap as o } from "@arcgis/lumina";
 import { classes as g } from "@arcgis/toolkit/dom";
 import { H as m } from "../../chunks/heading.js";
-const h = c`.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}.no-legend{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md)}.layer{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--arcgis-internal-padding, var(--calcite-spacing-md) var(--calcite-spacing-lg));word-wrap:break-word}.layer:last-child{border-bottom:none}.layer-elements{margin-left:var(--calcite-spacing-sm);overflow:auto}.layer-child{margin-left:var(--calcite-spacing-sm);padding-right:0;padding-left:0}:dir(rtl) .layer-elements,:dir(rtl) .layer-child{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}`;
-class p extends d {
+const h = c`.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}.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)}.layers>.layer:last-child{padding-bottom:var(--arcgis-internal-legend-layer-gap)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin)}.no-legend{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md)}.layer{padding:var(--arcgis-internal-legend-layer-padding);word-wrap:break-word}.layer-elements{margin-left:var(--calcite-spacing-sm);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{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-child{margin-left:var(--calcite-spacing-sm);padding:0}:dir(rtl) .layer-elements,:dir(rtl) .layer-child{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}`;
+class y extends d {
   constructor() {
     super(...arguments), this.headingLevel = 3, this.type = "classic";
   }
@@ -16,31 +16,31 @@ class p extends d {
     this.styles = h;
   }
   render() {
-    const s = this.activeLayerInfos?.toArray().map((r) => this._renderLegendForLayer(r)).filter(Boolean);
-    return s?.length ? t`<section>${s}</section>` : t`<div class="no-legend">${this.messages.noLegend}</div>`;
+    const r = this.activeLayerInfos?.toArray().map((l) => this._renderLegendForLayer(l)).filter(Boolean);
+    return r?.length ? a`<section class="layers">${r}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
   }
   _renderLegendForLayer(e) {
     if (!e.ready)
       return null;
-    const s = e.title ? m({
+    const r = e.title ? m({
       level: this.headingLevel,
       children: e.title
     }) : null;
     if (e.children.length) {
-      const r = e.children.toArray().map((i) => this._renderLegendForLayer(i));
-      return t`<section class="layer">${s}${r}</section>`;
+      const l = e.children.toArray().map((i) => this._renderLegendForLayer(i));
+      return a`<section class="layer">${r}<div class="layer-children">${l}</div></section>`;
     }
-    return this._renderLegendElementsForLayer(e, s);
+    return this._renderLegendElementsForLayer(e, r);
   }
-  _renderLegendElementsForLayer(e, s) {
-    const r = e.legendElements?.filter(Boolean);
-    if (!r?.length)
+  _renderLegendElementsForLayer(e, r) {
+    const l = e.legendElements?.filter(Boolean);
+    if (!l?.length)
       return null;
-    const i = r.map((a) => t`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .layer=${e.layer} .legendElement=${a} .messages=${this.messages}></arcgis-legend-classic-element>`), l = { "layer-child": !!e.parent };
-    return t`<section class=${o(g("layer", l))}>${s}<div class="layer-elements">${i}</div></section>`;
+    const i = l.map((s) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .layer=${e.layer} .legendElement=${s} .messages=${this.messages}></arcgis-legend-classic-element>`), t = { "layer-child": !!e.parent };
+    return a`<section class=${o(g("layer", t))}>${r}<div class="layer-elements">${i}</div></section>`;
   }
 }
-n("arcgis-legend-classic-view", p);
+n("arcgis-legend-classic-view", y);
 export {
-  p as LegendClassicView
+  y as LegendClassicView
 };

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

@@ -211,11 +211,34 @@ export abstract class ArcgisMap extends LitElement {
    * Specifies a basemap for the map. The basemap is a set of layers that give
    * geographic context to the view and the other operational layers
    * in the map.
-   * It can either be set using a basemap ID string ([see values](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)),
-   * [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
-   * or [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/).
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * The basemap can be set from a basemap ID string from the [basemap styles service](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/), such as `arcgis/navigation`, or from the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) class.
+   *
+   * > [!NOTE]
+   * > Accessing the basemap styles service requires authentication, see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/) for more information.
+   *
+   * @example
+   * ```html
+   * <!-- Basemap set using a basemap ID string from the basemap styles service -->
+   * <arcgis-map basemap="arcgis/navigation" center="-98, 39" zoom="4"></arcgis-map>
+   * ```
+   * @example
+   * ```js
+   * // Basemap set using a Basemap instance
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.basemap = new Basemap({
+   *   title: "Terrain",
+   *   baseLayers: [
+   *     new VectorTileLayer({
+   *        url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json",
+   *     })
+   *   ]
+   * });
+   * ```
+   * @see [Map.basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * @see [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
+   * @see [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/)
+   * @see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/)
    */
   accessor basemap: Basemap | string | undefined;
   /** Represents the view for a single basemap after it has been added to the map. */
@@ -883,6 +906,26 @@ export abstract class ArcgisMap extends LitElement {
    * Represents the current view as a Viewpoint or point of observation on the view.
    * Setting the viewpoint immediately changes the current view. For animating
    * the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
+   *
+   * @example
+   * ```js
+   * // Set the viewpoint to the Empire State Building in New York City
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.viewpoint = new Viewpoint({
+   *   targetGeometry: new Point({
+   *     longitude: -73.9857,
+   *     latitude: 40.7484
+   *   }),
+   *   scale: 5000
+   * });
+   * ```
+   * @example
+   * ```js
+   * // Get the initial viewpoint of the view once the view is ready
+   * const viewElement = document.querySelector("arcgis-map");
+   * await viewElement.viewOnReady();
+   * const initialViewpoint = viewElement.viewpoint.clone();
+   * ```
    */
   accessor viewpoint: Viewpoint;
   /**

package/dist/components/arcgis-paste/PasteViewModel.d.ts

@@ -8,8 +8,8 @@ import type Collection from "@arcgis/core/core/Collection.js";
 import type SceneView from "@arcgis/core/views/SceneView.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
-import type TemplateItem from "@arcgis/core/widgets/FeatureTemplates/TemplateItem.js";
 import type BatchAttributeFormViewModel from "@arcgis/core/widgets/BatchAttributeForm/BatchAttributeFormViewModel.js";
+import type TemplateItem from "../arcgis-feature-templates/TemplateItem.js";
 import type { EsriClipboard, ClipboardItem as EsriClipboardItem } from "@arcgis/core/applications/Components/clipboard.js";
 import type { ApplySet, ApplySetLayerEditResult, ApplySetServiceEditResult } from "@arcgis/core/applications/Components/applySetUtils.js";
 import type { ClipboardMove } from "./ClipboardMove.js";

package/dist/components/arcgis-paste/customElement.js

@@ -43,7 +43,7 @@ function Ee(e, t, i, a, s, o) {
   const g = o.objectIdField ?? "";
   return e.forEach((m) => {
     if (m.name !== g && !h.includes(m.name) && !p.includes(m.name) && !s.includes(m.name) && m.type !== "global-id" && (u === "" || u !== m.name)) {
-      const f = Ge(m, t);
+      const f = Oe(m, t);
       f.match && f.targetField && (l[f.targetField?.name] = i[m.name]);
     }
   }), l;
@@ -68,7 +68,7 @@ function Te(e, t) {
       return !1;
   }
 }
-function Ge(e, t) {
+function Oe(e, t) {
   const i = { match: !1, sourceField: null, targetField: null };
   for (const a of t)
     if (Te(e, a)) {
@@ -82,7 +82,7 @@ async function se(e, t, i, a) {
   let s = !0;
   const o = { hasAsyncArcadeExpressions: !1 }, l = e.items.filter((h) => h.type === "add");
   for (const h of l) {
-    const p = h.graphic.clone(), u = Oe(
+    const p = h.graphic.clone(), u = Ge(
       h.graphic,
       h.layer
     );
@@ -109,7 +109,7 @@ async function se(e, t, i, a) {
   }
   return s;
 }
-function Oe(e, t) {
+function Ge(e, t) {
   if (t.type === "feature" || t.type === "subtype-sublayer")
     return t;
   const i = t.findSublayerForFeature(e);
@@ -416,7 +416,7 @@ A([
 v = A([
   C("components.paste.commands.PasteCommand")
 ], v);
-var Be = Object.defineProperty, je = Object.getOwnPropertyDescriptor, G = (e, t, i, a) => {
+var Be = Object.defineProperty, je = Object.getOwnPropertyDescriptor, O = (e, t, i, a) => {
   for (var s = a > 1 ? void 0 : a ? je(t, i) : t, o = e.length - 1, l; o >= 0; o--)
     (l = e[o]) && (s = (a ? l(t, i, s) : l(s)) || s);
   return a && s && Be(t, i, s), s;
@@ -533,25 +533,25 @@ let F = class extends v {
     return e.pasteAppendTitle;
   }
 };
-G([
+O([
   r()
 ], F.prototype, "id", 1);
-G([
+O([
   r()
 ], F.prototype, "icon", 1);
-G([
+O([
   r()
 ], F.prototype, "immediate", 1);
-G([
+O([
   r()
 ], F.prototype, "mustShowOnCommandPage", 1);
-G([
+O([
   r()
 ], F.prototype, "commandEnabled", 1);
-F = G([
+F = O([
   C("components.paste.commands.PasteAppendCommand")
 ], F);
-var We = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, O = (e, t, i, a) => {
+var We = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, G = (e, t, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Re(t, i) : t, o = e.length - 1, l; o >= 0; o--)
     (l = e[o]) && (s = (a ? l(t, i, s) : l(s)) || s);
   return a && s && We(t, i, s), s;
@@ -669,22 +669,22 @@ let _ = class extends v {
     return e.pasteSubtractTitle;
   }
 };
-O([
+G([
   r()
 ], _.prototype, "id", 1);
-O([
+G([
   r()
 ], _.prototype, "icon", 1);
-O([
+G([
   r()
 ], _.prototype, "immediate", 1);
-O([
+G([
   r()
 ], _.prototype, "mustShowOnCommandPage", 1);
-O([
+G([
   r()
 ], _.prototype, "commandEnabled", 1);
-_ = O([
+_ = G([
   C("components.paste.commands.PasteSubtractCommand")
 ], _);
 var Ne = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, k = (e, t, i, a) => {
@@ -1690,25 +1690,14 @@ class st extends he {
       if (!this._templateGallery.value || this.viewModel.activeFlowPage !== "gallery-page")
         return;
       const t = this._templateGallery.value;
-      if (t.state !== "ready")
-        return;
       if (this.viewModel.pasteTemplateIsValid || (this.viewModel.pasteTemplate = void 0), this.viewModel.pasteTemplate !== void 0) {
-        t.selectedItem || this._templateGallery.value?.select(this.viewModel.pasteTemplate);
+        t.selectedTemplateId !== this.viewModel.pasteTemplate.id && (t.selectedTemplateId = this.viewModel.pasteTemplate.id);
         return;
       }
-      let i;
-      for (const a of t.items) {
-        if ("items" in a) {
-          if (a.items.length > 0) {
-            i = a.items[0];
-            break;
-          }
-          continue;
-        }
-        i = a;
-        break;
-      }
-      i && t.select(i);
+      if (t.effectiveTemplates.length === 0)
+        return;
+      const i = t.effectiveTemplates[0].templates[0];
+      i && (this.viewModel.pasteTemplate = i, t.selectedTemplateId = i.id);
     });
   }
   _renderFlowCommandStart(t) {
@@ -1775,11 +1764,11 @@ class st extends he {
       this.viewModel.activeFlowPage = "merge-page";
     }} title=${this._messages.seeMergeOptions ?? ue}>${this._messages.seeMergeOptions}</calcite-link>` : null}</calcite-notice></div>` : null}${this.viewModel.clipboardAndTemplateSupportAttributes && this.viewModel.pasteTemplate ? this._renderAttributeCheckbox(!this.viewModel.clipboardAndTemplateSupportAttributes) : null}${this.viewModel.clipboardAndTemplateSupportAttributes ? null : this._renderAttributeCheckbox(!1)}</div><calcite-list .hidden=${this.viewModel.activeCommand !== "paste-merge"} .label=${this._messages.pasteCommandChoices ?? ""} selection-mode=none selection-appearance=border><calcite-list-item .label=${this._messages.mergeOptionsTitle} .description=${this._messages.mergeOptionsDesc} .disabled=${this.viewModel.updating} @click=${() => {
       this.viewModel.activeFlowPage = "merge-page";
-    }}><calcite-icon slot=content-start icon=configure></calcite-icon><calcite-icon slot=content-end icon=chevron-right></calcite-icon></calcite-list-item></calcite-list><div>${this.viewModel.workingLayers.length > 0 ? d`<arcgis-feature-templates-legacy .disabledItemFunction=${(i) => !!(i.template && ie(i.template) && i.template.type !== "feature")} class="paste-feature-templates" .layers=${this.viewModel.workingLayers} selection-mode=single @arcgisPropertyChange=${(i) => {
+    }}><calcite-icon slot=content-start icon=configure></calcite-icon><calcite-icon slot=content-end icon=chevron-right></calcite-icon></calcite-list-item></calcite-list><div>${this.viewModel.workingLayers.length > 0 ? d`<arcgis-feature-templates .applicationDisabledFunction=${(i) => !!(i.template && ie(i.template) && i.template.type !== "feature")} class="paste-feature-templates" .layers=${this.viewModel.workingLayers} @arcgisTemplatesChanged=${() => {
       this._checkAndUpdateInitialPasteTemplate();
-    }} @arcgisSelect=${(i) => {
-      this.viewModel.pasteTemplate = i.detail.item;
-    }} .view=${this.viewModel.view} .referenceElement=${this.referenceElement} ${D(this._templateGallery)}></arcgis-feature-templates-legacy>` : d`<calcite-notice open icon=exclamation-point kind=warning><div slot=message>${b(this._messages.noMatchingEditableLayers ?? "", { num: this.maximumFeatureCount })}</div></calcite-notice>`}</div></div></calcite-panel>${this._renderApplying()}</calcite-flow-item>`) : w("paste-gallery", d`<calcite-flow-item .selected=${t} .heading=${this._messages.componentLabel} @calciteFlowItemBack=${(i) => {
+    }} @arcgisSelectTemplate=${(i) => {
+      this.viewModel.pasteTemplate = i.detail.template;
+    }} .view=${this.viewModel.view} .referenceElement=${this.referenceElement} ${D(this._templateGallery)}></arcgis-feature-templates>` : d`<calcite-notice open icon=exclamation-point kind=warning><div slot=message>${b(this._messages.noMatchingEditableLayers ?? "", { num: this.maximumFeatureCount })}</div></calcite-notice>`}</div></div></calcite-panel>${this._renderApplying()}</calcite-flow-item>`) : w("paste-gallery", d`<calcite-flow-item .selected=${t} .heading=${this._messages.componentLabel} @calciteFlowItemBack=${(i) => {
       i.preventDefault(), this.viewModel.hasPasteCommandsPage && (this.viewModel.activeFlowPage = "commands-page");
     }}>${this._renderFlowCommandStart(!this.viewModel.hasPasteCommandsPage)}</calcite-flow-item>`);
   }

package/dist/components/arcgis-paste/index.js

@@ -10,7 +10,7 @@ import "@esri/calcite-components/components/calcite-link";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-icon";
-import "../arcgis-feature-templates-legacy/index.js";
+import "../arcgis-feature-templates/index.js";
 import "../arcgis-feature-title/index.js";
 import "../arcgis-feature-image/index.js";
 import "@esri/calcite-components/components/calcite-chip";

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

@@ -304,7 +304,13 @@ export abstract class ArcgisPopup extends LitElement {
    * ```
    */
   accessor features: Array<Graphic>;
-  /** @default false */
+  /**
+   * When `true`, this prevents the popup from trapping focus when opened.
+   * Preventing focus trapping can be used in scenarios where interactions are expected within the user interface, such as when the popup resides in a panel.
+   *
+   * @default false
+   * @since 5.1
+   */
   accessor focusTrapDisabled: boolean;
   /**
    * This function provides the ability to override either the [arcgis-map.goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) or [arcgis-scene.goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) methods.

package/dist/components/arcgis-slider-scale-range/customElement.d.ts

@@ -234,7 +234,7 @@ export abstract class ArcgisSliderScaleRange extends LitElement {
    * Each region comes from the [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes).
    * See [SupportedRegion](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/types/#SupportedRegion) for the list of regions that are currently supported.
    */
-  accessor region: SupportedRegion | string | undefined;
+  accessor region: SupportedRegion | undefined;
   /**
    * Indicates whether the world scale value is shown in the scale menu.
    *

package/dist/components/arcgis-slider-scale-range/customElement.js

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { g as x, c as p } from "../../chunks/runtime.js";
-import { keyed as _ } from "lit/directives/keyed.js";
-import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
+import { keyed as g } from "lit/directives/keyed.js";
+import { LitElement as _, createEvent as d, safeStyleMap as u, nothing as v } from "@arcgis/lumina";
 import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
-import { u as v } from "../../chunks/useView.js";
+import { u as M } from "../../chunks/useView.js";
 import { u as y } from "../../chunks/useT9n.js";
-import { css as L, html as m } from "lit";
-import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
-import { createRef as b, ref as w } from "lit/directives/ref.js";
+import { css as L, html as r } from "lit";
+import { usePropertyChange as b } from "@arcgis/lumina/controllers";
+import { createRef as $, ref as w } from "lit/directives/ref.js";
 import T from "@arcgis/core/portal/Portal.js";
 const h = /* @__PURE__ */ new Set([
   "ar-iq",
@@ -84,7 +84,35 @@ const h = /* @__PURE__ */ new Set([
   "th-th",
   "zh-cn",
   "zh-tw"
-]), P = L`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:5px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
+]), R = {
+  ar: "iq",
+  bg: "bg",
+  cs: "cz",
+  da: "dk",
+  de: "de",
+  el: "gr",
+  en: "us",
+  es: "es",
+  et: "ee",
+  fi: "fi",
+  fr: "fr",
+  is: "is",
+  it: "it",
+  ja: "jp",
+  ko: "kr",
+  lt: "lt",
+  lv: "lv",
+  nl: "nl",
+  nn: "no",
+  pl: "pl",
+  pt: "br",
+  ro: "ro",
+  ru: "ru",
+  sk: "sk",
+  sv: "se",
+  th: "th",
+  zh: "cn"
+}, P = L`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
   { id: "world", scale: 147914382, minScale: 147914382, maxScale: 1e8 },
   { id: "continent", scale: 5e7, minScale: 99999999, maxScale: 35e6 },
   { id: "countriesBig", scale: 25e6, minScale: 34999999, maxScale: 15e6 },
@@ -106,9 +134,9 @@ const h = /* @__PURE__ */ new Set([
   { id: "rooms", scale: 400, minScale: 400, maxScale: 101 },
   { id: "room", scale: 100, minScale: 100, maxScale: 0 }
 ];
-class R extends g {
+class I extends _ {
   constructor() {
-    super(...arguments), this.messages = y(), this._sliderRef = b(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = v(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = $()("state", "minScale", "maxScale"), this.arcgisReady = d();
+    super(...arguments), this.messages = y(), this._sliderRef = $(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = M(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = b()("state", "minScale", "maxScale"), this.arcgisReady = d();
   }
   static {
     this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showWorldValue: 5, state: 32, view: 0 };
@@ -155,9 +183,9 @@ class R extends g {
         if (s)
           this._layerMinScaleLimit = s[0].scale === 0 ? l[0].minScale : Math.min(l[0].minScale, s[0].scale), !("resampling" in this.layer) || this.layer.resampling || (this._layerMaxScaleLimit = s[s.length - 1].scale);
         else {
-          const r = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
+          const m = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
           let n = 0, o = 0;
-          r && (n = r.minScale, o = r.maxScale), o !== 0 && (this._layerMaxScaleLimit = o), n !== 0 && (this._layerMinScaleLimit = n);
+          m && (n = m.minScale, o = m.maxScale), o !== 0 && (this._layerMaxScaleLimit = o), n !== 0 && (this._layerMinScaleLimit = n);
         }
         this.minScaleLimit = Math.min(this.minScaleLimit, this._layerMinScaleLimit), this.maxScaleLimit = Math.max(this.maxScaleLimit, this._layerMaxScaleLimit);
         const c = this.layer;
@@ -183,18 +211,24 @@ class R extends g {
     if (h.has(e))
       return e;
     if (this.region) {
-      const a = `${this.messages._t9nLocale}-${this.region.toLowerCase()}`;
-      if (h.has(a))
-        return a;
+      const a = this.region.toLowerCase(), t = `${this.messages._t9nLocale}-${a}`;
+      if (h.has(t))
+        return t;
+      for (const s of h)
+        if (s.endsWith(`-${a}`))
+          return s;
     }
     if (this._portalRegion) {
       const a = `${this.messages._t9nLocale}-${this._portalRegion}`;
       if (h.has(a))
         return a;
     }
-    const i = `${this.messages._t9nLocale}-${this.messages._t9nLocale}`;
-    if (h.has(i))
-      return i;
+    const i = R[this.messages._t9nLocale];
+    if (i) {
+      const a = `${this.messages._t9nLocale}-${i}`;
+      if (h.has(a))
+        return a;
+    }
     for (const a of h)
       if (a.startsWith(`${this.messages._t9nLocale}-`))
         return a;
@@ -236,21 +270,21 @@ class R extends g {
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
-    return this.hidePreview || !e ? null : m`<div slot=popover>${e}</div>`;
+    return this.hidePreview || !e ? null : r`<div slot=popover>${e}</div>`;
   }
   render() {
-    return m`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${this._mapScaleToSlider(l[0].minScale)} .fullRangeMax=${this._mapScaleToSlider(l[l.length - 1].maxScale)} .max=${this._mapScaleToSlider(this.maxScaleLimit)} .min=${this._mapScaleToSlider(this.minScaleLimit)} .labelFormatter=${(e, i, a) => a(Math.round(this._mapSliderToScale(e)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : m`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
+    return r`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${this._mapScaleToSlider(l[0].minScale)} .fullRangeMax=${this._mapScaleToSlider(l[l.length - 1].maxScale)} .max=${this._mapScaleToSlider(this.maxScaleLimit)} .min=${this._mapScaleToSlider(this.minScaleLimit)} .labelFormatter=${(e, i, a) => a(Math.round(this._mapSliderToScale(e)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : r`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
   }
   _renderCurrentScaleIndicator(e) {
     const i = this._sliderRef.value, a = i?.fullRangeMax ?? this._mapScaleToSlider(l[l.length - 1].maxScale), t = i?.fullRangeMin ?? this._mapScaleToSlider(l[0].minScale), s = a - t, c = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - t) / s * 100));
-    return _("scale-indicator", m`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
+    return g("scale-indicator", r`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
       position: "absolute",
       left: `${c}%`
     })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}><calcite-icon icon=caret-up scale=s></calcite-icon></div></div>`);
   }
   _renderCustomScaleValue(e, i) {
     const a = Math.round(i).toString();
-    return m`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
+    return r`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
       const s = t.target.querySelector("calcite-input-number");
       this._handleCustomScaleInput(e, s?.value ?? ""), this._customScaleSelected = e;
     }}><calcite-input-number dir=ltr class="scale-menu-input" slot=content-end group-separator inputmode=numeric .max=${l[0].minScale} .min=${l[l.length - 1].maxScale} number-button-type=none .placeholder=${this.messages?.customScaleInputTooltip} prefix-text=1: scale=s step=1 .value=${a} @click=${(t) => t.stopPropagation()} @keydown=${(t) => {
@@ -258,10 +292,10 @@ class R extends g {
     }}></calcite-input-number></calcite-list-item>`;
   }
   _renderScaleMenuButtons(e) {
-    return m`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
+    return r`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
   }
   _renderScaleMenuPopover(e) {
-    return m`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
+    return r`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
       this._activeMenu === e && (this._activeMenu = null);
     }}>${this._renderScaleMenu(e)}</calcite-popover>`;
   }
@@ -269,14 +303,14 @@ class R extends g {
     const i = Math.floor(this._mapScaleToSlider(this._effectiveMaxScale)), a = Math.floor(this._mapScaleToSlider(this._effectiveMinScale)), t = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, s = this.messages.featuredScaleLabels;
     if (!s)
       return;
-    const c = Math.floor(this._mapScaleToSlider(this.maxScaleLimit)), r = Math.floor(this._mapScaleToSlider(this.minScaleLimit)), n = l.filter((o, S) => e === "min" ? S < i && S >= r : S > a && S <= c).map((o) => this._renderScaleMenuItem({
+    const c = Math.floor(this._mapScaleToSlider(this.maxScaleLimit)), m = Math.floor(this._mapScaleToSlider(this.minScaleLimit)), n = l.filter((o, S) => e === "min" ? S < i && S >= m : S > a && S <= c).map((o) => this._renderScaleMenuItem({
       scaleLabel: s[o.id],
       scaleValue: o.scale,
       isSelected: t === o.scale,
       valueVisible: o.id !== "world" || this.showWorldValue,
       type: e
     }));
-    return m`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale != null && this._renderCustomScaleValue(e, t) || ""}${this.view?.scale != null ? this._renderScaleMenuItem({
+    return r`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale != null && this._renderCustomScaleValue(e, t) || ""}${this.view?.scale != null ? this._renderScaleMenuItem({
       scaleValue: this.view.scale,
       scaleLabel: s.current,
       isSelected: t === this.view.scale,
@@ -286,7 +320,7 @@ class R extends g {
   }
   _renderScaleMenuItem(e) {
     const { scaleValue: i, scaleLabel: a, isSelected: t, valueVisible: s } = e, c = i === l[0].scale ? ` ${this.messages.aboveSuffix}` : i === l[l.length - 1].scale ? ` ${this.messages.belowSuffix}` : "";
-    return m`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
+    return r`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
       this._setScale(e.type, i), this._customScaleSelected = null;
     }}></calcite-list-item>`;
   }
@@ -294,17 +328,17 @@ class R extends g {
     const e = this._sliderRef.value?.activeValue;
     if (typeof e != "number")
       return null;
-    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), r = `-${s}px -${c}px`, n = this._getSpriteSheetFile();
-    return m`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${n}.avif`) ?? M} style=${u({
+    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), m = `-${s}px -${c}px`, n = this._getSpriteSheetFile();
+    return r`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${n}.avif`) ?? v} style=${u({
       display: "block",
       height: `${t}px`,
       width: `${t}px`,
-      objectPosition: r,
+      objectPosition: m,
       objectFit: "none"
     })}></div>`;
   }
 }
-p("arcgis-slider-scale-range", R);
+p("arcgis-slider-scale-range", I);
 export {
-  R as ArcgisSliderScaleRange
+  I as ArcgisSliderScaleRange
 };

package/dist/components/arcgis-template-image/customElement.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../index.d.ts" />
+import type TemplateItem from "../arcgis-feature-templates/TemplateItem.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * The Template Image component generates a feature swatch representing a
+ * Feature Template.
+ *
+ * @since 5.1
+ * @internal
+ */
+export abstract class ArcgisTemplateImage extends LitElement {
+  accessor template: TemplateItem | undefined;
+}