@arcgis/map-components 4.32.0-next.8 → 4.32.0-next.81

package/dist/components/arcgis-basemap-gallery/customElement.d.ts

@@ -1,38 +1,41 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference types="../../index.d.ts" />
 import { Use } from '@arcgis/components-controllers';
-import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { Nil } from '@arcgis/components-utils';
-import { PublicLitElement as LitElement } from '@arcgis/lumina';
+import { JsxNode, ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { HeadingLevel } from '../../support/heading';
+import { ArcgisReferenceElement } from '../../utils/component-utils';
 
-declare const useBasemapGalleryWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
-    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+declare const useBasemapGalleryViewModel: (component: import('@arcgis/components-controllers').StencilLifecycles & {
+    manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
-    autoDestroyDisabled?: boolean | undefined;
-    destroy?: (() => Promise<void>) | undefined;
-} & Pick<__esri.BasemapGallery, "label" | "source" | "viewModel" | "icon" | "headingLevel" | "disabled" | "activeBasemap"> & {
-    reactiveUtils?: __esri.reactiveUtils | undefined;
-    state?: unknown;
-    viewModel?: __esri.BasemapGalleryViewModel | undefined;
-    icon: string | Nil;
-    label: string | Nil;
-    referenceElement: string | Nil | ArcgisReferenceElement;
-    position: __esri.UIPosition;
+    autoDestroyDisabled?: boolean;
+    destroy?: () => Promise<void>;
+} & Pick<__esri.BasemapGalleryViewModel, never> & {
+    reactiveUtils?: typeof __esri.reactiveUtils;
+    state?: "ready" | "disabled" | "loading" | "unsupported" | undefined;
+    icon: Nil | string;
+    label: Nil | string;
+    referenceElement: ArcgisReferenceElement | Nil | string;
     arcgisReady: import('@arcgis/components-controllers').EventEmitter;
+    position: __esri.UIPosition;
     arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
         name: string;
     }> | undefined;
     el: HTMLElement & {
-        childElem?: (HTMLElement & {
-            ownedBy?: HTMLElement | undefined;
-        }) | undefined;
-        view?: __esri.MapView | Nil | __esri.SceneView;
+        childElem?: HTMLElement & {
+            ownedBy?: HTMLElement;
+        };
+        view?: __esri.MapView | __esri.SceneView | undefined;
     };
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
-    editConstructorProperties(props: __esri.BasemapGalleryProperties): __esri.BasemapGalleryProperties | Promise<__esri.BasemapGalleryProperties>;
-} | undefined) => __esri.BasemapGallery;
-export declare class ArcgisBasemapGallery extends LitElement implements Use<typeof useBasemapGalleryWidget> {
+    editConstructorProperties(props: unknown): unknown;
+} | undefined) => __esri.BasemapGalleryViewModel;
+/** [BasemapGallery](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html) displays a collection images representing basemaps from [ArcGIS.com](https://www.arcgis.com/index.html) or a user-defined set of map or image services. When a new basemap is selected from the BasemapGallery, the map's basemap layers are removed and replaced with the basemap layers of the associated basemap selected in the gallery.
+ */
+export declare class ArcgisBasemapGallery extends LitElement {
     activeBasemap: __esri.Basemap;
     /**
      * If true, the component will not be destroyed automatically when it is
@@ -42,19 +45,40 @@ export declare class ArcgisBasemapGallery extends LitElement implements Use<type
      * memory leaks.
      */
     autoDestroyDisabled: boolean;
+    /**
+     * When `true`, sets the component to a disabled state so the user cannot interact with it.
+     */
     disabled: boolean;
-    headingLevel: number;
+    /**
+     * Indicates the heading level to use for the message "No basemaps available"
+     * when no basemaps are available in the BasemapGallery.
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Icon which represents the component.
+     * Typically used when the component is controlled by another component (e.g. by the Expand component).
+     * Search [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/) for possible values.
+     */
     icon: string;
+    /**
+     * The component's default label.
+     */
     label: string;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
+    /**
+     * The source for basemaps that the component will display.
+     */
     source: __esri.LocalBasemapsSource | __esri.PortalBasemapsSource;
+    /**
+     * The current state of the component.
+     */
     readonly state: "ready" | "disabled" | "loading" | "unsupported";
     /** Permanently destroy the component */
     destroy(): Promise<void>;
-    readonly arcgisPropertyChange: CustomEvent<{
+    readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "activeBasemap";
     }>;
-    readonly arcgisReady: CustomEvent<undefined>;
+    readonly arcgisReady: TargetedEvent<this, undefined>;
 }
 export {};

package/dist/components/arcgis-basemap-gallery/customElement.js

@@ -1,32 +1,111 @@
-import { c as e } from "../../chunks/runtime.js";
-import { newWidgetsBasemapGallery as t } from "@arcgis/core-adapter";
-import { m as s } from "../../chunks/useWidget.js";
-import { usePropertyChange as i } from "@arcgis/components-controllers";
-import { LitElement as a, createEvent as o, noShadowRoot as r } from "@arcgis/lumina";
+import { c as y } from "../../chunks/runtime.js";
+import { html as d } from "lit-html";
+import { load as u, usePropertyChange as f } from "@arcgis/components-controllers";
+import { classes as g } from "@arcgis/components-utils";
+import { importApplicationsComponentsBasemapUtils as b, importCoreReactiveUtils as M, newWidgetsBasemapGalleryBasemapGalleryViewModel as $ } from "@arcgis/core-adapter";
+import { safeClassMap as r, LitElement as B, createEvent as _, noShadowRoot as x, nothing as v, safeStyleMap as R } from "@arcgis/lumina";
+import { u as L, m as E } from "../../chunks/useViewModel.js";
+import { unsafeStatic as I, html as U } from "lit/static-html.js";
+import { g as n } from "../../chunks/globalCss.js";
+import { c as l, B as C } from "../../chunks/basemap-gallery-item.js";
+import { css as D } from "@lit/reactive-element/css-tag.js";
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
- * v4.32.0-next.8
+ * v4.32.0-next.81
 */
-const l = s(t);
-class h extends a {
+function S({ level: o, class: t, children: e }) {
+  const s = G(o), i = `h${s}`, a = I(i);
+  return U`<${a} .ariaLevel=${String(s)} class=${r(g(n.heading, t))} role=heading>${e}</${a}>`;
+}
+function A(o, t, e) {
+  return Math.min(Math.max(o, t), e);
+}
+function G(o) {
+  return A(Math.ceil(o), 1, 6);
+}
+const k = D`arcgis-basemap-gallery{display:block}`, K = E($), h = {
+  // Below this width, items are displayed as a single column and the thumbnail is placed above the title.
+  small: 200,
+  // Below this width, items are displayed as a single column but with the thumbnail side-by-side
+  // with the title. The title is square.
+  default: 280,
+  // Below this width, items are displayed as in `default`, but the thumbnail has an aspect ratio of 1.5
+  // Above this width, items are displayed in a grid.
+  wide: 420
+};
+class H extends B {
   constructor() {
-    super(...arguments), this.widget = l(this), this.viewModel = this.widget.viewModel, this.activeBasemap = this.widget.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.source = this.widget.source, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("activeBasemap", "state"), this.arcgisReady = o();
+    super(...arguments), this.messages = L({}), this.viewModel = K(this), this.basemapUtils = u(b), this.reactiveUtils = u(M), this._width = 0, this._state = "", this._itemsState = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("activeBasemap", "state"), this.arcgisReady = _();
+  }
+  static {
+    this.properties = { _width: 16, _state: 16, _itemsState: 16, activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
   }
   static {
-    this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
+    this.shadowRootOptions = x;
   }
   static {
-    this.shadowRootOptions = r;
+    this.styles = k;
   }
-  // #endregion
-  // #region Public Methods
+  //#endregion
+  //#region Public Methods
   /** Permanently destroy the component */
   async destroy() {
     await this.manager.destroy();
   }
+  //#endregion
+  //#region Lifecycle
+  loaded() {
+    this.manager.onLifecycle(() => [
+      this.reactiveUtils.when(() => this.source, () => {
+        this.viewModel.loadSource();
+      }, { sync: !0, initial: !0 }),
+      this.reactiveUtils.watch(() => this.source.state, () => {
+        this._state = this.source.state;
+      }, { sync: !0 }),
+      this.reactiveUtils.watch(() => this.viewModel.items.filter((s) => s.state !== "ready").length, (s) => {
+        this._itemsState = s > 0 ? "loading" : "ready";
+      }, { sync: !0 }),
+      this.reactiveUtils.watch(() => this.viewModel.activeBasemap, () => {
+        this.el.childElem?.querySelector(`[data-basemap="${this.viewModel.activeBasemap.id}"]`)?.focus();
+      }, { sync: !0 })
+    ]);
+    const t = new ResizeObserver((s) => {
+      for (const i of s)
+        this._width = i.contentRect.width;
+    }), e = this.el.childElem;
+    e && t.observe(e);
+  }
+  //#endregion
+  //#region Private Methods
+  _getRoundRobinIndex(t, e) {
+    return (t + e) % e;
+  }
+  _handleKeyDown(t) {
+    const { key: e } = t;
+    if (!["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e))
+      return;
+    t.preventDefault();
+    const { items: i, activeBasemapIndex: a } = this.viewModel, m = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(a - 1, -1), i.length) : this._getRoundRobinIndex(a + 1, i.length), c = i.at(m);
+    c?.state === "ready" && (this.viewModel.activeBasemap = c.basemap);
+  }
+  //#endregion
+  //#region Rendering
+  render() {
+    const t = this.source.state === "loading", e = this.disabled || this.state === "disabled", s = this.viewModel.items, i = {
+      [l.sourceLoading]: t,
+      [n.disabled]: e,
+      "esri-component": !0
+      // For compatibility with Esri View UI
+    }, a = this._width;
+    a <= h.small || a >= h.wide ? i[l.layoutGrid] = !0 : a < h.default && (i[l.narrowItems] = !0);
+    const m = t ? d`<div class=${r(l.loader)}></div>` : null, c = t ? null : s.length > 0 ? d`<div aria-disabled=${this.disabled ?? v} aria-label=${this.label ?? v} class=${r(l.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${s.map((p, w) => C({ disabled: e, item: p, itemIndex: w, viewModel: this.viewModel, messages: this.messages, state: p.state }))}</div>` : d`<div class=${r(n.empty)}>${S({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
+    return d`<div class=${r(g(l.base, n.widget, n.panel, i))} style=${R({
+      "--esri-basemap-gallery-small": `${h.small}px`
+    })}>${[m, c]}</div>`;
+  }
 }
-e("arcgis-basemap-gallery", h);
+y("arcgis-basemap-gallery", H);
 export {
-  h as ArcgisBasemapGallery
+  H as ArcgisBasemapGallery
 };

package/dist/components/arcgis-basemap-layer-list/customElement.d.ts

@@ -1,38 +1,41 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference types="../../index.d.ts" />
 import { Use } from '@arcgis/components-controllers';
 import { Nil } from '@arcgis/components-utils';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
-import { PublicLitElement as LitElement } from '@arcgis/lumina';
+import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 declare const useBasemapLayerListWidget: (component: import('@arcgis/components-controllers').StencilLifecycles & {
-    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
-    autoDestroyDisabled?: boolean | undefined;
-    destroy?: (() => Promise<void>) | undefined;
-} & Pick<__esri.BasemapLayerList, "label" | "viewModel" | "icon" | "headingLevel" | "collapsed" | "dragEnabled" | "filterPlaceholder" | "minFilterItems" | "selectedItems" | "selectionMode" | "catalogOptions" | "visibilityAppearance" | "baseFilterText" | "baseListItemCreatedFunction" | "basemapTitle" | "editingTitle" | "referenceFilterText" | "referenceListItemCreatedFunction"> & {
-    reactiveUtils?: __esri.reactiveUtils | undefined;
+    autoDestroyDisabled?: boolean;
+    destroy?: () => Promise<void>;
+} & Pick<__esri.BasemapLayerList, "label" | "viewModel" | "icon" | "headingLevel" | "collapsed" | "dragEnabled" | "filterPlaceholder" | "minFilterItems" | "selectedItems" | "selectionMode" | "catalogOptions" | "visibilityAppearance" | "baseFilterPredicate" | "baseFilterText" | "baseListItemCreatedFunction" | "basemapTitle" | "editingTitle" | "referenceFilterPredicate" | "referenceFilterText" | "referenceListItemCreatedFunction"> & {
+    reactiveUtils?: typeof __esri.reactiveUtils;
     state?: unknown;
     viewModel?: __esri.BasemapLayerListViewModel | undefined;
-    icon: string | Nil;
-    label: string | Nil;
-    referenceElement: string | Nil | ArcgisReferenceElement;
+    icon: Nil | string;
+    label: Nil | string;
+    referenceElement: ArcgisReferenceElement | Nil | string;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/components-controllers').EventEmitter;
     arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
         name: string;
     }> | undefined;
     el: HTMLElement & {
-        childElem?: (HTMLElement & {
-            ownedBy?: HTMLElement | undefined;
-        }) | undefined;
-        view?: __esri.MapView | Nil | __esri.SceneView;
+        childElem?: HTMLElement & {
+            ownedBy?: HTMLElement;
+        };
+        view?: __esri.MapView | __esri.SceneView | Nil;
     };
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }, options?: {
     editConstructorProperties(props: __esri.BasemapLayerListProperties): __esri.BasemapLayerListProperties | Promise<__esri.BasemapLayerListProperties>;
 } | undefined) => __esri.BasemapLayerList;
-export declare class ArcgisBasemapLayerList extends LitElement implements Use<typeof useBasemapLayerListWidget> {
+/** [BasemapLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapLayerList.html) provides a way to display a list of [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers and switch on/off their visibility. [Base layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#baseLayers) and [reference layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#referenceLayers) are divided into separate sections. When editing is enabled, layers can be reordered by dragging and dropping between the lists and the title can be edited.
+ */
+export declare class ArcgisBasemapLayerList extends LitElement {
     /**
      * If true, the component will not be destroyed automatically when it is
      * disconnected from the document. This is useful when you want to move the
@@ -41,6 +44,7 @@ export declare class ArcgisBasemapLayerList extends LitElement implements Use<ty
      * memory leaks.
      */
     autoDestroyDisabled: boolean;
+    baseFilterPredicate: __esri.BaseFilterPredicate;
     baseFilterText: string;
     /** A collection of ListItems representing the baseLayers. */
     get baseItems(): __esri.Collection<__esri.ListItem>;
@@ -59,11 +63,18 @@ export declare class ArcgisBasemapLayerList extends LitElement implements Use<ty
     hideHeading: boolean | undefined;
     hideReferenceLayers: boolean | undefined;
     hideStatusIndicators: boolean | undefined;
+    /**
+     * Icon which represents the component.
+     * Typically used when the component is controlled by another component (e.g. by the Expand component).
+     * Search [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/) for possible values.
+     */
     icon: string;
+    /** The component's default label. */
     label: string;
     minFilterItems: number;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
+    referenceFilterPredicate: __esri.ReferenceFilterPredicate;
     referenceFilterText: string;
     /** A collection of ListItems representing the referenceLayers. */
     get referenceItems(): __esri.Collection<__esri.ListItem>;
@@ -80,10 +91,10 @@ export declare class ArcgisBasemapLayerList extends LitElement implements Use<ty
     visibilityAppearance: "default" | "checkbox";
     /** Permanently destroy the component */
     destroy(): Promise<void>;
-    readonly arcgisPropertyChange: CustomEvent<{
+    readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state";
     }>;
-    readonly arcgisReady: CustomEvent<undefined>;
-    readonly arcgisTriggerAction: CustomEvent<__esri.BasemapLayerListTriggerActionEvent>;
+    readonly arcgisReady: TargetedEvent<this, undefined>;
+    readonly arcgisTriggerAction: TargetedEvent<this, __esri.BasemapLayerListTriggerActionEvent>;
 }
 export {};

package/dist/components/arcgis-basemap-layer-list/customElement.js

@@ -2,23 +2,27 @@ import { c as e } from "../../chunks/runtime.js";
 import { usePropertyChange as t } from "@arcgis/components-controllers";
 import { newWidgetsBasemapLayerList as i } from "@arcgis/core-adapter";
 import { m as s } from "../../chunks/useWidget.js";
-import { LitElement as r, createEvent as a, noShadowRoot as o } from "@arcgis/lumina";
-import { reEmitEvent as l } from "@arcgis/components-controllers/accessor";
+import { LitElement as r, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
+import { reEmitEvent as o } from "@arcgis/components-controllers/accessor";
+import { css as h } from "@lit/reactive-element/css-tag.js";
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
- * v4.32.0-next.8
+ * v4.32.0-next.81
 */
-const h = s(i);
-class n extends r {
+const d = h`arcgis-basemap-layer-list{display:block}`, n = s(i);
+class c extends r {
   constructor() {
-    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.baseFilterText = this.widget.baseFilterText, this.baseListItemCreatedFunction = this.widget.baseListItemCreatedFunction, this.basemapTitle = this.widget.basemapTitle, this.catalogOptions = this.widget.catalogOptions, this.collapsed = this.widget.collapsed, this.dragEnabled = this.widget.dragEnabled, this.editingTitle = this.widget.editingTitle, this.filterPlaceholder = this.widget.filterPlaceholder, this.headingLevel = this.widget.headingLevel, this.hideBaseLayers = this.widget.visibleElements.baseLayers, this.hideFlow = this.widget.visibleElements.flow, this.hideHeading = this.widget.visibleElements.heading, this.hideReferenceLayers = this.widget.visibleElements.referenceLayers, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.referenceFilterText = this.widget.referenceFilterText, this.referenceListItemCreatedFunction = this.widget.referenceListItemCreatedFunction, this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showEditTitleButton = this.widget.visibleElements.editTitleButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = l(() => this.widget, "trigger-action");
+    super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.baseFilterPredicate = this.widget.baseFilterPredicate, this.baseFilterText = this.widget.baseFilterText, this.baseListItemCreatedFunction = this.widget.baseListItemCreatedFunction, this.basemapTitle = this.widget.basemapTitle, this.catalogOptions = this.widget.catalogOptions, this.collapsed = this.widget.collapsed, this.dragEnabled = this.widget.dragEnabled, this.editingTitle = this.widget.editingTitle, this.filterPlaceholder = this.widget.filterPlaceholder, this.headingLevel = this.widget.headingLevel, this.hideBaseLayers = this.widget.visibleElements.baseLayers, this.hideFlow = this.widget.visibleElements.flow, this.hideHeading = this.widget.visibleElements.heading, this.hideReferenceLayers = this.widget.visibleElements.referenceLayers, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.referenceFilterPredicate = this.widget.referenceFilterPredicate, this.referenceFilterText = this.widget.referenceFilterText, this.referenceListItemCreatedFunction = this.widget.referenceListItemCreatedFunction, this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showEditTitleButton = this.widget.visibleElements.editTitleButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = o(() => this.widget, "trigger-action");
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, baseFilterText: 1, baseItems: 32, baseListItemCreatedFunction: 0, basemapTitle: 1, catalogLayerList: 32, catalogOptions: 0, collapsed: 7, dragEnabled: 5, editingTitle: 5, filterPlaceholder: 1, headingLevel: 9, hideBaseLayers: 5, hideFlow: 5, hideHeading: 5, hideReferenceLayers: 5, hideStatusIndicators: 5, icon: 1, label: 1, minFilterItems: 9, position: 1, referenceElement: 1, referenceFilterText: 1, referenceItems: 32, referenceListItemCreatedFunction: 0, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showEditTitleButton: 5, showErrors: 5, showFilter: 5, showTemporaryLayerIndicators: 5, state: 3, visibilityAppearance: 1 };
+    this.properties = { autoDestroyDisabled: 5, baseFilterPredicate: 0, baseFilterText: 1, baseItems: 32, baseListItemCreatedFunction: 0, basemapTitle: 1, catalogLayerList: 32, catalogOptions: 0, collapsed: 7, dragEnabled: 5, editingTitle: 5, filterPlaceholder: 1, headingLevel: 9, hideBaseLayers: 5, hideFlow: 5, hideHeading: 5, hideReferenceLayers: 5, hideStatusIndicators: 5, icon: 1, label: 1, minFilterItems: 9, position: 1, referenceElement: 1, referenceFilterPredicate: 0, referenceFilterText: 1, referenceItems: 32, referenceListItemCreatedFunction: 0, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showEditTitleButton: 5, showErrors: 5, showFilter: 5, showTemporaryLayerIndicators: 5, state: 3, visibilityAppearance: 1 };
   }
   static {
-    this.shadowRootOptions = o;
+    this.shadowRootOptions = l;
+  }
+  static {
+    this.styles = d;
   }
   /** A collection of ListItems representing the baseLayers. */
   get baseItems() {
@@ -39,7 +43,7 @@ class n extends r {
     await this.manager.destroy();
   }
 }
-e("arcgis-basemap-layer-list", n);
+e("arcgis-basemap-layer-list", c);
 export {
-  n as ArcgisBasemapLayerList
+  c as ArcgisBasemapLayerList
 };

package/dist/components/arcgis-basemap-toggle/customElement.d.ts

@@ -1,29 +1,30 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference types="../../index.d.ts" />
 import { ArcgisReferenceElement } from '../../utils/component-utils';
 import { Nil } from '@arcgis/components-utils';
 import { Use } from '@arcgis/components-controllers';
-import { JsxNode, PublicLitElement as LitElement } from '@arcgis/lumina';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 declare const useBasemapToggleViewModel: (component: import('@arcgis/components-controllers').StencilLifecycles & {
-    manager: import('@arcgis/components-controllers').ControllerManager<never>;
+    manager: import('@arcgis/components-controllers').ControllerManager;
     el: HTMLElement;
-    autoDestroyDisabled?: boolean | undefined;
-    destroy?: (() => Promise<void>) | undefined;
+    autoDestroyDisabled?: boolean;
+    destroy?: () => Promise<void>;
 } & Pick<__esri.BasemapToggleViewModel, never> & {
-    reactiveUtils?: __esri.reactiveUtils | undefined;
+    reactiveUtils?: typeof __esri.reactiveUtils;
     state?: "ready" | "disabled" | "loading" | "incompatible-next-basemap" | undefined;
-    icon: string | Nil;
-    label: string | Nil;
-    referenceElement: string | Nil | ArcgisReferenceElement;
+    icon: Nil | string;
+    label: Nil | string;
+    referenceElement: ArcgisReferenceElement | Nil | string;
     arcgisReady: import('@arcgis/components-controllers').EventEmitter;
     position: __esri.UIPosition;
     arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
         name: string;
     }> | undefined;
     el: HTMLElement & {
-        childElem?: (HTMLElement & {
-            ownedBy?: HTMLElement | undefined;
-        }) | undefined;
+        childElem?: HTMLElement & {
+            ownedBy?: HTMLElement;
+        };
         view?: __esri.MapView | __esri.SceneView | undefined;
     };
     autoDestroyDisabled: boolean;
@@ -31,7 +32,10 @@ declare const useBasemapToggleViewModel: (component: import('@arcgis/components-
 }, options?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => __esri.BasemapToggleViewModel;
-export declare class ArcgisBasemapToggle extends LitElement implements Use<typeof useBasemapToggleViewModel> {
+/** [BasemapToggle](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html) allows an end-user to switch between two basemaps. The toggled basemap is set inside the [view's](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html#view) [map](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#map) object.
+ */
+export declare class ArcgisBasemapToggle extends LitElement {
+    private messages;
     readonly activeBasemap: __esri.Basemap;
     /**
      * If true, the component will not be destroyed automatically when
@@ -46,7 +50,7 @@ export declare class ArcgisBasemapToggle extends LitElement implements Use<typeo
      * one (e.g. in the Expand widget).
      */
     icon: Nil | string;
-    /** The widget's default label. */
+    /** The component's default label. */
     label: string | undefined;
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this.messages._overrides;
@@ -61,9 +65,9 @@ export declare class ArcgisBasemapToggle extends LitElement implements Use<typeo
     destroy(): Promise<void>;
     /** Toggles to the [next basemap](#nextBasemap). */
     toggle(): Promise<any>;
-    readonly arcgisPropertyChange: CustomEvent<{
+    readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "nextBasemap";
     }>;
-    readonly arcgisReady: CustomEvent<undefined>;
+    readonly arcgisReady: TargetedEvent<this, undefined>;
 }
 export {};

package/dist/components/arcgis-basemap-toggle/customElement.js

@@ -1,15 +1,16 @@
 import { c as B } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
-import { g as b } from "../../chunks/globalCss.js";
+import { g as v } from "../../chunks/globalCss.js";
 import { u as f, m as S } from "../../chunks/useViewModel.js";
 import { classes as r } from "@arcgis/components-utils";
 import { load as T, usePropertyChange as x } from "@arcgis/components-controllers";
 import { importApplicationsComponentsBasemapUtils as M, newWidgetsBasemapToggleBasemapToggleViewModel as k } from "@arcgis/core-adapter";
-import { LitElement as C, createEvent as I, noShadowRoot as A, safeClassMap as a, nothing as m, safeStyleMap as u } from "@arcgis/lumina";
+import { LitElement as C, createEvent as I, noShadowRoot as A, safeClassMap as a, nothing as c, safeStyleMap as u } from "@arcgis/lumina";
+import { css as L } from "@lit/reactive-element/css-tag.js";
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.32/esri/copyright.txt for details.
- * v4.32.0-next.8
+ * v4.32.0-next.81
 */
 const s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
   base: s,
@@ -20,10 +21,10 @@ const s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
   overlay: `${o}__overlay ${s}__image-overlay`,
   title: `${o}__title ${s}__title`,
   overlayScrim: `${o}__overlay-scrim`
-}, L = S(k);
-class U extends C {
+}, U = L`arcgis-basemap-toggle{display:block}`, D = S(k);
+class E extends C {
   constructor() {
-    super(...arguments), this.basemapUtils = T(M), this.messages = f(), this.viewModel = L(this), this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.icon = "layer-basemap", this.nextBasemap = this.viewModel.nextBasemap, this.position = "top-left", this.showTitle = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = x()("nextBasemap", "state"), this.arcgisReady = I();
+    super(...arguments), this.basemapUtils = T(M), this.messages = f(), this.viewModel = D(this), this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.icon = "layer-basemap", this.nextBasemap = this.viewModel.nextBasemap, this.position = "top-left", this.showTitle = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = x()("nextBasemap", "state"), this.arcgisReady = I();
   }
   static {
     this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, nextBasemap: 0, position: 3, referenceElement: 1, showTitle: 5, state: 3 };
@@ -31,6 +32,9 @@ class U extends C {
   static {
     this.shadowRootOptions = A;
   }
+  static {
+    this.styles = U;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -50,13 +54,13 @@ class U extends C {
   // #endregion
   // #region Rendering
   render() {
-    const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, $ = t.state === "loading", p = t.state === "incompatible-next-basemap", c = i?.title ?? "", d = i && i.loadStatus !== "loaded";
+    const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, $ = t.state === "loading", p = t.state === "incompatible-next-basemap", m = i?.title ?? "", d = i && i.loadStatus !== "loaded";
     let g;
-    const h = this.showTitle && c, v = p, y = h || v, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
-    return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(e.title)} title=${c ?? m}>${c}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? m}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(r(e.base, b.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? m} .disabled=${p} kind=neutral .label=${(this.label ?? void 0) || ""} @click=${() => void this.toggle()} title=${((this.label ?? void 0) || "") ?? m}><div class=${a(r(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${u(w)}></div></div><div class=${a(e.container)}><div class=${a(r(e.image, d ? e.imageLoading : null))} style=${u(_)}>${d || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(b.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
+    const h = this.showTitle && m, b = p, y = h || b, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
+    return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(e.title)} title=${m ?? c}>${m}</span>` : null}${b ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? c}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(r(e.base, v.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? c} .disabled=${p} kind=neutral .label=${this.label ?? void 0} @click=${() => void this.toggle()} title=${this.label ?? void 0 ?? c}><div class=${a(r(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${u(w)}></div></div><div class=${a(e.container)}><div class=${a(r(e.image, d ? e.imageLoading : null))} style=${u(_)}>${d || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(v.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
   }
 }
-B("arcgis-basemap-toggle", U);
+B("arcgis-basemap-toggle", E);
 export {
-  U as ArcgisBasemapToggle
+  E as ArcgisBasemapToggle
 };

package/dist/components/arcgis-basemap-toggle/index.d.ts

@@ -1,4 +1,4 @@
-import "@esri/calcite-components/dist/components/calcite-scrim";
-import "@esri/calcite-components/dist/components/calcite-icon";
-import "@esri/calcite-components/dist/components/calcite-button";
+import "@esri/calcite-components/components/calcite-scrim";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

package/dist/components/arcgis-basemap-toggle/index.js

@@ -1,4 +1,4 @@
-import "@esri/calcite-components/dist/components/calcite-scrim";
-import "@esri/calcite-components/dist/components/calcite-icon";
-import "@esri/calcite-components/dist/components/calcite-button";
+import "@esri/calcite-components/components/calcite-scrim";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";