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

package/dist/components/solutions-filter-panel/customElement.js

@@ -1,12 +1,53 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as b } from "../../chunks/runtime.js";
-import { css as y, html as h } from "lit";
-import { repeat as g } from "lit/directives/repeat.js";
-import { u as N } from "../../chunks/useT9n.js";
-import { LitElement as f, createEvent as p, safeClassMap as S } from "@arcgis/lumina";
-import { e as F, A, G as I, d as C, T as O, J as _ } from "../../chunks/interfaces.js";
-import { useContextConsumer as E } from "@arcgis/lumina/context";
-const T = y`.width-full{width:100%}calcite-panel{--calcite-panel-background-color: var(--calcite-color-foreground-1);--calcite-panel-footer-space: var(--calcite-spacing-sm)}.border-color{--calcite-block-border-color: transparent}calcite-block{margin:0;--calcite-block-content-space: 0}.tree-padding{padding:0 .2rem}.display-none{display:none}`, R = {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { e as EIndustry, A as configContext, G as isMobileContext, d as EDomain, T as TELEMETRY_CATEGORY, J as handleKeyboardAction } from "../../chunks/interfaces.js";
+import { useContextConsumer } from "@arcgis/lumina/context";
+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.
+ */
+
+.width-full {
+  width: 100%
+}
+
+calcite-panel {
+  --calcite-panel-background-color: var(--calcite-color-foreground-1);
+  --calcite-panel-footer-space: var(--calcite-spacing-sm);
+}
+
+.border-color {
+  --calcite-block-border-color: transparent;
+}
+
+calcite-block {
+  margin: 0;
+  --calcite-block-content-space: 0;
+}
+
+.tree-padding {
+  padding: 0 0.2rem;
+}
+
+.display-none {
+  display: none;
+}`;
+const industryToDomainsMap = {
   PUBLICSAFETY: ["EMERGENCYMANAGEMENT", "FIRESERVICE", "LAWENFORCEMENT"],
   STATEANDLOCALGOVERNMENT: [
     "AGRICULTURE",
@@ -25,153 +66,221 @@ const T = y`.width-full{width:100%}calcite-panel{--calcite-panel-background-colo
     "TRANSPORTATION"
   ],
   UTILITIES: ["DISTRICTENERGY", "ELECTRIC", "GAS", "SEWER", "STORMWATER", "WATER"]
-}, v = Object.keys(F).reduce(
-  (m, t) => {
-    const e = t;
-    return m[e] = R[e] ?? [], m;
+};
+const industryMatrix = Object.keys(EIndustry).reduce(
+  (acc, industryKey) => {
+    const typedKey = industryKey;
+    acc[typedKey] = industryToDomainsMap[typedKey] ?? [];
+    return acc;
   },
   {}
 );
-class M extends f {
+class SolutionsFilterPanel extends LitElement {
   constructor() {
-    super(), this.hideIndustryFilter = !1, this.isAIDialogOpen = !1, this.showReset = !1, this._activeFilterSettings = {
+    super();
+    this.hideIndustryFilter = false;
+    this.isAIDialogOpen = false;
+    this.showReset = false;
+    this._activeFilterSettings = {
       categories: []
-    }, this._isMobile = !1, this._translations = N({ name: "solutions-filter-panel", blocking: !0 }), this._userFirstName = "", this._configContextConsumer = E({
-      context: A,
-      subscribe: !0,
-      callback: (t) => {
-        t?.userSession && !this._userFirstName && this._loadUserFirstName();
+    };
+    this._isMobile = false;
+    this._translations = useT9n({ name: "solutions-filter-panel", blocking: true });
+    this._userFirstName = "";
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true,
+      callback: (config) => {
+        if (config?.userSession && !this._userFirstName) {
+          this._loadUserFirstName();
+        }
+      }
+    });
+    this._isMobileContextConsumer = useContextConsumer({
+      context: isMobileContext,
+      subscribe: true,
+      callback: (value) => this._isMobile = value
+    });
+    this.applyFilter = createEvent();
+    this.toggleFilter = createEvent();
+    this.updateUrlParams = createEvent();
+    this._handleFilterRemoved = (event) => {
+      const detail = event.detail;
+      if (Array.isArray(detail)) {
+        this._activeFilterSettings = {
+          ...this._activeFilterSettings,
+          categories: [...detail]
+        };
+      }
+    };
+    this._industryMatchName = (industry) => {
+      const matchedIndustry = Object.keys(this._translations.industries).find((industryTranslation) => industryTranslation.toUpperCase() === industry.replaceAll(" ", "").toUpperCase());
+      return matchedIndustry && matchedIndustry in this._translations.industries ? this._translations.industries[matchedIndustry] : industry;
+    };
+    this._domainMatchName = (domain) => {
+      const matchedDomain = Object.keys(this._translations.industriesDomain).find((domainTranslation) => domainTranslation.toUpperCase() === domain.replaceAll(" ", "").toUpperCase());
+      return matchedDomain && matchedDomain in this._translations.industriesDomain ? this._translations.industriesDomain[matchedDomain] : domain;
+    };
+    this.listenOn(window, "filterRemoved", this._handleFilterRemoved);
+    this.listenOn(window, "closeAssistant", () => {
+      this.isAIDialogOpen = false;
+    });
+    this.listenOn(window, "openAssistant", () => {
+      this.isAIDialogOpen = true;
+    });
+    this.listenOn(window, "tabChanged", (evt) => {
+      const scope = evt.detail;
+      if (scope === "all-solutions") {
+        this.updateUrlParams.emit(this._activeFilterSettings);
+      } else {
+        this.updateUrlParams.emit(null);
       }
-    }), this._isMobileContextConsumer = E({
-      context: I,
-      subscribe: !0,
-      callback: (t) => this._isMobile = t
-    }), this.applyFilter = p(), this.toggleFilter = p(), this.updateUrlParams = p(), this._handleFilterRemoved = (t) => {
-      const e = t.detail;
-      Array.isArray(e) && (this._activeFilterSettings = {
-        ...this._activeFilterSettings,
-        categories: [...e]
-      });
-    }, this._industryMatchName = (t) => {
-      const e = Object.keys(this._translations.industries).find((o) => o.toUpperCase() === t.replaceAll(" ", "").toUpperCase());
-      return e && e in this._translations.industries ? this._translations.industries[e] : t;
-    }, this._domainMatchName = (t) => {
-      const e = Object.keys(this._translations.industriesDomain).find((o) => o.toUpperCase() === t.replaceAll(" ", "").toUpperCase());
-      return e && e in this._translations.industriesDomain ? this._translations.industriesDomain[e] : t;
-    }, this.listenOn(window, "filterRemoved", this._handleFilterRemoved), this.listenOn(window, "closeAssistant", () => {
-      this.isAIDialogOpen = !1;
-    }), this.listenOn(window, "openAssistant", () => {
-      this.isAIDialogOpen = !0;
-    }), this.listenOn(window, "tabChanged", (t) => {
-      t.detail === "all-solutions" ? this.updateUrlParams.emit(this._activeFilterSettings) : this.updateUrlParams.emit(null);
     });
   }
   static {
-    this.properties = { hideIndustryFilter: 5, isAIDialogOpen: 5, showReset: 5, _activeFilterSettings: 16, _isMobile: 16, _translations: 16, _userFirstName: 16 };
+    this.properties = { hideIndustryFilter: [5, {}, { type: Boolean }], isAIDialogOpen: [5, {}, { type: Boolean }], showReset: [5, {}, { type: Boolean }], _activeFilterSettings: [16, {}, { state: true }], _isMobile: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _userFirstName: [16, {}, { state: true }] };
   }
   static {
-    this.styles = T;
+    this.styles = styles;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
-  changeIndustryFilter(t, e, o, d) {
-    if (t !== "" || e !== "") {
-      let n = [];
-      if (e !== "") {
-        const i = F[t], a = this._industryMatchName(i), s = C[e], r = this._domainMatchName(s);
-        n = [{
-          displayValue: a,
+  changeIndustryFilter(industry, domain, displayValue, emit) {
+    if (industry !== "" || domain !== "") {
+      let nextCategories = [];
+      if (domain !== "") {
+        const industryDisplay = EIndustry[industry];
+        const industryMatchName = this._industryMatchName(industryDisplay);
+        const domainDisplay = EDomain[domain];
+        const domainMatchName = this._domainMatchName(domainDisplay);
+        const industryObject = {
+          displayValue: industryMatchName,
           type: "industry",
-          value: t,
-          industry: t,
+          value: industry,
+          industry,
           domain: ""
-        }, {
-          displayValue: r,
+        };
+        const domainObject = {
+          displayValue: domainMatchName,
           type: "domain",
-          value: e,
-          industry: t,
-          domain: e
-        }];
-      } else
-        n = [{
-          displayValue: o,
-          type: e !== "" ? "domain" : "industry",
-          value: e !== "" ? e : t,
-          industry: t,
-          domain: e
-        }];
+          value: domain,
+          industry,
+          domain
+        };
+        nextCategories = [industryObject, domainObject];
+      } else {
+        const industryObject = {
+          displayValue,
+          type: domain !== "" ? "domain" : "industry",
+          value: domain !== "" ? domain : industry,
+          industry,
+          domain
+        };
+        nextCategories = [industryObject];
+      }
       this._activeFilterSettings = {
         ...this._activeFilterSettings,
-        categories: [...n]
-      }, d && this.applyFilter.emit(n);
+        categories: [...nextCategories]
+      };
+      if (emit)
+        this.applyFilter.emit(nextCategories);
     } else {
-      const n = {
-        displayValue: o,
+      const emitObject = {
+        displayValue,
         type: "industry",
-        value: t,
-        industry: t,
-        domain: e
+        value: industry,
+        industry,
+        domain
       };
       this._activeFilterSettings = {
         ...this._activeFilterSettings,
-        categories: [n]
-      }, d && this.applyFilter.emit(n);
+        categories: [emitObject]
+      };
+      if (emit) {
+        this.applyFilter.emit(emitObject);
+      }
     }
   }
   clearFilters() {
-    this.changeIndustryFilter("", "", ""), this.applyFilter.emit(null);
+    this.changeIndustryFilter("", "", "");
+    this.applyFilter.emit(null);
   }
   async load() {
-    await this._loadUserFirstName(), this._isMobileContextConsumer.value && (this._isMobile = this._isMobileContextConsumer.value);
+    await this._loadUserFirstName();
+    if (this._isMobileContextConsumer.value) {
+      this._isMobile = this._isMobileContextConsumer.value;
+    }
   }
   render() {
-    return h`<calcite-panel description heading>${this.showReset && h`<calcite-action appearance=solid icon=reset @click=${() => {
+    return html`<calcite-panel description heading>${this.showReset && html`<calcite-action appearance=solid icon=reset @click=${() => {
       this.clearFilters();
     }} slot=header-actions-end .text=${this._translations.resetFilters} text-enabled></calcite-action>` || ""}<calcite-block-group .label=${this._translations.filters} scale=l>${!this.hideIndustryFilter && this.renderIndustryBlock() || ""}</calcite-block-group><calcite-button id=solutions-assistant-button icon-start=speech-bubbles label="Solutions Assistant" @click=${() => {
       this._telemetry?.logEvent({
-        category: O.ASSISTANT,
+        category: TELEMETRY_CATEGORY.ASSISTANT,
         action: "Open"
-      }), this.isAIDialogOpen = !0;
+      });
+      this.isAIDialogOpen = true;
     }} round scale=l slot=footer-start></calcite-button><calcite-tooltip reference-element=solutions-assistant-button placement=right slot=footer-start offset-distance=10 open><span>${this._translations.assistant.welcomeTip}</span></calcite-tooltip><arcgis-solutions-assistant .open=${this.isAIDialogOpen} .userFirstName=${this._userFirstName}></arcgis-solutions-assistant></calcite-panel>`;
   }
   renderIndustryBlock() {
-    const t = (i, a) => !this._activeFilterSettings || !this._activeFilterSettings.categories ? !1 : this._activeFilterSettings.categories.some((s) => s.industry === i && (s.domain ?? "") === a), e = (i) => !this._activeFilterSettings || !this._activeFilterSettings.categories ? !1 : this._activeFilterSettings.categories.some((a) => a.industry === i && (a.domain ?? "") === ""), o = (i, a) => a.length > 0 && (e(i) || this._activeFilterSettings.categories?.some((s) => s.industry === i && !!s.domain && a.includes(s.domain)) === !0), d = (i, a) => g(a, (s) => s, (s) => {
-      const r = Object.keys(this._translations.industriesDomain).find((l) => l.toUpperCase() === s.toUpperCase()), c = r && r in this._translations.industriesDomain ? this._translations.industriesDomain[r] : s, u = t(i, s);
-      return h`<calcite-tree-item .label=${c} @click=${(l) => {
-        l.detail !== 0 && this.changeIndustryFilter(i, s, c, !0);
-      }} @keydown=${(l) => {
-        _(l, () => {
-          this.changeIndustryFilter(i, s, c, !0);
+    const isSubSelected = (industry, sub) => {
+      if (!this._activeFilterSettings || !this._activeFilterSettings.categories) {
+        return false;
+      }
+      return this._activeFilterSettings.categories.some((c) => c.industry === industry && (c.domain ?? "") === sub);
+    };
+    const isIndustryOnlySelected = (industry) => {
+      if (!this._activeFilterSettings || !this._activeFilterSettings.categories) {
+        return false;
+      }
+      return this._activeFilterSettings.categories.some((c) => c.industry === industry && (c.domain ?? "") === "");
+    };
+    const isExpanded = (industry, subs) => subs.length > 0 && (isIndustryOnlySelected(industry) || this._activeFilterSettings.categories?.some((c) => c.industry === industry && !!c.domain && subs.includes(c.domain)) === true);
+    const subTreeItems = (industry, subIndustries) => repeat(subIndustries, (sub) => sub, (sub) => {
+      const matchedDomain = Object.keys(this._translations.industriesDomain).find((d) => d.toUpperCase() === sub.toUpperCase());
+      const matchName = matchedDomain && matchedDomain in this._translations.industriesDomain ? this._translations.industriesDomain[matchedDomain] : sub;
+      const selected = isSubSelected(industry, sub);
+      return html`<calcite-tree-item .label=${matchName} @click=${(evt) => {
+        if (evt.detail !== 0)
+          this.changeIndustryFilter(industry, sub, matchName, true);
+      }} @keydown=${(evt) => {
+        handleKeyboardAction(evt, () => {
+          this.changeIndustryFilter(industry, sub, matchName, true);
         });
-      }} .selected=${u || void 0}>${c}</calcite-tree-item>`;
-    }), n = g(Object.entries(v), ([i, a]) => i, ([i, a]) => {
-      const s = this._industryMatchName(i), r = a, c = e(i), u = o(i, r);
-      return h`<calcite-tree-item .label=${s} @click=${(l) => {
-        l.detail !== 0 && this.changeIndustryFilter(i, "", s, !0);
-      }} @keydown=${(l) => {
-        _(l, () => {
-          this.changeIndustryFilter(i, "", s, !0);
+      }} .selected=${selected || void 0}>${matchName}</calcite-tree-item>`;
+    });
+    const treeItems = repeat(Object.entries(industryMatrix), ([industry, domain]) => industry, ([industry, domain]) => {
+      const matchName = this._industryMatchName(industry);
+      const subs = domain;
+      const selectedIndustryOnly = isIndustryOnlySelected(industry);
+      const expanded = isExpanded(industry, subs);
+      return html`<calcite-tree-item .label=${matchName} @click=${(evt) => {
+        if (evt.detail !== 0)
+          this.changeIndustryFilter(industry, "", matchName, true);
+      }} @keydown=${(evt) => {
+        handleKeyboardAction(evt, () => {
+          this.changeIndustryFilter(industry, "", matchName, true);
         });
-      }} .selected=${c || void 0} .expanded=${u ? !0 : void 0}>${s}${r.length > 0 && h`<calcite-tree slot=children selection-mode=multiple>${d(i, r)}</calcite-tree>` || ""}</calcite-tree-item>`;
+      }} .selected=${selectedIndustryOnly || void 0} .expanded=${expanded ? true : void 0}>${matchName}${subs.length > 0 && html`<calcite-tree slot=children selection-mode=multiple>${subTreeItems(industry, subs)}</calcite-tree>` || ""}</calcite-tree-item>`;
     });
-    return h`<calcite-block description expanded class="border-color" .heading=${this._translations.industriesHeader} .label=${this._translations.industriesHeader}><calcite-action class=${S(this._isMobile ? "" : "display-none")} icon=x @click=${this._toggleFilter} slot=content-end text></calcite-action><calcite-tree selection-mode=single-persist class="tree-padding">${n}</calcite-tree></calcite-block>`;
+    return html`<calcite-block description expanded class="border-color" .heading=${this._translations.industriesHeader} .label=${this._translations.industriesHeader}><calcite-action class=${safeClassMap(this._isMobile ? "" : "display-none")} icon=x @click=${this._toggleFilter} slot=content-end text></calcite-action><calcite-tree selection-mode=single-persist class="tree-padding">${treeItems}</calcite-tree></calcite-block>`;
   }
   _toggleFilter() {
     this.toggleFilter.emit();
   }
   async _loadUserFirstName() {
     try {
-      const t = await this._configContextConsumer.value?.userSession?.getUser();
-      if (t?.fullName) {
-        const e = t.fullName.split(" ")[0];
-        this._userFirstName = e;
+      const user = await this._configContextConsumer.value?.userSession?.getUser();
+      if (user?.fullName) {
+        const userFirstName = user.fullName.split(" ")[0];
+        this._userFirstName = userFirstName;
       }
-    } catch {
+    } catch (error) {
     }
   }
 }
-b("solutions-filter-panel", M);
+customElement("solutions-filter-panel", SolutionsFilterPanel);
 export {
-  M as SolutionsFilterPanel
+  SolutionsFilterPanel
 };

package/dist/components/solutions-resources-section/customElement.js

@@ -1,24 +1,83 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as s, html as e } from "lit";
-import { LitElement as n } from "@arcgis/lumina";
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { LitElement } from "@arcgis/lumina";
 import "../solution-resource-card/customElement.js";
-const o = s`*[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.resources-section{padding:3rem var(--calcite-spacing-md);max-width:1440px;margin:0 auto;box-sizing:border-box}.section-header{margin-bottom:3rem;text-align:center}.section-heading{font-size:var(--calcite-font-size-3);font-weight:var(--calcite-font-weight-small);margin:0 0 var(--calcite-spacing-lg) 0;color:var(--calcite-color-text-1)}.section-subheading{font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);margin:0}.cards-container{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap}.cards-container solution-resource-card{flex:1 1 200px}`;
-class a extends n {
+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.
+ */
+
+/* Focus styles for tabbable text elements - only show on keyboard navigation */
+*[tabindex]:focus-visible {
+  outline: 2px solid var(--calcite-color-brand);
+  outline-offset: 2px;
+}
+
+.resources-section {
+  padding: 3rem var(--calcite-spacing-md);
+  max-width: 1440px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.section-header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+
+.section-heading {
+  font-size: var(--calcite-font-size-3);
+  font-weight: var(--calcite-font-weight-small);
+  margin: 0 0 var(--calcite-spacing-lg) 0;
+  color: var(--calcite-color-text-1);
+}
+
+.section-subheading {
+  font-size: var(--calcite-font-size-0);
+  color: var(--calcite-color-text-2);
+  margin: 0;
+}
+
+.cards-container {
+  display: flex;
+  gap: var(--calcite-spacing-md);
+  flex-wrap: wrap;
+}
+
+.cards-container solution-resource-card {
+  flex: 1 1 200px;
+}
+`;
+class SolutionsResourcesSection extends LitElement {
   constructor() {
-    super(...arguments), this.heading = "", this.subheading = "", this.cards = [];
+    super(...arguments);
+    this.heading = "";
+    this.subheading = "";
+    this.cards = [];
   }
   static {
-    this.properties = { heading: [1, { type: String }], subheading: [1, { type: String }], cards: [1, { type: Array }] };
+    this.properties = { heading: [1, { type: String }, {}], subheading: [1, { type: String }, {}], cards: [1, { type: Array }, {}] };
   }
   static {
-    this.styles = o;
+    this.styles = styles;
   }
   render() {
-    return e`<div class="resources-section"><div class="section-header"><h2 class="section-heading" tabindex=0>${this.heading}</h2><p class="section-subheading" tabindex=0>${this.subheading}</p></div><div class="cards-container">${this.cards.map((i) => e`<solution-resource-card .icon=${i.icon} .meridianIcon=${i.meridianIcon} .heading=${i.heading} .description=${i.description} .url=${i.url} .headingEn=${i.headingEn} .sectionHeadingEn=${i.sectionHeadingEn}></solution-resource-card>`)}</div></div>`;
+    return html`<div class="resources-section"><div class="section-header"><h2 class="section-heading" tabindex=0>${this.heading}</h2><p class="section-subheading" tabindex=0>${this.subheading}</p></div><div class="cards-container">${this.cards.map((card) => html`<solution-resource-card .icon=${card.icon} .meridianIcon=${card.meridianIcon} .heading=${card.heading} .description=${card.description} .url=${card.url} .headingEn=${card.headingEn} .sectionHeadingEn=${card.sectionHeadingEn}></solution-resource-card>`)}</div></div>`;
   }
 }
-t("solutions-resources-section", a);
+customElement("solutions-resources-section", SolutionsResourcesSection);
 export {
-  a as SolutionsResourcesSection
+  SolutionsResourcesSection
 };