@esri/solutions-components 5.1.0-next.10 → 5.1.0-next.100

package/dist/components/solution-item-accordion/customElement.d.ts

@@ -1,6 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { ISolutionItemHover, ISolutionItemSelected, ISolutionTypeHover, ITemplateInfo } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { DependencyItem } from "../../utils/getRelatedInfos.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class SolutionItemAccordion extends LitElement {
@@ -11,14 +12,22 @@ export abstract class SolutionItemAccordion extends LitElement {
    * @internal
    */
   protected _translations: {
+      usedInOtherSolutionsDeleteWarning: string;
+      noPrivilegeToManage: string;
       openDetails: string;
       solutionsTemplates: string;
+      usedInAnotherSolution: string;
+      itemUsedInOtherSolutions: string;
   } & T9nMeta<{
+      usedInOtherSolutionsDeleteWarning: string;
+      noPrivilegeToManage: string;
       openDetails: string;
       solutionsTemplates: string;
+      usedInAnotherSolution: string;
+      itemUsedInOtherSolutions: string;
   }>;
-  /** string[]: List of items that have relationship dependencies outside of this solution */
-  accessor itemRelationshipDependencies: string[];
+  /** DependencyItem[]: List of items that have relationship dependencies outside of this solution */
+  accessor itemRelationshipDependencies: DependencyItem[];
   /**
    * 'action' | 'item': Specifies the type of link that will be used for deployed items.
    *    'item' the items title will be underlined and clicking anywhere on the list item will open the items details page
@@ -47,13 +56,17 @@ export abstract class SolutionItemAccordion extends LitElement {
   accessor templateInfos: ITemplateInfo[];
   /** string[]: Collection of the solutions typeKeywords */
   accessor typeKeywords: string[];
+  /** @default 'content' */
+  accessor usageContext: "content" | "rename" | "delete";
   /** Collapses all items in the accordion. */
   collapseAll(): Promise<void>;
   /**
-   * Deselects all items in the accordion and closes the accordion item containing it.
+   * Deselects all items in the accordion.
    * Only applies when selectionMode is 'single' or 'single-persist'.
+   *
+   * @param collapseAccordion - Whether to also collapse the accordion items after deselecting
    */
-  deselectAll(): Promise<void>;
+  deselectAll(collapseAccordion?: boolean): Promise<void>;
   /** Expands the first accordion item */
   expandFirstItem(): Promise<void>;
   /**

package/dist/components/solution-item-accordion/customElement.js

@@ -1,15 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { u as c } from "../../chunks/useT9n.js";
-import { css as d, html as n, nothing as p } from "lit";
-import { LitElement as h, createEvent as r } from "@arcgis/lumina";
-import { c as m } from "../../chunks/deployAppContexts.js";
-import { useContextConsumer as u } from "@arcgis/lumina/context";
-const y = d`:host{display:block}.padding-start-1{padding-inline-start:1rem}.border-override{--calcite-accordion-border-color: var(--calcite-color-border-1) !important}.display-flex{display:flex}.align-center{align-items:center}.solution-list-item-label{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--1)}.solution-list-item-label,.solution-list-item-description{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.solution-list-item-description{font-size:var(--calcite-font-size--2);margin-block-start:.125rem;color:var(--calcite-color-text-3)}.solution-list-item-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:1.375}.underline{text-decoration:underline}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-brand)}`;
-class f extends h {
+import { c as h } from "../../chunks/runtime.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { css as u, html as o, nothing as m } from "lit";
+import { LitElement as g, createEvent as l, safeStyleMap as y } from "@arcgis/lumina";
+import { c as f } from "../../chunks/deployAppContexts.js";
+import { useContextConsumer as _ } from "@arcgis/lumina/context";
+import * as T from "@esri/solution-common";
+import { s as x } from "../../chunks/helpers.js";
+const v = u`:host{display:block}.padding-start-1{padding-inline-start:1rem}.border-override{--calcite-accordion-border-color: var(--calcite-color-border-1) !important}.display-flex{display:flex}.align-center{align-items:center}.solution-list-item-label{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--1)}.solution-list-item-label,.solution-list-item-description{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.solution-list-item-description{font-size:var(--calcite-font-size--2);margin-block-start:.125rem;color:var(--calcite-color-text-3)}.solution-list-item-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:1.375}.underline{text-decoration:underline}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-brand)}`;
+class w extends g {
   constructor() {
-    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.reuseWarning = "", this.templateInfos = [], this.typeKeywords = [], this._canDeletePermission = !1, this._sortedTemplateInfos = [], this._translations = c({ name: "solution-item-accordion", blocking: !0 }), this._configContextConsumer = u({
-      context: m,
+    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.reuseWarning = "", this.templateInfos = [], this.typeKeywords = [], this.usageContext = "content", this._canDeletePermission = !1, this._dependencyTooltipContent = "", this._sortedTemplateInfos = [], this._translations = p({ name: "solution-item-accordion", blocking: !0 }), this._configContextConsumer = _({
+      context: f,
       subscribe: !0
     }), this._sortOrder = [
       "Hub Site Application",
@@ -44,13 +46,13 @@ class f extends h {
       "Report Template",
       "Rule Package",
       "Group"
-    ], this.solutionItemHover = r(), this.solutionItemSelect = r(), this.solutionTypeHover = r();
+    ], this.solutionItemHover = l(), this.solutionItemSelect = l(), this.solutionTypeHover = l();
   }
   static {
-    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, _canDeletePermission: 16, _sortedTemplateInfos: 16, _translations: 16 };
+    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, usageContext: 1, _canDeletePermission: 16, _dependencyTooltipContent: 16, _sortedTemplateInfos: 16, _translations: 16 };
   }
   static {
-    this.styles = y;
+    this.styles = v;
   }
   willUpdate(e) {
     e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
@@ -63,9 +65,9 @@ class f extends h {
       i.expanded = !1;
     });
   }
-  async deselectAll() {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((i) => {
-      i.selected && (i.selected = !1), (i.parentElement?.parentElement).expanded && ((i.parentElement?.parentElement).expanded = !1);
+  async deselectAll(e = !1) {
+    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
+      t.selected && (t.selected = !1), e && (t.parentElement?.parentElement).expanded && ((t.parentElement?.parentElement).expanded = !1);
     });
   }
   async expandItemById(e) {
@@ -97,7 +99,7 @@ class f extends h {
     });
   }
   async load() {
-    this._sortedTemplateInfos = this._sortTemplates(), this._canDeletePermission = this._configContextConsumer.value?.authentication?.CanDeleteSolution ?? !1;
+    this._sortedTemplateInfos = this._sortTemplates(), this._canDeletePermission = (this._configContextConsumer.value?.authentication?.CanDeleteSolution && this._configContextConsumer.value?.authentication?.CanUpdateSolution) ?? !1;
   }
   render() {
     return this._getAccordion();
@@ -109,35 +111,32 @@ class f extends h {
   }
   _getAccordion() {
     const e = [], i = this._sortedTemplateInfos.reduce((t, s) => {
-      const o = this._getTypeForDisplay(s.type, s.typeKeywords);
-      return e.indexOf(o) < 0 && (e.push(o), t.push(this._getAccordionItem(s))), t;
+      const n = this._getTypeForDisplay(s.type, s.typeKeywords);
+      return e.indexOf(n) < 0 && (e.push(n), t.push(this._getAccordionItem(s))), t;
     }, []);
-    return n`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
+    return o`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
   }
   _getAccordionItem(e) {
     const i = this._getTypeForDisplay(e.type, e.typeKeywords), t = this._sortedTemplateInfos.filter((s) => this._getTypeForDisplay(s.type, s.typeKeywords) === i);
-    return n`<calcite-accordion-item .heading=${`${i} (${t.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: i, entering: !0 })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: i, entering: !1 })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${e.type} .typeKeywords=${e.typeKeywords}></solution-item-icon>${this._getList(t)}</calcite-accordion-item>`;
+    return o`<calcite-accordion-item .heading=${`${i} (${t.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: i, entering: !0 })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: i, entering: !1 })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${e.type} .typeKeywords=${e.typeKeywords}></solution-item-icon>${this._getList(t)}</calcite-accordion-item>`;
   }
   _getList(e) {
     const i = this._sortTemplatesByTitle(e);
-    return n`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
+    return o`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
   }
   _getListItem(e) {
-    const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action", s = this._configContextConsumer.value?.userSession?.username ?? null, o = this.itemRelationshipDependencies.some((l) => l === e.id);
-    return n`<calcite-list-item id=${e.id ?? p} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
+    const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action";
+    return o`<calcite-list-item id=${e.id ?? m} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
       this._deselectOthers(e.id), this.solutionItemSelect.emit({ itemId: e.id, selected: !0 }), i && !t && window.open(e.url, "_blank");
-    }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${o ? this.reuseWarning && this._getWarningChip(this.reuseWarning) : (
-      //TODO: hard coded string move to nls
-      e.owner !== s && !this._canDeletePermission && this._getWarningChip("This item is owned by a different user and will not be deleted")
-    )}${i && t ? n`<div slot=actions-end><calcite-action icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
+    }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${this._checkUsageForWarnings(e)}${i && t ? o`<div slot=actions-end><calcite-action icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
   }
   _sortTemplatesByTitle(e) {
     return e.sort((i, t) => i.title < t.title ? -1 : i.title > t.title ? 1 : 0);
   }
   _sortTemplates() {
     return this.templateInfos.sort((e, i) => {
-      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), o = this._sortOrder.indexOf(t), l = this._sortOrder.indexOf(s);
-      return o - l;
+      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), n = this._sortOrder.indexOf(t), r = this._sortOrder.indexOf(s);
+      return n - r;
     });
   }
   _getTypeForSort(e) {
@@ -147,16 +146,51 @@ class f extends h {
   _getTypeForDisplay(e, i) {
     let t = e;
     if (e === "Feature Service") {
-      const s = i.indexOf("View Service") > -1, o = i.indexOf("Table") > -1;
-      t = s && o ? "Table (hosted, view)" : o ? "Table (hosted)" : s ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+      const s = i.indexOf("View Service") > -1, n = i.indexOf("Table") > -1;
+      t = s && n ? "Table (hosted, view)" : n ? "Table (hosted)" : s ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
     }
     return e === "Web Mapping Application" && (t = i.indexOf("configurableApp") > -1 ? "Instant App" : t), t = e === "Geoprocessing Service" ? "Tool" : t, t = e === "Feed" ? "Feed (hosted)" : t, t = e === "Real Time Analytic" ? "Real Time Analytic (hosted)" : t, t = e === "Big Data Analytic" ? "Big Data Analytic (hosted)" : t, t = e === "Vector Tile Service" ? "Tile Layer" : t, t;
   }
-  _getWarningChip(e) {
-    return n`<calcite-chip icon=information kind=neutral .label=${e} scale=s slot=actions-end>${e}</calcite-chip>`;
+  _getWarningChip(e, i, t, s) {
+    const n = i === "info" ? "var(--calcite-color-status-info)" : "var(--calcite-color-status-danger)";
+    return o`<div slot=actions-end><calcite-chip .icon=${i === "info" ? "information" : "exclamation-mark-triangle"} .id=${t + "-warning"} kind=neutral .label=${e} scale=s style=${y({ "--calcite-chip-icon-color": n, cursor: s && s.length > 0 ? "pointer" : "default" })}>${e}</calcite-chip>${s && s.length > 0 ? o`<calcite-tooltip class=solution-list-item-content placement=bottom .referenceElement=${`${t}-warning`} scale=s @calciteTooltipBeforeOpen=${async () => {
+      const a = {
+        q: s.map((d) => `id:${d.dependencyItemId}`).join(" OR "),
+        authentication: this._configContextConsumer.value?.userSession,
+        pagingParam: { start: 1, num: 100 }
+      }, c = await T.searchItems(a);
+      this._dependencyTooltipContent = o`<solutions-deployed-list .cards=${x(c.results)} .listTitle=${this._translations?.itemUsedInOtherSolutions || ""}></solutions-deployed-list>`;
+    }}>${this._dependencyTooltipContent}</calcite-tooltip>` : null}</div>`;
+  }
+  _checkUsageForWarnings(e) {
+    const i = this._configContextConsumer.value?.userSession?.username ?? null, t = this.itemRelationshipDependencies.filter((n) => n.controlItemId === e.id), s = t.length > 0;
+    if (this.usageContext === "content" && s && this.reuseWarning)
+      return this._getWarningChip(this.reuseWarning, "info", e.id, t);
+    if (this.usageContext === "rename") {
+      const n = this._configContextConsumer.value?.authentication?.CanUpdateSolution ?? !1;
+      if (e.owner !== i)
+        if (n) {
+          if (s && this.reuseWarning)
+            return this._getWarningChip(this.reuseWarning, "info", e.id, t);
+        } else
+          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn", e.id);
+      else if (s && this.reuseWarning)
+        return this._getWarningChip(this.reuseWarning, "info", e.id, t);
+    }
+    if (this.usageContext === "delete") {
+      if (e.owner !== i)
+        if (this._canDeletePermission) {
+          if (s)
+            return this._getWarningChip(this._translations?.usedInOtherSolutionsDeleteWarning || "", "info", e.id);
+        } else
+          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn", e.id);
+      else if (s)
+        return this._getWarningChip(this.reuseWarning, "info", e.id, t);
+    }
+    return "";
   }
 }
-a("solution-item-accordion", f);
+h("solution-item-accordion", w);
 export {
-  f as SolutionItemAccordion
+  w as SolutionItemAccordion
 };

package/dist/components/solution-item-accordion/index.js

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-chip";
+import "../solutions-deployed-list/index.js";
 export * from "./customElement.js";