@esri/solutions-components 5.1.0-next.4 → 5.1.0-next.41

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

@@ -4,11 +4,11 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapLegend extends LitElement {
   /**
-   * esri/widgets/Legend: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
+   * esri/widgets/Legend: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
    *
    * Legend instance
    */
   accessor legendWidget: __esri.Legend | undefined;
-  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: __esri.MapView | undefined;
 }

package/dist/components/map-legend/customElement.js

@@ -1,22 +1,45 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { createRef as n, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as r } from "@arcgis/lumina";
-import d from "@arcgis/core/widgets/Legend";
-const m = i`:host{display:block}`;
-class l extends r {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement } from "@arcgis/lumina";
+import Legend from "@arcgis/core/widgets/Legend";
+const styles = css`/**
+ * @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* TODO update all of these :host */
+:host {
+  display: block;
+}`;
+class MapLegend extends LitElement {
   constructor() {
-    super(...arguments), this._legendElement = n();
+    super(...arguments);
+    this._legendElement = createRef();
   }
   static {
-    this.properties = { mapView: 0, legendWidget: 0 };
+    this.properties = { mapView: [0, {}, { attribute: false }], legendWidget: [0, {}, { attribute: false }] };
   }
   static {
-    this.styles = m;
+    this.styles = styles;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
@@ -24,20 +47,28 @@ class l extends r {
     });
   }
   render() {
-    return s`<div ${a(this._legendElement)}></div>`;
+    return html`<div ${ref(this._legendElement)}></div>`;
   }
   async loaded() {
-    this.mapView && await this.mapViewWatchHandler();
+    if (this.mapView) {
+      await this.mapViewWatchHandler();
+    }
   }
-  _initLegend(e) {
-    e && (this.legendWidget ? this.legendWidget.view = e : this.legendWidget = new d({
-      container: this._legendElement.value,
-      respectLayerDefinitionExpression: !0,
-      view: e
-    }));
+  _initLegend(view) {
+    if (view) {
+      if (!this.legendWidget) {
+        this.legendWidget = new Legend({
+          container: this._legendElement.value,
+          respectLayerDefinitionExpression: true,
+          view
+        });
+      } else {
+        this.legendWidget.view = view;
+      }
+    }
   }
 }
-t("map-legend", l);
+customElement("map-legend", MapLegend);
 export {
-  l as MapLegend
+  MapLegend
 };

package/dist/components/map-picker/customElement.js

@@ -1,105 +1,274 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c } from "../../chunks/runtime.js";
-import { u as h } from "../../chunks/useT9n.js";
-import { css as m, html as s } from "lit";
-import { createRef as n, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as p, safeClassMap as d, safeStyleMap as b } from "@arcgis/lumina";
-const u = m`:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-foreground-1);width:100%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-bottom-width:1px!important;border-width:0px}.border-bottom-2{border-bottom-width:2px!important;border-width:0px}.border-solid{border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000}.display-none{display:none}.adjusted-height{max-height:calc(100% - 68px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}.popover-map-list{overflow:auto;width:250px}.max-width-200{max-width:200px}.min-width-150{min-width:150px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}`;
-class _ extends f {
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+  --solutions-theme-foreground-color: var(--calcite-color-surface-2);
+  width: 100%;
+}
+
+.width-full {
+  width: 100%;
+}
+
+.height-full {
+  height: 100%;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.border-bottom-1 {
+  border-bottom-width: 1px !important;
+  border-width: 0px;
+}
+
+.border-bottom-2 {
+  border-bottom-width: 2px !important;
+  border-width: 0px;
+}
+
+.border-solid {
+  border-style: solid;
+  border-color: var(--calcite-color-border-3);
+}
+
+.border-left-right {
+  border-left: 1px solid var(--calcite-color-border-3);
+  border-right: 1px solid var(--calcite-color-border-3);
+}
+
+.action-bar-size {
+  height: 51px;
+  width: 100%;
+}
+
+.map-list {
+  display: flex;
+  flex-direction: column;
+  animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
+  background-color: var(--calcite-color-surface-1);
+  z-index: 1000;
+}
+
+.display-none {
+  display: none;
+}
+
+.adjusted-height {
+  max-height: calc(100% - 68px);
+  overflow-y: auto;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.popover-map-list {
+  overflow: auto;
+  width: 250px;
+}
+
+.max-width-200 {
+  max-width: 200px;
+}
+
+.min-width-150 {
+  min-width: 150px;
+}
+
+calcite-action-bar {
+  --calcite-internal-action-bar-gap: 0px;
+  --calcite-internal-action-bar-padding: 0px;
+}`;
+class MapPicker extends LitElement {
   constructor() {
-    super(), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._isValidWebMap = !0, this._translations = h({ name: "map-picker", blocking: !0 }), this._list = n(), this._loadedId = "", this._skipEditCheck = !1, this._popover = n(), this._mapPickerButton = n(), this.beforeMapInfoChange = p(), this.mapInfoChange = p(), this.listenOn(window, "mapChanged", this.mapChanged);
+    super();
+    this.mapInfos = [];
+    this.isMapLayout = false;
+    this.showMapListInPopover = false;
+    this.referenceElement = "";
+    this.selectedWebMapId = "";
+    this._mapListExpanded = false;
+    this._isValidWebMap = true;
+    this._translations = useT9n({ name: "map-picker", blocking: true });
+    this._list = createRef();
+    this._loadedId = "";
+    this._skipEditCheck = false;
+    this._popover = createRef();
+    this._mapPickerButton = createRef();
+    this.beforeMapInfoChange = createEvent();
+    this.mapInfoChange = createEvent();
+    this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
-    this.properties = { mapInfos: 0, isMapLayout: 5, height: 9, showMapListInPopover: 5, referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: 16, _isValidWebMap: 16, _translations: 16 };
+    this.properties = { mapInfos: [0, {}, { attribute: false }], isMapLayout: [5, {}, { type: Boolean }], height: [9, {}, { type: Number }], showMapListInPopover: [5, {}, { type: Boolean }], referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: [16, {}, { state: true }], _isValidWebMap: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = u;
+    this.styles = styles;
   }
-  willUpdate(t) {
-    t.has("mapInfos") && this.hasUpdated && this.mapInfosWatchHandler(this.mapInfos, t.get("mapInfos")), t.has("selectedWebMapId") && this.hasUpdated && this.selectedWebMapIdWatchHandler(this.selectedWebMapId);
+  willUpdate(changes) {
+    if (changes.has("mapInfos") && this.hasUpdated) {
+      void this.mapInfosWatchHandler(this.mapInfos, changes.get("mapInfos"));
+    }
+    if (changes.has("selectedWebMapId") && this.hasUpdated) {
+      void this.selectedWebMapIdWatchHandler(this.selectedWebMapId);
+    }
   }
-  _webMapInfoWatchHandler(t, e) {
-    t && JSON.stringify(t) !== JSON.stringify(e) && (this._loadedId = t?.id, this.mapInfoChange.emit(t));
+  _webMapInfoWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._loadedId = v?.id;
+      this.mapInfoChange.emit(v);
+    }
   }
-  async mapInfosWatchHandler(t, e) {
-    if (t && JSON.stringify(t) !== JSON.stringify(e)) {
-      const i = this._getWebMapInfo();
-      this._webMapSelected(i);
+  async mapInfosWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      const webMapInfo = this._getWebMapInfo();
+      this._webMapSelected(webMapInfo);
     }
   }
-  async selectedWebMapIdWatchHandler(t) {
-    this._loadedId = t;
+  async selectedWebMapIdWatchHandler(v) {
+    this._loadedId = v;
   }
-  async setMapByID(t, e = !1) {
-    this._skipEditCheck = e;
-    const i = this.mapInfos?.filter((a) => a.id === t);
-    t && i?.length > 0 && this._webMapSelected(i[0]), this._skipEditCheck = !1;
+  async setMapByID(id, skipEditCheck = false) {
+    this._skipEditCheck = skipEditCheck;
+    const mapInfos = this.mapInfos?.filter((i) => i.id === id);
+    if (id && mapInfos?.length > 0) {
+      this._webMapSelected(mapInfos[0]);
+    }
+    this._skipEditCheck = false;
   }
   async close() {
-    this._mapListExpanded && (this._mapListExpanded = !1);
+    if (this._mapListExpanded) {
+      this._mapListExpanded = false;
+    }
   }
-  async toggle(t) {
-    this._mapListExpanded = t;
+  async toggle(mapListExpanded) {
+    this._mapListExpanded = mapListExpanded;
   }
-  async mapChanged(t) {
-    const e = t.detail.isValid;
-    this._isValidWebMap = e;
+  async mapChanged(_evt) {
+    const _isValid = _evt.detail.isValid;
+    this._isValidWebMap = _isValid;
   }
   render() {
-    return s`${!this.showMapListInPopover && this._getToolbar() || ""}${this.showMapListInPopover ? this._getMapListPopover() : this._getMapNameList(this._mapListExpanded)}`;
+    return html`${!this.showMapListInPopover && this._getToolbar() || ""}${this.showMapListInPopover ? this._getMapListPopover() : this._getMapNameList(this._mapListExpanded)}`;
   }
   loaded() {
-    const t = this._getWebMapInfo();
-    t && this._webMapSelected(t);
+    const webMapInfo = this._getWebMapInfo();
+    if (webMapInfo) {
+      this._webMapSelected(webMapInfo);
+    }
   }
   _getMapPicker() {
-    const t = "map-picker-expand-toggle", e = this._mapListExpanded ? "chevron-up" : "chevron-down", i = this.isMapLayout ? "" : "position-absolute", a = this.isMapLayout ? "max-width-200" : "width-full", l = this._isValidWebMap ? "map" : "exclamation-mark-triangle";
-    return s`<div class=${d(a)}><calcite-button alignment=icon-end-space-between appearance=transparent class=${`width-full height-full ${i}`} .iconEnd=${e} .iconStart=${l} id=${t} kind=neutral @click=${() => this._chooseMap()} width=full ${r(this._mapPickerButton)}>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${t}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
+    const id = "map-picker-expand-toggle";
+    const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
+    const position = this.isMapLayout ? "" : "position-absolute";
+    const width = this.isMapLayout ? "max-width-200" : "width-full";
+    const iconStart = this._isValidWebMap ? "map" : "exclamation-mark-triangle";
+    return html`<div class=${safeClassMap(width)}><calcite-button alignment=icon-end-space-between appearance=transparent class=${`width-full height-full ${position}`} .iconEnd=${mapListIcon} .iconStart=${iconStart} id=${id} kind=neutral @click=${() => this._chooseMap()} width=full ${ref(this._mapPickerButton)}>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${id}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
   }
   _getToolbar() {
-    const t = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", e = this.isMapLayout ? "" : "position-relative";
-    return s`<div class=${`display-flex border-left-right ${e}`}><calcite-action-bar class=${`border-solid action-bar-size overflow-hidden ${t}`} expand-disabled layout=horizontal slot=header>${this._getMapPicker()}${this._updateMapPickerIconColor()}</calcite-action-bar></div>`;
+    const borderBottom = this.isMapLayout ? "border-bottom-1" : "border-bottom-2";
+    const position = this.isMapLayout ? "" : "position-relative";
+    return html`<div class=${`display-flex border-left-right ${position}`}><calcite-action-bar class=${`border-solid action-bar-size overflow-hidden ${borderBottom}`} expand-disabled layout=horizontal slot=header>${this._getMapPicker()}${this._updateMapPickerIconColor()}</calcite-action-bar></div>`;
   }
   _updateMapPickerIconColor() {
-    this._mapPickerButton.value?.componentOnReady().then(() => {
-      const e = this._mapPickerButton.value?.shadowRoot?.lastChild;
-      let i = null;
-      if (e && e instanceof HTMLElement) {
-        const a = e.getElementsByClassName("icon icon--start");
-        a.length > 0 && (i = a[0]);
+    void this._mapPickerButton.value?.componentOnReady().then(() => {
+      const buttonEl = this._mapPickerButton.value;
+      const lastChild = buttonEl?.shadowRoot?.lastChild;
+      let iconStart = null;
+      if (lastChild && lastChild instanceof HTMLElement) {
+        const iconElements = lastChild.getElementsByClassName("icon icon--start");
+        if (iconElements.length > 0) {
+          iconStart = iconElements[0];
+        }
+      }
+      if (iconStart) {
+        if (this._isValidWebMap) {
+          iconStart.style.setProperty("color", "var(--calcite-color-text-1)");
+        } else {
+          iconStart.style.setProperty("color", "var(--calcite-color-status-danger)");
+        }
       }
-      i && (this._isValidWebMap ? i.style.setProperty("color", "var(--calcite-color-text-1)") : i.style.setProperty("color", "var(--calcite-color-status-danger)"));
     });
   }
-  _getMapNameList(t) {
-    const e = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", a = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", l = t ? `map-list border-solid ${a} adjusted-height ${i} ${e}` : "display-none";
-    return s`<div class=${d(l)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
+  _getMapNameList(show) {
+    const position = this.showMapListInPopover ? "position-relative" : "position-absolute";
+    const width = this.isMapLayout ? "max-width-200 min-width-150" : "width-full";
+    const borderBottom = this.isMapLayout ? "border-bottom-1" : "border-bottom-2";
+    const listClass = show ? `map-list border-solid ${borderBottom} adjusted-height ${width} ${position}` : "display-none";
+    return html`<div class=${safeClassMap(listClass)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${ref(this._list)}>${this.mapInfos.map((mapInfo) => {
+      return html`<calcite-list-item .label=${mapInfo.name} @click=${() => this._webMapSelected(mapInfo)} .selected=${mapInfo.id === this._loadedId} .value=${mapInfo.id}></calcite-list-item>`;
+    })}</calcite-list></div>`;
   }
   _getMapListPopover() {
-    const t = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
-    return s`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
+    const style = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
+    return html`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} ${ref(this._popover)}><div style=${safeStyleMap(style)} class=popover-map-list>${this._getMapNameList(true)}</div></calcite-popover>`;
   }
   _getWebMapInfo() {
-    let t = this.mapInfos.find((e) => this.selectedWebMapId === e.id);
-    if (!t && this.mapInfos.length > 0 && (t = this.mapInfos[0]), !t)
+    let webMapInfo = this.mapInfos.find((mapInfo) => this.selectedWebMapId === mapInfo.id);
+    if (!webMapInfo && this.mapInfos.length > 0) {
+      webMapInfo = this.mapInfos[0];
+    }
+    if (!webMapInfo) {
       throw new Error("No valid web map info available");
-    return t;
-  }
-  _webMapSelected(t) {
-    const e = this._loadedId;
-    this._loadedId = t.id;
-    let i = !1;
-    this._skipEditCheck ? i = !0 : this.beforeMapInfoChange.emit({
-      currentId: e,
-      mapInfo: t,
-      ref: this.el
-    }).defaultPrevented || (i = !0), i && (this._webMapInfoWatchHandler(t, this._webMapInfo), this._webMapInfo = t), this._popover.value && (this._popover.value.open = !1), this._mapListExpanded = !1;
+    }
+    return webMapInfo;
+  }
+  _webMapSelected(webMapInfo) {
+    const currentId = this._loadedId;
+    this._loadedId = webMapInfo.id;
+    let updateWebMapInfo = false;
+    if (this._skipEditCheck) {
+      updateWebMapInfo = true;
+    } else {
+      const _evt = this.beforeMapInfoChange.emit({
+        currentId,
+        mapInfo: webMapInfo,
+        ref: this.el
+      });
+      if (!_evt.defaultPrevented) {
+        updateWebMapInfo = true;
+      }
+    }
+    if (updateWebMapInfo) {
+      this._webMapInfoWatchHandler(webMapInfo, this._webMapInfo);
+      this._webMapInfo = webMapInfo;
+    }
+    if (this._popover.value) {
+      this._popover.value.open = false;
+    }
+    this._mapListExpanded = false;
   }
   _chooseMap() {
     this._mapListExpanded = !this._mapListExpanded;
   }
 }
-c("map-picker", _);
+customElement("map-picker", MapPicker);
 export {
-  _ as MapPicker
+  MapPicker
 };

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

@@ -4,7 +4,7 @@ import type { ISearchConfiguration } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapSearch extends LitElement {
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/MapView: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: __esri.MapView | undefined;
   /**
    * boolean: When true the selected feature popup will be shown when serach result is found
@@ -27,6 +27,6 @@ export abstract class MapSearch extends LitElement {
    * @default ''
    */
   accessor searchTerm: string;
-  /** esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html */
+  /** esri/widgets/Search: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html */
   accessor searchWidget: __esri.widgetsSearch | undefined;
 }

package/dist/components/map-search/customElement.js

@@ -1,23 +1,55 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as d, html as p } from "lit";
-import { createRef as u, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as f } from "@arcgis/lumina";
-import g from "@arcgis/core/widgets/Search";
-import S from "@arcgis/core/layers/FeatureLayer";
-const w = d`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
-class y extends f {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement } from "@arcgis/lumina";
+import Search from "@arcgis/core/widgets/Search";
+import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}
+
+.search-widget {
+  width: 100% !important;
+  border: 1px solid var(--calcite-color-border-input);
+}`;
+class MapSearch extends LitElement {
   constructor() {
-    super(...arguments), this.popupEnabled = !1, this.resultGraphicEnabled = !1, this.searchTerm = "", this._searchElement = u();
+    super(...arguments);
+    this.popupEnabled = false;
+    this.resultGraphicEnabled = false;
+    this.searchTerm = "";
+    this._searchElement = createRef();
   }
   static {
-    this.properties = { mapView: 0, popupEnabled: 5, resultGraphicEnabled: 5, searchConfiguration: 0, searchTerm: 1, searchWidget: 0 };
+    this.properties = { mapView: [0, {}, { attribute: false }], popupEnabled: [5, {}, { type: Boolean }], resultGraphicEnabled: [5, {}, { type: Boolean }], searchConfiguration: [0, {}, { attribute: false }], searchTerm: 1, searchWidget: [0, {}, { attribute: false }] };
   }
   static {
-    this.styles = w;
+    this.styles = styles;
   }
-  willUpdate(t) {
-    t.has("searchConfiguration") && this.watchSearchConfigurationHandler(), t.has("mapView") && this.mapViewWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("searchConfiguration")) {
+      void this.watchSearchConfigurationHandler();
+    }
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
   }
   async watchSearchConfigurationHandler() {
     this._initSearchWidget();
@@ -31,44 +63,74 @@ class y extends f {
     return this._initSearchWidget();
   }
   render() {
-    return p`<div class="search-widget" ${m(this._searchElement)}></div>`;
+    return html`<div class="search-widget" ${ref(this._searchElement)}></div>`;
   }
   _initSearchWidget() {
     if (this.mapView && this._searchElement.value && !this.searchWidget) {
-      let t = {
+      let searchOptions = {
         view: this.mapView,
         container: this._searchElement.value,
         searchTerm: this.searchTerm
       };
-      this.searchConfiguration && (t = {
-        ...this._getSearchConfig(this.searchConfiguration, this.mapView)
-      }), this.searchWidget = new g(t), this.searchWidget && (this.searchWidget.popupEnabled = this.popupEnabled, this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled);
-    } else
-      this.searchWidget && (this.searchWidget.view = this.mapView);
-  }
-  _getSearchConfig(t, s) {
-    const o = "includeDefaultSources", r = t.sources;
-    return r && r?.length > 0 ? (t[o] = !1, r.forEach((i) => {
-      if (i.hasOwnProperty("layer")) {
-        const e = i, a = e.layer?.id, c = a ? s.map?.findLayerById(a) : null, h = e?.layer?.url;
-        c ? e.layer = c : h && (e.layer = new S(h));
+      if (this.searchConfiguration) {
+        const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+        searchOptions = {
+          ...searchConfiguration
+        };
       }
-    }), r?.forEach((i) => {
-      if (i.hasOwnProperty("locator")) {
-        const e = i;
-        if (e?.name === "ArcGIS World Geocoding Service") {
-          const a = e.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
-          e.outFields = a, e.singleLineFieldName = "SingleLine";
-        }
-        e.url = e.url, delete e.url;
+      this.searchWidget = new Search(searchOptions);
+      if (this.searchWidget) {
+        this.searchWidget.popupEnabled = this.popupEnabled;
+        this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled;
+      }
+    } else {
+      if (this.searchWidget) {
+        this.searchWidget.view = this.mapView;
       }
-    })) : t = {
-      ...t,
-      includeDefaultSources: !0
-    }, t;
+    }
+  }
+  _getSearchConfig(searchConfiguration, view) {
+    const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+    const sources = searchConfiguration.sources;
+    if (sources && sources?.length > 0) {
+      searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+      sources.forEach((source) => {
+        const isLayerSource = source.hasOwnProperty("layer");
+        if (isLayerSource) {
+          const layerSource = source;
+          const layerId = layerSource.layer?.id;
+          const layerFromMap = layerId ? view.map?.findLayerById(layerId) : null;
+          const layerUrl = layerSource?.layer?.url;
+          if (layerFromMap) {
+            layerSource.layer = layerFromMap;
+          } else if (layerUrl) {
+            layerSource.layer = new FeatureLayer(layerUrl);
+          }
+        }
+      });
+      sources?.forEach((source) => {
+        const isLocatorSource = source.hasOwnProperty("locator");
+        if (isLocatorSource) {
+          const locatorSource = source;
+          if (locatorSource?.name === "ArcGIS World Geocoding Service") {
+            const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+            locatorSource.outFields = outFields;
+            locatorSource.singleLineFieldName = "SingleLine";
+          }
+          locatorSource.url = locatorSource.url;
+          delete locatorSource.url;
+        }
+      });
+    } else {
+      searchConfiguration = {
+        ...searchConfiguration,
+        includeDefaultSources: true
+      };
+    }
+    return searchConfiguration;
   }
 }
-n("map-search", y);
+customElement("map-search", MapSearch);
 export {
-  y as MapSearch
+  MapSearch
 };