@esri/solutions-components 1.2.0-next.182 → 1.2.0-next.184

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

@@ -1,90 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
-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 {
+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 {
   constructor() {
-    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 = [
+    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 = [
       "Hub Site Application",
       "Hub Page",
       "Web Experience",
@@ -117,94 +39,57 @@ class SolutionItemAccordion extends LitElement {
       "Report Template",
       "Rule Package",
       "Group"
-    ];
-    this.solutionItemHover = createEvent();
-    this.solutionItemSelect = createEvent();
-    this.solutionTypeHover = createEvent();
+    ], this.solutionItemHover = n(), this.solutionItemSelect = n(), this.solutionTypeHover = n();
   }
   static {
-    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 }] };
+    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, _sortedTemplateInfos: 16, _translations: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = m;
   }
-  willUpdate(changes) {
-    if (changes.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0)) {
-      void this.templateInfosWatchHandler();
-    }
+  willUpdate(e) {
+    e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
   }
   async templateInfosWatchHandler() {
     this._sortedTemplateInfos = this._sortTemplates();
   }
   async collapseAll() {
-    const items = this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item");
-    items?.forEach((item) => {
-      item.expanded = false;
+    this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item")?.forEach((i) => {
+      i.expanded = !1;
     });
   }
   async deselectAll() {
-    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;
-        }
-      });
-    }
+    (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 expandItemById(id) {
-    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    items?.forEach((item) => {
-      if (item.id === id) {
-        (item.parentElement?.parentElement).expanded = true;
-      }
+  async expandItemById(e) {
+    this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
+      t.id === e && ((t.parentElement?.parentElement).expanded = !0);
     });
   }
   async expandFirstItem() {
-    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    if (items?.length) {
-      (items[0].parentElement?.parentElement).expanded = true;
-    }
+    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    e?.length && ((e[0].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 expandItems(e) {
+    this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
+      e.indexOf(t.id) > -1 && ((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 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 selectFirstItem() {
-    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    if (items?.length) {
-      items[0].selected = true;
-      (items[0].parentElement?.parentElement).expanded = true;
-    }
+    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    e?.length && (e[0].selected = !0, (e[0].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 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 load() {
     this._sortedTemplateInfos = this._sortTemplates();
@@ -212,100 +97,58 @@ class SolutionItemAccordion extends LitElement {
   render() {
     return this._getAccordion();
   }
-  _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;
-        }
-      });
-    }
+  _deselectOthers(e) {
+    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
+      t.id !== e && (t.selected = !1);
+    });
   }
   _getAccordion() {
-    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;
+    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;
     }, []);
-    return html`<calcite-accordion class="border-override" selection-mode=single>${accordion}</calcite-accordion>`;
+    return l`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
   }
-  _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>`;
+  _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>`;
   }
-  _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>`;
+  _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>`;
   }
-  _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>`;
+  _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>`;
   }
-  _sortTemplatesByTitle(templateInfos) {
-    return templateInfos.sort((a, b) => {
-      if (a.title < b.title) {
-        return -1;
-      }
-      if (a.title > b.title) {
-        return 1;
-      }
-      return 0;
-    });
+  _sortTemplatesByTitle(e) {
+    return e.sort((i, t) => i.title < t.title ? -1 : i.title > t.title ? 1 : 0);
   }
   _sortTemplates() {
-    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;
+    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;
     });
   }
-  _getTypeForSort(templateInfo) {
-    let updatedType = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
-    if (this._sortOrder.indexOf(updatedType) < 0) {
-      updatedType = "TypeNotFound";
-    }
-    return updatedType;
+  _getTypeForSort(e) {
+    let i = this._getTypeForDisplay(e.type, e.typeKeywords);
+    return this._sortOrder.indexOf(i) < 0 && (i = "TypeNotFound"), i;
   }
-  _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;
+  _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)";
     }
-    _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;
+    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;
   }
   _getReuseWarningChip() {
-    return html`<calcite-chip icon=information kind=neutral .label=${this.reuseWarning} scale=s slot=actions-end>${this.reuseWarning}</calcite-chip>`;
+    return l`<calcite-chip icon=information kind=neutral .label=${this.reuseWarning} scale=s slot=actions-end>${this.reuseWarning}</calcite-chip>`;
   }
 }
-customElement("solution-item-accordion", SolutionItemAccordion);
+a("solution-item-accordion", u);
 export {
-  SolutionItemAccordion
+  u as SolutionItemAccordion
 };