@esri/solutions-components 5.1.0-next.69 → 5.1.0-next.70

package/dist/components/selection-tool/customElement.d.ts

@@ -3,7 +3,7 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class SelectionTool extends LitElement {
-  /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: __esri.MapView | undefined;
   /**
    * string: Selected layer id

package/dist/components/selection-tool/customElement.js

@@ -1,67 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { c as getFeatureLayerView } from "../../chunks/mapViewUtils.js";
-import { LitElement, createEvent, noShadowRoot } from "@arcgis/lumina";
-import { css } from "lit";
-import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
-import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";
-const styles = css`@layer{
-/** @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;
-  pointer-events: all !important;
-}
-}`;
-class SelectionTool extends LitElement {
+import { c as a } from "../../chunks/runtime.js";
+import { c as r } from "../../chunks/mapViewUtils.js";
+import { LitElement as c, createEvent as s, noShadowRoot as l } from "@arcgis/lumina";
+import { css as h } from "lit";
+import n from "@arcgis/core/layers/GraphicsLayer";
+import p from "@arcgis/core/widgets/Sketch/SketchViewModel";
+const m = h`@layer{:host{display:block;pointer-events:all!important}}`;
+class d extends c {
   constructor() {
-    super(...arguments);
-    this.selectedLayerId = "";
-    this.tool = "rectangle";
-    this.drawingComplete = createEvent();
-    this.featuresSelected = createEvent();
+    super(...arguments), this.selectedLayerId = "", this.tool = "rectangle", this.drawingComplete = s(), this.featuresSelected = s();
   }
   static {
-    this.properties = { mapView: [0, {}, { attribute: false }], selectedLayerId: 1, tool: 1 };
+    this.properties = { mapView: 0, selectedLayerId: 1, tool: 1 };
   }
   static {
-    this.styles = styles;
+    this.styles = m;
   }
   static {
-    this.shadowRootOptions = noShadowRoot;
+    this.shadowRootOptions = l;
   }
-  willUpdate(changes) {
-    if (changes.has("mapView")) {
-      this.mapViewWatchHandler();
-    }
+  willUpdate(e) {
+    e.has("mapView") && this.mapViewWatchHandler();
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
       this._initSketchViewModel();
     });
   }
-  async toggleSelectionTool(tool, isActive) {
-    this._graphicsLayer?.removeAll();
-    if (this._selectionTool?.state === "active") {
-      this._selectionTool.cancel();
-    }
-    if (isActive) {
-      const selectedTool = tool ?? this.tool;
-      this._selectionTool?.create(selectedTool);
+  async toggleSelectionTool(e, t) {
+    if (this._graphicsLayer?.removeAll(), this._selectionTool?.state === "active" && this._selectionTool.cancel(), t) {
+      const i = e ?? this.tool;
+      this._selectionTool?.create(i);
     }
   }
   async loaded() {
@@ -71,48 +40,33 @@ class SelectionTool extends LitElement {
     return "";
   }
   async init() {
-    if (this.mapView) {
-      this._initSketchViewModel();
-    }
+    this.mapView && this._initSketchViewModel();
   }
   _initSketchViewModel() {
-    this._graphicsLayer = new GraphicsLayer({
+    this._graphicsLayer = new n({
       listMode: "hide"
-    });
-    this._selectionTool = new SketchViewModel({
+    }), this._selectionTool = new p({
       layer: this._graphicsLayer,
       view: this.mapView
-    });
-    if (this._selectionTool) {
-      this._selectionTool.on("create", (e) => {
-        if (e.state === "complete") {
-          this.drawingComplete.emit();
-          const queryGeometry = e.graphic?.geometry;
-          if (queryGeometry) {
-            void this._selectFeatures(queryGeometry);
-          }
-          if (this._graphicsLayer) {
-            this._graphicsLayer.removeAll();
-          }
-        }
-      });
-    }
-    if (this.mapView?.map && this._graphicsLayer) {
-      this.mapView.map.layers.add(this._graphicsLayer);
-    }
+    }), this._selectionTool && this._selectionTool.on("create", (e) => {
+      if (e.state === "complete") {
+        this.drawingComplete.emit();
+        const t = e.graphic?.geometry;
+        t && this._selectFeatures(t), this._graphicsLayer && this._graphicsLayer.removeAll();
+      }
+    }), this.mapView?.map && this._graphicsLayer && this.mapView.map.layers.add(this._graphicsLayer);
   }
-  async _selectFeatures(geometry) {
-    const layerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);
+  async _selectFeatures(e) {
+    const t = this.mapView && await r(this.mapView, this.selectedLayerId);
     try {
-      const query = { geometry };
-      const ids = layerView && await layerView.queryObjectIds(query);
-      this.featuresSelected.emit(ids);
-    } catch (error) {
-      console.error("Error selecting features:", error);
+      const i = { geometry: e }, o = t && await t.queryObjectIds(i);
+      this.featuresSelected.emit(o);
+    } catch (i) {
+      console.error("Error selecting features:", i);
     }
   }
 }
-customElement("selection-tool", SelectionTool);
+a("selection-tool", d);
 export {
-  SelectionTool
+  d as SelectionTool
 };

package/dist/components/solution-builder-assistant/customElement.js

@@ -1,379 +1,137 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { keyed } from "lit/directives/keyed.js";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { LitElement, nothing } from "@arcgis/lumina";
-import { useContextConsumer } from "@arcgis/lumina/context";
-import { b as builderDesignContext } from "../../chunks/deployAppContexts.js";
-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.
- */
-
-.builder-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--calcite-spacing-xxl);
-  text-align: center;
-  color: var(--calcite-color-text-3);
-}
-
-.empty-state calcite-icon {
-  margin-bottom: var(--calcite-spacing-md);
-  color: var(--calcite-color-text-3);
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: var(--calcite-font-size--1);
-}
-
-/* Header container with notice and action bar */
-.header-container {
-  display: flex;
-  align-items: stretch;
-  gap: var(--calcite-spacing-lg);
-  padding-bottom: var(--calcite-spacing-lg);
-}
-
-.header-container calcite-notice {
-  flex: 1;
-  margin: 0;
-}
-
-/* Action bar styling */
-calcite-action-bar {
-  flex-shrink: 0;
-  background: var(--calcite-color-brand);
-  border-left: 1px solid var(--calcite-color-brand-dark);
-}
-
-/* Main content container */
-.content-container {
-  display: flex;
-  gap: var(--calcite-spacing-xl);
-  margin-bottom: var(--calcite-spacing-lg);
-}
-
-/* Solution item section (left side) */
-.solution-item-section {
-  flex: 1;
-  min-width: 0;
-  background: var(--calcite-color-foreground-1);
-  padding: var(--calcite-spacing-lg);
-}
-
-.solution-item-inputs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--calcite-spacing-md);
-}
-
-.thumbnail-inputs-row {
-  display: flex;
-  gap: var(--calcite-spacing-md);
-  align-items: flex-start;
-}
-
-.thumbnail-container {
-  flex-shrink: 0;
-  width: 253px;
-  aspect-ratio: 200 / 133;
-  border: 1px solid var(--calcite-color-border-2);
-  border-radius: var(--calcite-border-radius);
-  overflow: hidden;
-  background: var(--calcite-color-foreground-2);
-}
-
-.thumbnail-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.stacked-inputs {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--calcite-spacing-md);
-  min-width: 0;
-}
-
-.stacked-inputs calcite-label {
-  min-width: 0;
-}
-
-.stacked-inputs calcite-input-text,
-.stacked-inputs calcite-text-area {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-.stacked-inputs calcite-text-area {
-  max-height: 150px;
-}
-
-.tags-row {
-  width: 100%;
-  min-width: 0;
-}
-
-.tags-row calcite-combobox {
-  width: 100%;
-}
-
-/* Actions section (right side) */
-.actions-section {
-  flex-shrink: 0;
-  width: 200px;
-  background: var(--calcite-color-foreground-1);
-  padding: var(--calcite-spacing-lg);
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--calcite-spacing-md);
-}
-
-/* Tabs section */
-.tabs-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.tabs-section calcite-tabs {
-  height: 100%;
-}
-
-.feature-layer-placeholder {
-  padding: var(--calcite-spacing-lg);
-  color: var(--calcite-color-text-3);
-}
-
-/* Item edit popover */
-.popover-content {
-  padding: var(--calcite-spacing-lg);
-  min-width: 300px;
-}
-
-.popover-field {
-  margin-top: var(--calcite-spacing-md);
-}
-
-.popover-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--calcite-spacing-sm);
-  margin-top: var(--calcite-spacing-lg);
-}
-`;
-class SolutionBuilderAssistant extends LitElement {
+import { c as r } from "../../chunks/runtime.js";
+import { css as d, html as a } from "lit";
+import { keyed as p } from "lit/directives/keyed.js";
+import { u as h } from "../../chunks/useT9n.js";
+import { LitElement as u, nothing as l } from "@arcgis/lumina";
+import { useContextConsumer as g } from "@arcgis/lumina/context";
+import { b as m } from "../../chunks/deployAppContexts.js";
+const b = d`.builder-content{display:flex;flex-direction:column;flex:1;overflow:auto}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--calcite-spacing-xxl);text-align:center;color:var(--calcite-color-text-3)}.empty-state calcite-icon{margin-bottom:var(--calcite-spacing-md);color:var(--calcite-color-text-3)}.empty-state p{margin:0;font-size:var(--calcite-font-size--1)}.header-container{display:flex;align-items:stretch;gap:var(--calcite-spacing-lg);padding-bottom:var(--calcite-spacing-lg)}.header-container calcite-notice{flex:1;margin:0}calcite-action-bar{flex-shrink:0;background:var(--calcite-color-brand);border-left:1px solid var(--calcite-color-brand-dark)}.content-container{display:flex;gap:var(--calcite-spacing-xl);margin-bottom:var(--calcite-spacing-lg)}.solution-item-section{flex:1;min-width:0;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.solution-item-inputs{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.thumbnail-inputs-row{display:flex;gap:var(--calcite-spacing-md);align-items:flex-start}.thumbnail-container{flex-shrink:0;width:253px;aspect-ratio:200 / 133;border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-border-radius);overflow:hidden;background:var(--calcite-color-foreground-2)}.thumbnail-container img{width:100%;height:100%;object-fit:cover}.stacked-inputs{flex:1;display:flex;flex-direction:column;gap:var(--calcite-spacing-md);min-width:0}.stacked-inputs calcite-label{min-width:0}.stacked-inputs calcite-input-text,.stacked-inputs calcite-text-area{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.stacked-inputs calcite-text-area{max-height:150px}.tags-row{width:100%;min-width:0}.tags-row calcite-combobox{width:100%}.actions-section{flex-shrink:0;width:200px;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.action-buttons{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.tabs-section{flex:1;display:flex;flex-direction:column;min-height:0}.tabs-section calcite-tabs{height:100%}.feature-layer-placeholder{padding:var(--calcite-spacing-lg);color:var(--calcite-color-text-3)}.popover-content{padding:var(--calcite-spacing-lg);min-width:300px}.popover-field{margin-top:var(--calcite-spacing-md)}.popover-actions{display:flex;justify-content:flex-end;gap:var(--calcite-spacing-sm);margin-top:var(--calcite-spacing-lg)}`;
+class v extends u {
   constructor() {
-    super();
-    this.design = null;
-    this._design = null;
-    this._translations = useT9n({ name: "solution-builder-assistant", blocking: true });
-    this._isDirty = false;
-    this._openPopoverId = null;
-    this._editingItemTitle = "";
-    this._editingItemDescription = "";
-    this._designContextConsumer = useContextConsumer({
-      context: builderDesignContext,
-      subscribe: true,
-      callback: (value) => {
-        if (value?.design) {
-          this._design = value.design;
-        }
+    super(), this.design = null, this._design = null, this._translations = h({ name: "solution-builder-assistant", blocking: !0 }), this._isDirty = !1, this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "", this._designContextConsumer = g({
+      context: m,
+      subscribe: !0,
+      callback: (t) => {
+        t?.design && (this._design = t.design);
       }
-    });
-    this._handleUndo = () => {
+    }), this._handleUndo = () => {
       console.log("Undo clicked - to be implemented");
-    };
-    this._handleRedo = () => {
+    }, this._handleRedo = () => {
       console.log("Redo clicked - to be implemented");
-    };
-    this._handleTitleChange = (value) => {
+    }, this._handleTitleChange = (t) => {
       if (!this._design)
         return;
-      const updatedDesign = {
+      const i = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          title: value
+          title: t
         }
       };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleDescriptionChange = (value) => {
+      this._design = i, this._isDirty = !0;
+    }, this._handleDescriptionChange = (t) => {
       if (!this._design)
         return;
-      const updatedDesign = {
+      const i = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          description: value
+          description: t
         }
       };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleTagsChange = (event) => {
+      this._design = i, this._isDirty = !0;
+    }, this._handleTagsChange = (t) => {
       if (!this._design)
         return;
-      const tags = Array.from(event.target.selectedItems).map((item) => item.value);
+      const i = Array.from(t.target.selectedItems).map((e) => e.value);
       this._design = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          tags
+          tags: i
         }
-      };
-      this._isDirty = true;
-    };
-    this._handleItemPopoverOpen = (item) => {
-      this._openPopoverId = item.id;
-      this._editingItemTitle = item.title || "";
-      this._editingItemDescription = item.description || "";
-      this.requestUpdate();
-    };
-    this._handleCloseItemPopover = () => {
-      this._openPopoverId = null;
-      this._editingItemTitle = "";
-      this._editingItemDescription = "";
-    };
-    this._handleClosePopover = async (popoverId) => {
-      const popover = this.renderRoot.querySelector(`#${popoverId}`);
-      if (popover) {
-        popover.open = false;
-        await popover.updateComplete;
-      }
-      this._handleCloseItemPopover();
-    };
-    this._handleApplyItemChanges = (itemId) => {
+      }, this._isDirty = !0;
+    }, this._handleItemPopoverOpen = (t) => {
+      this._openPopoverId = t.id, this._editingItemTitle = t.title || "", this._editingItemDescription = t.description || "", this.requestUpdate();
+    }, this._handleCloseItemPopover = () => {
+      this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "";
+    }, this._handleClosePopover = async (t) => {
+      const i = this.renderRoot.querySelector(`#${t}`);
+      i && (i.open = !1, await i.updateComplete), this._handleCloseItemPopover();
+    }, this._handleApplyItemChanges = (t) => {
       if (!this._design)
         return;
-      const updatedItems = this._design.items.map((item) => item.id === itemId ? { ...item, title: this._editingItemTitle, description: this._editingItemDescription } : item);
-      const updatedDesign = {
+      const i = this._design.items.map((c) => c.id === t ? { ...c, title: this._editingItemTitle, description: this._editingItemDescription } : c), e = {
         ...this._design,
-        items: updatedItems
+        items: i
       };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleDeploy = async () => {
-      if (!this._design)
-        return;
-      console.log("Deploy design:", this._design);
-    };
-    this._designContextConsumer;
+      this._design = e, this._isDirty = !0;
+    }, this._handleDeploy = async () => {
+      this._design && console.log("Deploy design:", this._design);
+    }, this._designContextConsumer;
   }
   static {
-    this.properties = { design: [1, { type: Object }, {}], _design: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _isDirty: [16, {}, { state: true }], _openPopoverId: [16, {}, { state: true }], _editingItemTitle: [16, {}, { state: true }], _editingItemDescription: [16, {}, { state: true }] };
+    this.properties = { design: [1, { type: Object }], _design: 16, _translations: 16, _isDirty: 16, _openPopoverId: 16, _editingItemTitle: 16, _editingItemDescription: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = b;
   }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("design")) {
-      this._design = this.design;
-    }
+  willUpdate(t) {
+    t.has("design") && (this._design = this.design);
   }
   render() {
-    const t = this._translations;
-    if (!t) {
-      return html`<div>Loading...</div>`;
-    }
-    if (!this._design) {
-      return this._renderEmptyState();
-    }
-    return html`<calcite-panel><div class="header-container">${this._renderNoticeBar()}${this._renderActionBar()}</div><div class="builder-content">${this._renderMainContent()}${this._renderTabsSection()}</div></calcite-panel>`;
+    return this._translations ? this._design ? a`<calcite-panel><div class="header-container">${this._renderNoticeBar()}${this._renderActionBar()}</div><div class="builder-content">${this._renderMainContent()}${this._renderTabsSection()}</div></calcite-panel>` : this._renderEmptyState() : a`<div>Loading...</div>`;
   }
   _renderEmptyState() {
-    return html`<calcite-panel><div class="empty-state"><calcite-icon icon=layer scale=l></calcite-icon><p>No solution design loaded</p></div></calcite-panel>`;
+    return a`<calcite-panel><div class="empty-state"><calcite-icon icon=layer scale=l></calcite-icon><p>No solution design loaded</p></div></calcite-panel>`;
   }
   _renderNoticeBar() {
     const t = this._translations;
-    return html`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${t.noticeTitle}</div><div slot=message>${t.noticeMessage}</div></calcite-notice>`;
+    return a`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${t.noticeTitle}</div><div slot=message>${t.noticeMessage}</div></calcite-notice>`;
   }
   _renderActionBar() {
     const t = this._translations;
-    return html`<calcite-action-bar layout=horizontal expand-disabled><calcite-action .text=${t.undo} text-enabled icon=undo disabled @click=${this._handleUndo}></calcite-action><calcite-action .text=${t.redo} text-enabled icon=redo disabled @click=${this._handleRedo}></calcite-action></calcite-action-bar>`;
+    return a`<calcite-action-bar layout=horizontal expand-disabled><calcite-action .text=${t.undo} text-enabled icon=undo disabled @click=${this._handleUndo}></calcite-action><calcite-action .text=${t.redo} text-enabled icon=redo disabled @click=${this._handleRedo}></calcite-action></calcite-action-bar>`;
   }
   _renderMainContent() {
-    return html`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
+    return a`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
   }
   _renderSolutionItemInputs() {
-    const t = this._translations;
-    const thumbnailUrl = this._design?.solution?.thumbnailUrl || "";
-    const title = this._design?.solution?.title || "";
-    const description = this._design?.solution?.description || "";
-    const tags = this._design?.solution?.tags || [];
-    return html`<div class="solution-item-inputs"><div class="thumbnail-inputs-row"><div class="thumbnail-container"><img src=${(thumbnailUrl || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="133"%3E%3Crect fill="%23ddd" width="200" height="133"/%3E%3C/svg%3E') ?? nothing} alt=${t.solutionThumbnail ?? nothing}></div><div class="stacked-inputs"><calcite-label>${t.name}<calcite-input-text .placeholder=${t.namePlaceholder} .value=${title} @input=${(e) => this._handleTitleChange(e.target.value)}></calcite-input-text></calcite-label><calcite-label>${t.description}<calcite-text-area .placeholder=${t.descriptionPlaceholder} .value=${description} resize=none @input=${(e) => this._handleDescriptionChange(e.target.value)}></calcite-text-area></calcite-label></div></div><div class="tags-row"><calcite-label>${t.tags}${keyed(tags.join(","), html`<calcite-combobox .label=${t.tags} .placeholder=${t.tagsPlaceholder} selection-mode=multiple allow-custom-values @calciteComboboxChange=${(e) => this._handleTagsChange(e)}>${tags.map((tag) => html`<calcite-combobox-item .value=${tag} .heading=${tag} selected></calcite-combobox-item>`)}</calcite-combobox>`)}</calcite-label></div></div>`;
+    const t = this._translations, i = this._design?.solution?.thumbnailUrl || "", e = this._design?.solution?.title || "", c = this._design?.solution?.description || "", o = this._design?.solution?.tags || [];
+    return a`<div class="solution-item-inputs"><div class="thumbnail-inputs-row"><div class="thumbnail-container"><img src=${(i || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="133"%3E%3Crect fill="%23ddd" width="200" height="133"/%3E%3C/svg%3E') ?? l} alt=${t.solutionThumbnail ?? l}></div><div class="stacked-inputs"><calcite-label>${t.name}<calcite-input-text .placeholder=${t.namePlaceholder} .value=${e} @input=${(n) => this._handleTitleChange(n.target.value)}></calcite-input-text></calcite-label><calcite-label>${t.description}<calcite-text-area .placeholder=${t.descriptionPlaceholder} .value=${c} resize=none @input=${(n) => this._handleDescriptionChange(n.target.value)}></calcite-text-area></calcite-label></div></div><div class="tags-row"><calcite-label>${t.tags}${p(o.join(","), a`<calcite-combobox .label=${t.tags} .placeholder=${t.tagsPlaceholder} selection-mode=multiple allow-custom-values @calciteComboboxChange=${(n) => this._handleTagsChange(n)}>${o.map((n) => a`<calcite-combobox-item .value=${n} .heading=${n} selected></calcite-combobox-item>`)}</calcite-combobox>`)}</calcite-label></div></div>`;
   }
   _renderActionButtons() {
     const t = this._translations;
-    return html`<div class="action-buttons"><calcite-button appearance=solid width=full icon-start=launch>${t.deploy}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=diagram>${t.viewDiagram}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=information>${t.openHelp}</calcite-button><calcite-button appearance=outline kind=danger width=full icon-start=trash>${t.discard}</calcite-button></div>`;
+    return a`<div class="action-buttons"><calcite-button appearance=solid width=full icon-start=launch>${t.deploy}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=diagram>${t.viewDiagram}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=information>${t.openHelp}</calcite-button><calcite-button appearance=outline kind=danger width=full icon-start=trash>${t.discard}</calcite-button></div>`;
   }
   _renderTabsSection() {
     const t = this._translations;
-    return html`<div class="tabs-section"><calcite-tabs bordered layout=center><calcite-tab-nav slot=title-group><calcite-tab-title>${t.contents}</calcite-tab-title><calcite-tab-title icon-start=layers>${t.featureLayer}</calcite-tab-title></calcite-tab-nav><calcite-tab>${this._renderContentsTab()}</calcite-tab><calcite-tab>${this._renderFeatureLayerTab()}</calcite-tab></calcite-tabs></div>`;
+    return a`<div class="tabs-section"><calcite-tabs bordered layout=center><calcite-tab-nav slot=title-group><calcite-tab-title>${t.contents}</calcite-tab-title><calcite-tab-title icon-start=layers>${t.featureLayer}</calcite-tab-title></calcite-tab-nav><calcite-tab>${this._renderContentsTab()}</calcite-tab><calcite-tab>${this._renderFeatureLayerTab()}</calcite-tab></calcite-tabs></div>`;
   }
   _renderContentsTab() {
-    const t = this._translations;
-    const items = this._design?.items || [];
-    return html`<div><calcite-list .label=${t.solutionContentItems}>${items.map((item) => {
-      const actionId = `edit-action-${item.id}`;
-      return html`<calcite-list-item .label=${item.title} .description=${item.description || ""}><solution-item-icon slot=content-start .designType=${item.type}></solution-item-icon><calcite-action slot=actions-end id=${actionId ?? nothing} icon=edit-attributes .text=${t.edit} scale=s></calcite-action></calcite-list-item>`;
-    })}</calcite-list>${items.map((item) => {
-      const actionId = `edit-action-${item.id}`;
-      const popoverId = `edit-popover-${item.id}`;
-      const isEditingThisItem = this._openPopoverId === item.id;
-      return html`<calcite-popover id=${popoverId ?? nothing} .label=${t.editItemContent} .referenceElement=${actionId} placement=auto @calcitePopoverBeforeOpen=${() => this._handleItemPopoverOpen(item)} @calcitePopoverClose=${() => this._handleCloseItemPopover()}><div class="popover-content"><calcite-label>${t.title}<calcite-input-text .value=${isEditingThisItem ? this._editingItemTitle : item.title} @input=${(e) => {
-        this._editingItemTitle = e.target.value;
-      }}></calcite-input-text></calcite-label><calcite-label class="popover-field">${t.description}<calcite-text-area .value=${isEditingThisItem ? this._editingItemDescription : item.description} resize=none rows=4 @input=${(e) => {
-        this._editingItemDescription = e.target.value;
-      }}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(e) => {
-        e.stopPropagation();
-        this._handleApplyItemChanges(item.id);
-      }}>${t.apply}</calcite-button><calcite-button appearance=outline @click=${async (e) => {
-        e.stopPropagation();
-        await this._handleClosePopover(popoverId);
+    const t = this._translations, i = this._design?.items || [];
+    return a`<div><calcite-list .label=${t.solutionContentItems}>${i.map((e) => {
+      const c = `edit-action-${e.id}`;
+      return a`<calcite-list-item .label=${e.title} .description=${e.description || ""}><solution-item-icon slot=content-start .designType=${e.type}></solution-item-icon><calcite-action slot=actions-end id=${c ?? l} icon=edit-attributes .text=${t.edit} scale=s></calcite-action></calcite-list-item>`;
+    })}</calcite-list>${i.map((e) => {
+      const c = `edit-action-${e.id}`, o = `edit-popover-${e.id}`, n = this._openPopoverId === e.id;
+      return a`<calcite-popover id=${o ?? l} .label=${t.editItemContent} .referenceElement=${c} placement=auto @calcitePopoverBeforeOpen=${() => this._handleItemPopoverOpen(e)} @calcitePopoverClose=${() => this._handleCloseItemPopover()}><div class="popover-content"><calcite-label>${t.title}<calcite-input-text .value=${n ? this._editingItemTitle : e.title} @input=${(s) => {
+        this._editingItemTitle = s.target.value;
+      }}></calcite-input-text></calcite-label><calcite-label class="popover-field">${t.description}<calcite-text-area .value=${n ? this._editingItemDescription : e.description} resize=none rows=4 @input=${(s) => {
+        this._editingItemDescription = s.target.value;
+      }}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(s) => {
+        s.stopPropagation(), this._handleApplyItemChanges(e.id);
+      }}>${t.apply}</calcite-button><calcite-button appearance=outline @click=${async (s) => {
+        s.stopPropagation(), await this._handleClosePopover(o);
       }}>${t.close}</calcite-button></div></div></calcite-popover>`;
     })}</div>`;
   }
   _renderFeatureLayerTab() {
-    return html`<div class="feature-layer-placeholder">\r\n        Feature Layer configuration will go here</div>`;
+    return a`<div class="feature-layer-placeholder">\r\n        Feature Layer configuration will go here</div>`;
   }
 }
-customElement("solution-builder-assistant", SolutionBuilderAssistant);
+r("solution-builder-assistant", v);
 export {
-  SolutionBuilderAssistant
+  v as SolutionBuilderAssistant
 };