@esri/solutions-components 5.0.3 → 5.0.4-next.2

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

@@ -1,12 +1,90 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { u as c } from "../../chunks/useT9n.js";
-import { css as d, html as l, nothing as p } from "lit";
-import { LitElement as h, createEvent as n } from "@arcgis/lumina";
-const m = 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 u extends h {
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { LitElement, createEvent } 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;
+}
+
+.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: 0.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 SolutionItemAccordion extends LitElement {
   constructor() {
-    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.reuseWarning = "", this.templateInfos = [], this.typeKeywords = [], this._sortedTemplateInfos = [], this._translations = c({ name: "solution-item-accordion", blocking: !0 }), this._sortOrder = [
+    super(...arguments);
+    this.itemRelationshipDependencies = [];
+    this.linkType = "item";
+    this.listSelectionMode = "none";
+    this.reuseWarning = "";
+    this.templateInfos = [];
+    this.typeKeywords = [];
+    this._sortedTemplateInfos = [];
+    this._translations = useT9n({ name: "solution-item-accordion", blocking: true });
+    this._sortOrder = [
       "Hub Site Application",
       "Hub Page",
       "Web Experience",
@@ -39,57 +117,94 @@ class u extends h {
       "Report Template",
       "Rule Package",
       "Group"
-    ], this.solutionItemHover = n(), this.solutionItemSelect = n(), this.solutionTypeHover = n();
+    ];
+    this.solutionItemHover = createEvent();
+    this.solutionItemSelect = createEvent();
+    this.solutionTypeHover = createEvent();
   }
   static {
-    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, _sortedTemplateInfos: 16, _translations: 16 };
+    this.properties = { itemRelationshipDependencies: [0, {}, { attribute: false }], linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: [0, {}, { attribute: false }], typeKeywords: [0, {}, { attribute: false }], _sortedTemplateInfos: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = m;
+    this.styles = styles;
   }
-  willUpdate(e) {
-    e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0)) {
+      void this.templateInfosWatchHandler();
+    }
   }
   async templateInfosWatchHandler() {
     this._sortedTemplateInfos = this._sortTemplates();
   }
   async collapseAll() {
-    this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item")?.forEach((i) => {
-      i.expanded = !1;
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item");
+    items?.forEach((item) => {
+      item.expanded = false;
     });
   }
   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);
-    });
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.selected) {
+          item.selected = false;
+        }
+        if ((item.parentElement?.parentElement).expanded) {
+          (item.parentElement?.parentElement).expanded = false;
+        }
+      });
+    }
   }
-  async expandItemById(e) {
-    this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      t.id === e && ((t.parentElement?.parentElement).expanded = !0);
+  async expandItemById(id) {
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    items?.forEach((item) => {
+      if (item.id === id) {
+        (item.parentElement?.parentElement).expanded = true;
+      }
     });
   }
   async expandFirstItem() {
-    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    e?.length && ((e[0].parentElement?.parentElement).expanded = !0);
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    if (items?.length) {
+      (items[0].parentElement?.parentElement).expanded = true;
+    }
   }
-  async expandItems(e) {
-    this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      e.indexOf(t.id) > -1 && ((t.parentElement?.parentElement).expanded = !0);
+  async expandItems(ids) {
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    items?.forEach((item) => {
+      if (ids.indexOf(item.id) > -1) {
+        (item.parentElement?.parentElement).expanded = true;
+      }
     });
   }
-  async selectItem(e) {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      t.id === e && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
-    });
+  async selectItem(id) {
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.id === id) {
+          item.selected = true;
+          (item.parentElement?.parentElement).expanded = true;
+        }
+      });
+    }
   }
   async selectFirstItem() {
-    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    e?.length && (e[0].selected = !0, (e[0].parentElement?.parentElement).expanded = !0);
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    if (items?.length) {
+      items[0].selected = true;
+      (items[0].parentElement?.parentElement).expanded = true;
+    }
   }
-  async selectItems(e) {
-    this.listSelectionMode === "multiple" && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      e.indexOf(t.id) > -1 && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
-    });
+  async selectItems(ids) {
+    if (this.listSelectionMode === "multiple") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (ids.indexOf(item.id) > -1) {
+          item.selected = true;
+          (item.parentElement?.parentElement).expanded = true;
+        }
+      });
+    }
   }
   async load() {
     this._sortedTemplateInfos = this._sortTemplates();
@@ -97,58 +212,100 @@ class u extends h {
   render() {
     return this._getAccordion();
   }
-  _deselectOthers(e) {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      t.id !== e && (t.selected = !1);
-    });
+  _deselectOthers(id) {
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.id !== id) {
+          item.selected = false;
+        }
+      });
+    }
   }
   _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 types = [];
+    const accordion = this._sortedTemplateInfos.reduce((prev, cur) => {
+      const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords);
+      if (types.indexOf(displayType) < 0) {
+        types.push(displayType);
+        prev.push(this._getAccordionItem(cur));
+      }
+      return prev;
     }, []);
-    return l`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
+    return html`<calcite-accordion class="border-override" selection-mode=single>${accordion}</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 l`<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>`;
+  _getAccordionItem(templateInfo) {
+    const _type = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
+    const templateInfos = this._sortedTemplateInfos.filter((t) => {
+      const tType = this._getTypeForDisplay(t.type, t.typeKeywords);
+      return tType === _type;
+    });
+    return html`<calcite-accordion-item .heading=${`${_type} (${templateInfos.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: _type, entering: true })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: _type, entering: false })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${templateInfo.type} .typeKeywords=${templateInfo.typeKeywords}></solution-item-icon>${this._getList(templateInfos)}</calcite-accordion-item>`;
   }
-  _getList(e) {
-    const i = this._sortTemplatesByTitle(e);
-    return l`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
+  _getList(templateInfos) {
+    const sortedTemplateInfos = this._sortTemplatesByTitle(templateInfos);
+    return html`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${sortedTemplateInfos.map((t) => this._getListItem(t))}</calcite-list>`;
   }
-  _getListItem(e) {
-    const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action";
-    return l`<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=${() => {
-      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>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((s) => s === e.id) && this.reuseWarning && this._getReuseWarningChip() || ""}${i && t ? l`<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>`;
+  _getListItem(templateInfo) {
+    const isDeployed = this.typeKeywords.includes("Deployed") && templateInfo.url;
+    const isActionLink = this.linkType === "action";
+    return html`<calcite-list-item id=${templateInfo.id ?? nothing} @mouseenter=${() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: true })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: false })} @calciteListItemSelect=${() => {
+      this._deselectOthers(templateInfo.id);
+      this.solutionItemSelect.emit({ itemId: templateInfo.id, selected: true });
+      if (isDeployed && !isActionLink) {
+        window.open(templateInfo.url, "_blank");
+      }
+    }} .value=${templateInfo.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${isDeployed && !isActionLink ? "underline" : ""}`}>${templateInfo.title}</div><div class="solution-list-item-description">${templateInfo.snippet}</div></div>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((dependency) => dependency === templateInfo.id) && this.reuseWarning && this._getReuseWarningChip() || ""}${isDeployed && isActionLink ? html`<div slot=actions-end><calcite-action icon=launch .id=${`${templateInfo.id}-launch`} @click=${() => window.open(templateInfo.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${templateInfo.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);
+  _sortTemplatesByTitle(templateInfos) {
+    return templateInfos.sort((a, b) => {
+      if (a.title < b.title) {
+        return -1;
+      }
+      if (a.title > b.title) {
+        return 1;
+      }
+      return 0;
+    });
   }
   _sortTemplates() {
-    return this.templateInfos.sort((e, i) => {
-      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), o = this._sortOrder.indexOf(t), r = this._sortOrder.indexOf(s);
-      return o - r;
+    return this.templateInfos.sort((a, b) => {
+      const aType = this._getTypeForSort(a);
+      const bType = this._getTypeForSort(b);
+      const indexA = this._sortOrder.indexOf(aType);
+      const indexB = this._sortOrder.indexOf(bType);
+      return indexA - indexB;
     });
   }
-  _getTypeForSort(e) {
-    let i = this._getTypeForDisplay(e.type, e.typeKeywords);
-    return this._sortOrder.indexOf(i) < 0 && (i = "TypeNotFound"), i;
+  _getTypeForSort(templateInfo) {
+    let updatedType = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
+    if (this._sortOrder.indexOf(updatedType) < 0) {
+      updatedType = "TypeNotFound";
+    }
+    return updatedType;
   }
-  _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)";
+  _getTypeForDisplay(type, typeKeywords) {
+    let _type = type;
+    if (type === "Feature Service") {
+      const isView = typeKeywords.indexOf("View Service") > -1;
+      const isTable = typeKeywords.indexOf("Table") > -1;
+      _type = isView && isTable ? "Table (hosted, view)" : isTable ? "Table (hosted)" : isView ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+    }
+    if (type === "Web Mapping Application") {
+      _type = typeKeywords.indexOf("configurableApp") > -1 ? "Instant App" : _type;
     }
-    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;
+    _type = type === "Geoprocessing Service" ? "Tool" : _type;
+    _type = type === "Feed" ? "Feed (hosted)" : _type;
+    _type = type === "Real Time Analytic" ? "Real Time Analytic (hosted)" : _type;
+    _type = type === "Big Data Analytic" ? "Big Data Analytic (hosted)" : _type;
+    _type = type === "Vector Tile Service" ? "Tile Layer" : _type;
+    return _type;
   }
   _getReuseWarningChip() {
-    return l`<calcite-chip icon=information kind=neutral .label=${this.reuseWarning} scale=s slot=actions-end>${this.reuseWarning}</calcite-chip>`;
+    return html`<calcite-chip icon=information kind=neutral .label=${this.reuseWarning} scale=s slot=actions-end>${this.reuseWarning}</calcite-chip>`;
   }
 }
-a("solution-item-accordion", u);
+customElement("solution-item-accordion", SolutionItemAccordion);
 export {
-  u as SolutionItemAccordion
+  SolutionItemAccordion
 };