@esri/solutions-components 5.1.0-next.47 → 5.1.0-next.49

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://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;
   /**
    * string: Selected layer id

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

@@ -1,36 +1,67 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-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 {
+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 {
   constructor() {
-    super(...arguments), this.selectedLayerId = "", this.tool = "rectangle", this.drawingComplete = s(), this.featuresSelected = s();
+    super(...arguments);
+    this.selectedLayerId = "";
+    this.tool = "rectangle";
+    this.drawingComplete = createEvent();
+    this.featuresSelected = createEvent();
   }
   static {
-    this.properties = { mapView: 0, selectedLayerId: 1, tool: 1 };
+    this.properties = { mapView: [0, {}, { attribute: false }], selectedLayerId: 1, tool: 1 };
   }
   static {
-    this.styles = m;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = l;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("mapView")) {
+      this.mapViewWatchHandler();
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
       this._initSketchViewModel();
     });
   }
-  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 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 loaded() {
@@ -40,33 +71,48 @@ class d extends c {
     return "";
   }
   async init() {
-    this.mapView && this._initSketchViewModel();
+    if (this.mapView) {
+      this._initSketchViewModel();
+    }
   }
   _initSketchViewModel() {
-    this._graphicsLayer = new n({
+    this._graphicsLayer = new GraphicsLayer({
       listMode: "hide"
-    }), this._selectionTool = new p({
+    });
+    this._selectionTool = new SketchViewModel({
       layer: this._graphicsLayer,
       view: this.mapView
-    }), 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);
+    });
+    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);
+    }
   }
-  async _selectFeatures(e) {
-    const t = this.mapView && await r(this.mapView, this.selectedLayerId);
+  async _selectFeatures(geometry) {
+    const layerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);
     try {
-      const i = { geometry: e }, o = t && await t.queryObjectIds(i);
-      this.featuresSelected.emit(o);
-    } catch (i) {
-      console.error("Error selecting features:", i);
+      const query = { geometry };
+      const ids = layerView && await layerView.queryObjectIds(query);
+      this.featuresSelected.emit(ids);
+    } catch (error) {
+      console.error("Error selecting features:", error);
     }
   }
 }
-a("selection-tool", d);
+customElement("selection-tool", SelectionTool);
 export {
-  d as SelectionTool
+  SelectionTool
 };

package/dist/components/solution-configure-titles/customElement.js

@@ -1,36 +1,150 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as C } from "../../chunks/runtime.js";
-import { u as y } from "../../chunks/useT9n.js";
-import { LitElement as S, createEvent as c, safeClassMap as f } from "@arcgis/lumina";
-import { useContextConsumer as T } from "@arcgis/lumina/context";
-import { css as D, html as u } from "lit";
-import { C as m, I as v, T as $ } from "../../chunks/helpers.js";
-import { createRef as _, ref as p } from "lit-html/directives/ref.js";
-import { c as P } from "../../chunks/deployAppContexts.js";
-import * as b from "@esri/solution-common";
-import { updateGroup as V, updateItem as E, updateItemExtended as w } from "@esri/solution-common";
-import { g as W } from "../../chunks/getRelatedInfos.js";
-const L = D`*[tabindex]:focus-visible{outline-style:solid!important;outline-width:2px!important;outline-color:var(--calcite-color-brand)!important;outline-offset:2px!important}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.font-weight-medium{font-weight:var(--calcite-font-weight-medium)}.font-style-1{font-size:1rem;color:var(--calcite-color-text-2)}.margin-top-0{margin-top:0}.padding-top-20{padding-top:20px}.padding-bottom-2{padding-bottom:2rem}.padding-left-2{padding-left:2rem}.padding-right-2{padding-right:2rem}.padding-end-1{padding-inline-end:1rem}.padding-end-1-2{padding-inline-end:.5rem}.width-full{width:100%}.justify-content-space{justify-content:space-between}`;
-class k extends S {
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { css, html } from "lit";
+import { C as hasInvalidChars, I as ITEM_TITLE_LENGTH, T as TELEMETRY_CATEGORY } from "../../chunks/helpers.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { c as configContext } from "../../chunks/deployAppContexts.js";
+import * as common from "@esri/solution-common";
+import { updateGroup, updateItem, updateItemExtended } from "@esri/solution-common";
+import { g as getRelatedSolutionsInfos } from "../../chunks/getRelatedInfos.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.
+ */
+
+*[tabindex]:focus-visible {
+  outline-style: solid !important;
+  outline-width: 2px !important;
+  outline-color: var(--calcite-color-brand) !important;
+  outline-offset: 2px !important;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-none {
+  display: none;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+.flex-direction-row {
+  flex-direction: row;
+}
+
+.font-weight-medium {
+  font-weight: var(--calcite-font-weight-medium);
+}
+
+.font-style-1 {
+  font-size: 1rem;
+  color: var(--calcite-color-text-2);
+}
+
+.margin-top-0 {
+  margin-top: 0;
+}
+
+.padding-top-20 {
+  padding-top: 20px;
+}
+
+.padding-bottom-2 {
+  padding-bottom: 2rem;
+}
+
+.padding-left-2 {
+  padding-left: 2rem;
+}
+
+.padding-right-2 {
+  padding-right: 2rem;
+}
+
+.padding-end-1 {
+  padding-inline-end: 1rem;
+}
+
+.padding-end-1-2 {
+  padding-inline-end: .5rem;
+}
+
+.width-full {
+  width: 100%;
+}
+
+.justify-content-space {
+  justify-content: space-between;
+}
+`;
+class SolutionConfigureTitles extends LitElement {
   constructor() {
-    super(...arguments), this.open = !1, this.source = "Card Dropdown", this.solutionData = {}, this.templateInfos = [], this._saveDisabled = !1, this._displayTemplateInfos = [], this._hasNameLengthError = !1, this._nonSolutionDependencyItems = [], this._solutionItemsTitlesUpdating = !1, this._translations = y({ name: "solution-configure-titles", blocking: !0 }), this._configContextConsumer = T({
-      context: P,
-      subscribe: !0
-    }), this._defaultPrefix = "", this._defaultSuffix = "", this._loadingDefaultPrefix = !1, this._loadingDefaultSuffix = !1, this._prefixRef = _(), this._prefixValue = "", this._suffixRef = _(), this._suffixValue = "", this._templateInfos = [], this._originalTitles = [], this.solutionConfigureTitlesBeforeClose = c(), this.solutionItemsTitlesChanged = c();
+    super(...arguments);
+    this.open = false;
+    this.source = "Card Dropdown";
+    this.solutionData = {};
+    this.templateInfos = [];
+    this._saveDisabled = false;
+    this._displayTemplateInfos = [];
+    this._hasNameLengthError = false;
+    this._nonSolutionDependencyItems = [];
+    this._solutionItemsTitlesUpdating = false;
+    this._translations = useT9n({ name: "solution-configure-titles", blocking: true });
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this._defaultPrefix = "";
+    this._defaultSuffix = "";
+    this._loadingDefaultPrefix = false;
+    this._loadingDefaultSuffix = false;
+    this._prefixRef = createRef();
+    this._prefixValue = "";
+    this._suffixRef = createRef();
+    this._suffixValue = "";
+    this._templateInfos = [];
+    this._originalTitles = [];
+    this.solutionConfigureTitlesBeforeClose = createEvent();
+    this.solutionItemsTitlesChanged = createEvent();
   }
   static {
-    this.properties = { card: 0, open: 5, source: 1, solutionData: 1, templateInfos: 0, _saveDisabled: 16, _displayTemplateInfos: 16, _hasNameLengthError: 16, _nonSolutionDependencyItems: 16, _solutionItemsTitlesUpdating: 16, _translations: 16 };
+    this.properties = { card: [0, {}, { attribute: false }], open: [5, {}, { type: Boolean }], source: 1, solutionData: 1, templateInfos: [0, {}, { attribute: false }], _saveDisabled: [16, {}, { state: true }], _displayTemplateInfos: [16, {}, { state: true }], _hasNameLengthError: [16, {}, { state: true }], _nonSolutionDependencyItems: [16, {}, { state: true }], _solutionItemsTitlesUpdating: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = L;
-  }
-  async willUpdate(i) {
-    if (i.has("templateInfos") && (this._templateInfos = JSON.parse(JSON.stringify(this.templateInfos)), this._updateTemplates()), i.has("open")) {
-      const t = i.get("open");
-      if (this.open && !t) {
-        await this._updatePrefixSuffix(), this._templateInfos = JSON.parse(JSON.stringify(this.templateInfos)), this._originalTitles = this._templateInfos.map((s) => ({ id: s.id, title: s.title })), this._updateTemplates();
-        const e = await W(this._configContextConsumer.value.userSession, this.card);
-        this._nonSolutionDependencyItems = e._nonSolutionDependencyItems, await this._accordionRef?.expandFirstItem();
+    this.styles = styles;
+  }
+  async willUpdate(changes) {
+    if (changes.has("templateInfos")) {
+      this._templateInfos = JSON.parse(JSON.stringify(this.templateInfos));
+      this._updateTemplates();
+    }
+    if (changes.has("open")) {
+      const oldValue = changes.get("open");
+      if (this.open && !oldValue) {
+        await this._updatePrefixSuffix();
+        this._templateInfos = JSON.parse(JSON.stringify(this.templateInfos));
+        this._originalTitles = this._templateInfos.map((t) => ({ id: t.id, title: t.title }));
+        this._updateTemplates();
+        const relatedInfos = await getRelatedSolutionsInfos(this._configContextConsumer.value.userSession, this.card);
+        this._nonSolutionDependencyItems = relatedInfos._nonSolutionDependencyItems;
+        await this._accordionRef?.expandFirstItem();
       }
     }
   }
@@ -38,76 +152,166 @@ class k extends S {
     return this._configContextConsumer.value?.telemetrySession;
   }
   async load() {
-    this._updateTemplates(), await this._updatePrefixSuffix();
+    this._updateTemplates();
+    await this._updatePrefixSuffix();
   }
   async _updatePrefixSuffix() {
-    this.solutionData = await b.getItemDataAsJson(this.card.id, this._configContextConsumer.value.userSession), this.solutionData.titles?.prefix && (this._loadingDefaultPrefix = !0, this._defaultPrefix = this.solutionData.titles.prefix, this._prefixValue = this.solutionData.titles.prefix), this.solutionData.titles?.suffix && (this._loadingDefaultSuffix = !0, this._defaultSuffix = this.solutionData.titles.suffix, this._suffixValue = this.solutionData.titles.suffix);
+    this.solutionData = await common.getItemDataAsJson(this.card.id, this._configContextConsumer.value.userSession);
+    if (this.solutionData.titles?.prefix) {
+      this._loadingDefaultPrefix = true;
+      this._defaultPrefix = this.solutionData.titles.prefix;
+      this._prefixValue = this.solutionData.titles.prefix;
+    }
+    if (this.solutionData.titles?.suffix) {
+      this._loadingDefaultSuffix = true;
+      this._defaultSuffix = this.solutionData.titles.suffix;
+      this._suffixValue = this.solutionData.titles.suffix;
+    }
   }
   render() {
-    return u`<calcite-dialog .heading=${this.card.title} modal @calciteDialogBeforeClose=${() => {
+    return html`<calcite-dialog .heading=${this.card.title} modal @calciteDialogBeforeClose=${() => {
       this.solutionConfigureTitlesBeforeClose.emit();
     }} .open=${this.open} outside-close-disabled width=l>${this._getPrefixSuffixControls()}${this._getAccordion()}${this._getDialogButtons()}</calcite-dialog>`;
   }
   _getPrefixSuffixControls() {
-    const i = m(this._prefixValue, "item"), t = this._hasNameLengthError && this._prefixValue.length > 0, e = !i, s = !t, n = e ? "display-none" : "", r = s ? "display-none" : "", a = e && s ? "valid" : "invalid", o = m(this._suffixValue, "item"), h = this._hasNameLengthError && this._suffixValue.length > 0, l = !o, d = !h, x = l ? "display-none" : "", g = d ? "display-none" : "", I = l && d ? "valid" : "invalid";
-    return this._saveDisabled = !e || !s || !l || !d || !this._hasChanges(), u`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-top-20"><calcite-label scale=l class="font-weight-medium"><span tabindex=0>${this._translations.configureTitlesDialogHeader}</span></calcite-label><p class="font-style-1 margin-top-0" tabindex=0>${this._translations.addPrefixOrSuffixToItems}</p><div class="display-flex flex-direction-row justify-content-space"><calcite-label class="width-full padding-end-1" scale=l>${this._translations.prefixToAddToItems}<calcite-input clearable @blur=${this._prefixInput} @input=${this._prefixInput} .placeholder=${this._translations.enterPrefixPlaceholder} .status=${a} .value=${this._prefixValue} ${p(this._prefixRef)}></calcite-input><calcite-input-message class=${f(n)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${f(r)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label><calcite-label class="width-full" scale=l>${this._translations.suffixToAddToItems}<calcite-input clearable @blur=${this._suffixInput} @input=${this._suffixInput} .placeholder=${this._translations.enterSuffixPlaceholder} .status=${I} .value=${this._suffixValue} ${p(this._suffixRef)}></calcite-input><calcite-input-message class=${f(x)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${f(g)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label></div></div>`;
+    const prefixHasInvalidChars = hasInvalidChars(this._prefixValue, "item");
+    const prefixIsLengthExceeded = this._hasNameLengthError && this._prefixValue.length > 0;
+    const validPrefixChars = !prefixHasInvalidChars;
+    const validPrefixLength = !prefixIsLengthExceeded;
+    const prefixCharsMessageClass = validPrefixChars ? "display-none" : "";
+    const prefixLengthMessageClass = validPrefixLength ? "display-none" : "";
+    const isValidPrefix = validPrefixChars && validPrefixLength ? "valid" : "invalid";
+    const suffixHasInvalidChars = hasInvalidChars(this._suffixValue, "item");
+    const suffixIsLengthExceeded = this._hasNameLengthError && this._suffixValue.length > 0;
+    const validSuffixChars = !suffixHasInvalidChars;
+    const validSuffixLength = !suffixIsLengthExceeded;
+    const suffixCharsMessageClass = validSuffixChars ? "display-none" : "";
+    const suffixLengthMessageClass = validSuffixLength ? "display-none" : "";
+    const isValidSuffix = validSuffixChars && validSuffixLength ? "valid" : "invalid";
+    this._saveDisabled = !validPrefixChars || !validPrefixLength || !validSuffixChars || !validSuffixLength || !this._hasChanges();
+    return html`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-top-20"><calcite-label scale=l class="font-weight-medium"><span tabindex=0>${this._translations.configureTitlesDialogHeader}</span></calcite-label><p class="font-style-1 margin-top-0" tabindex=0>${this._translations.addPrefixOrSuffixToItems}</p><div class="display-flex flex-direction-row justify-content-space"><calcite-label class="width-full padding-end-1" scale=l>${this._translations.prefixToAddToItems}<calcite-input clearable @blur=${this._prefixInput} @input=${this._prefixInput} .placeholder=${this._translations.enterPrefixPlaceholder} .status=${isValidPrefix} .value=${this._prefixValue} ${ref(this._prefixRef)}></calcite-input><calcite-input-message class=${safeClassMap(prefixCharsMessageClass)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${safeClassMap(prefixLengthMessageClass)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label><calcite-label class="width-full" scale=l>${this._translations.suffixToAddToItems}<calcite-input clearable @blur=${this._suffixInput} @input=${this._suffixInput} .placeholder=${this._translations.enterSuffixPlaceholder} .status=${isValidSuffix} .value=${this._suffixValue} ${ref(this._suffixRef)}></calcite-input><calcite-input-message class=${safeClassMap(suffixCharsMessageClass)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${safeClassMap(suffixLengthMessageClass)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label></div></div>`;
   }
   _getAccordion() {
-    const i = [...new Set(this._nonSolutionDependencyItems.map((t) => t.controlItemId))];
-    return u`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-bottom-2"><p class="font-style-1 margin-top-0">${this._translations.previewTheChanges}</p><solution-item-accordion .itemRelationshipDependencies=${i} list-selection-mode=multiple .reuseWarning=${this._translations.itemDependencyReuseWarning} .templateInfos=${this._displayTemplateInfos} .typeKeywords=${this.card?.typeKeywords} ${p(async (t) => {
-      t && (this._accordionRef = t);
+    const justDependencies = [...new Set(this._nonSolutionDependencyItems.map((dep) => dep.controlItemId))];
+    return html`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-bottom-2"><p class="font-style-1 margin-top-0">${this._translations.previewTheChanges}</p><solution-item-accordion .itemRelationshipDependencies=${justDependencies} list-selection-mode=multiple .reuseWarning=${this._translations.itemDependencyReuseWarning} .templateInfos=${this._displayTemplateInfos} .typeKeywords=${this.card?.typeKeywords} ${ref(async (el) => {
+      if (el) {
+        this._accordionRef = el;
+      }
     })}></solution-item-accordion></div>`;
   }
   _getDialogButtons() {
-    return u`<div slot=footer-end><calcite-button appearance=outline class="padding-end-1-2" kind=brand @click=${this._closeDialog}>${this._translations.cancelTheDialog}</calcite-button><calcite-button .disabled=${this._saveDisabled} kind=brand .loading=${this._solutionItemsTitlesUpdating} @click=${this._commitNameChanges}>${this._translations.applyChangesAndCloseTheDialog}</calcite-button></div>`;
+    return html`<div slot=footer-end><calcite-button appearance=outline class="padding-end-1-2" kind=brand @click=${this._closeDialog}>${this._translations.cancelTheDialog}</calcite-button><calcite-button .disabled=${this._saveDisabled} kind=brand .loading=${this._solutionItemsTitlesUpdating} @click=${this._commitNameChanges}>${this._translations.applyChangesAndCloseTheDialog}</calcite-button></div>`;
   }
   _prefixInput() {
-    clearTimeout(this._textInputTimeout), this._textInputTimeout = setTimeout(() => {
-      this._prefixValue = this._prefixRef.value?.value || "", this._updateTemplates();
+    clearTimeout(this._textInputTimeout);
+    this._textInputTimeout = setTimeout(() => {
+      this._prefixValue = this._prefixRef.value?.value || "";
+      this._updateTemplates();
     }, 500);
   }
   _suffixInput() {
-    clearTimeout(this._textInputTimeout), this._textInputTimeout = setTimeout(() => {
-      this._suffixValue = this._suffixRef.value?.value || "", this._updateTemplates();
+    clearTimeout(this._textInputTimeout);
+    this._textInputTimeout = setTimeout(() => {
+      this._suffixValue = this._suffixRef.value?.value || "";
+      this._updateTemplates();
     }, 500);
   }
   _updateTemplates() {
-    this._templateInfos = this._templateInfos.map((t) => (this._loadingDefaultPrefix && t.title.startsWith(this._prefixValue) && (t.title = this._replaceStart(t.title, this._prefixValue, "")), this._loadingDefaultSuffix && t.title.endsWith(this._suffixValue) && (t.title = this._replaceAtEnd(t.title, this._suffixValue, "")), t));
-    const i = JSON.parse(JSON.stringify(this._templateInfos));
-    this._hasNameLengthError = !1, this._displayTemplateInfos = i.map((t) => {
-      const e = this._prefixValue !== "", s = this._suffixValue !== "", n = this._defaultPrefix !== "", r = this._defaultSuffix !== "";
-      let a = t.title;
-      e && (n ? this._originalTitles.find((l) => l.id === t.id)?.title.startsWith(this._defaultPrefix) ? a = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue) : this._prefixValue !== this._defaultPrefix && (a = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue)) : a = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue));
-      let o = a;
-      return s && (r ? this._originalTitles.find((l) => l.id === t.id)?.title.endsWith(this._defaultSuffix) ? o = this._applySuffixWithDuplicateCheck(a, this._suffixValue) : this._suffixValue !== this._defaultSuffix && (o = this._applySuffixWithDuplicateCheck(a, this._suffixValue)) : o = this._applySuffixWithDuplicateCheck(a, this._suffixValue)), t.title = o, this._hasNameLengthError || (this._hasNameLengthError = t.title.length > v), t;
-    }), this._loadingDefaultPrefix = !1, this._loadingDefaultSuffix = !1;
+    this._templateInfos = this._templateInfos.map((t) => {
+      if (this._loadingDefaultPrefix && t.title.startsWith(this._prefixValue)) {
+        t.title = this._replaceStart(t.title, this._prefixValue, "");
+      }
+      if (this._loadingDefaultSuffix && t.title.endsWith(this._suffixValue)) {
+        t.title = this._replaceAtEnd(t.title, this._suffixValue, "");
+      }
+      return t;
+    });
+    const _templateInfos = JSON.parse(JSON.stringify(this._templateInfos));
+    this._hasNameLengthError = false;
+    this._displayTemplateInfos = _templateInfos.map((t) => {
+      const hasInputPrefix = this._prefixValue !== "";
+      const hasInputSuffix = this._suffixValue !== "";
+      const hasStoredPrefix = this._defaultPrefix !== "";
+      const hasStoredSuffix = this._defaultSuffix !== "";
+      let titleWithPrefix = t.title;
+      if (hasInputPrefix) {
+        if (hasStoredPrefix) {
+          const titleStartsWithStoredPrefix = this._originalTitles.find((ot) => ot.id === t.id)?.title.startsWith(this._defaultPrefix);
+          if (titleStartsWithStoredPrefix) {
+            titleWithPrefix = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue);
+          } else {
+            if (this._prefixValue !== this._defaultPrefix) {
+              titleWithPrefix = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue);
+            }
+          }
+        } else {
+          titleWithPrefix = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue);
+        }
+      }
+      let finalTitle = titleWithPrefix;
+      if (hasInputSuffix) {
+        if (hasStoredSuffix) {
+          const titleEndsWithStoredSuffix = this._originalTitles.find((ot) => ot.id === t.id)?.title.endsWith(this._defaultSuffix);
+          if (titleEndsWithStoredSuffix) {
+            finalTitle = this._applySuffixWithDuplicateCheck(titleWithPrefix, this._suffixValue);
+          } else {
+            if (this._suffixValue !== this._defaultSuffix) {
+              finalTitle = this._applySuffixWithDuplicateCheck(titleWithPrefix, this._suffixValue);
+            }
+          }
+        } else {
+          finalTitle = this._applySuffixWithDuplicateCheck(titleWithPrefix, this._suffixValue);
+        }
+      }
+      t.title = finalTitle;
+      if (!this._hasNameLengthError) {
+        this._hasNameLengthError = t.title.length > ITEM_TITLE_LENGTH;
+      }
+      return t;
+    });
+    this._loadingDefaultPrefix = false;
+    this._loadingDefaultSuffix = false;
   }
-  _replaceStart(i, t, e) {
-    return i.startsWith(t) ? `${e}${i.slice(t.length)}` : i;
+  _replaceStart(originalString, searchString, replaceString) {
+    return originalString.startsWith(searchString) ? `${replaceString}${originalString.slice(searchString.length)}` : originalString;
   }
-  _replaceAtEnd(i, t, e) {
-    return i.endsWith(t) ? `${i.substring(0, i.length - t.length)}${e}` : i;
+  _replaceAtEnd(originalString, searchString, replaceString) {
+    return originalString.endsWith(searchString) ? `${originalString.substring(0, originalString.length - searchString.length)}${replaceString}` : originalString;
   }
-  _applyPrefixWithDuplicateCheck(i, t) {
-    return !t || i.startsWith(t) ? i : t + i;
+  _applyPrefixWithDuplicateCheck(title, prefix) {
+    if (!prefix) {
+      return title;
+    }
+    if (title.startsWith(prefix)) {
+      return title;
+    }
+    return prefix + title;
   }
-  _applySuffixWithDuplicateCheck(i, t) {
-    return !t || i.endsWith(t) ? i : i + t;
+  _applySuffixWithDuplicateCheck(title, suffix) {
+    if (!suffix) {
+      return title;
+    }
+    if (title.endsWith(suffix)) {
+      return title;
+    }
+    return title + suffix;
   }
   _hasChanges() {
-    const i = this._defaultPrefix !== this._prefixValue, t = this._defaultSuffix !== this._suffixValue;
-    return this._displayTemplateInfos.some((s) => {
-      const n = this._originalTitles.find((r) => r.id === s.id);
-      return n && n.title !== s.title;
-    }) || i || t;
+    const prefixChangedFromDefault = this._defaultPrefix !== this._prefixValue;
+    const suffixChangedFromDefault = this._defaultSuffix !== this._suffixValue;
+    const templatesChanged = this._displayTemplateInfos.some((d) => {
+      const originalItem = this._originalTitles.find((o) => o.id === d.id);
+      return originalItem && originalItem.title !== d.title;
+    });
+    return templatesChanged || prefixChangedFromDefault || suffixChangedFromDefault;
   }
   _closeDialog() {
-    this.open = !1;
+    this.open = false;
   }
   async _commitNameChanges() {
     if (this._hasChanges()) {
       this._telemetry?.logEvent({
-        category: $.DEPLOYMENTS,
+        category: TELEMETRY_CATEGORY.DEPLOYMENTS,
         action: "Rename Items",
         dimensions: [
           this.card?.title || "",
@@ -115,32 +319,37 @@ class k extends S {
           this.card?.deployVersion || "",
           this.source
         ]
-      }), this._solutionItemsTitlesUpdating = !0;
-      const i = this._displayTemplateInfos.reduce((t, e) => {
-        const s = {
-          id: e.id,
-          title: e.title
+      });
+      this._solutionItemsTitlesUpdating = true;
+      const updateRequests = this._displayTemplateInfos.reduce((prev, cur) => {
+        const updateOptions = {
+          id: cur.id,
+          title: cur.title
         };
-        return t.push(e.type === "Group" ? V(s, this._configContextConsumer.value.userSession) : E(s, this._configContextConsumer.value.userSession, void 0, { solutionOwner: this.card?.owner })), t;
+        prev.push(cur.type === "Group" ? updateGroup(updateOptions, this._configContextConsumer.value.userSession) : updateItem(updateOptions, this._configContextConsumer.value.userSession, void 0, { solutionOwner: this.card?.owner }));
+        return prev;
       }, []);
       if (this.solutionData?.templates) {
-        const t = {
+        const itemInfo = {
           id: this.card.id
-        }, e = {
+        };
+        const data = {
           ...this.solutionData,
           titles: {
             prefix: this._prefixValue,
             suffix: this._suffixValue
           }
         };
-        i.push(w(t, e, this._configContextConsumer.value.userSession, void 0, void 0, null, this.card?.owner));
+        updateRequests.push(updateItemExtended(itemInfo, data, this._configContextConsumer.value.userSession, void 0, void 0, null, this.card?.owner));
       }
-      await Promise.all(i), this._solutionItemsTitlesUpdating = !1, this.solutionItemsTitlesChanged.emit();
+      await Promise.all(updateRequests);
+      this._solutionItemsTitlesUpdating = false;
+      this.solutionItemsTitlesChanged.emit();
     }
     this._closeDialog();
   }
 }
-C("solution-configure-titles", k);
+customElement("solution-configure-titles", SolutionConfigureTitles);
 export {
-  k as SolutionConfigureTitles
+  SolutionConfigureTitles
 };