@esri/solutions-components 1.1.0-next.20251015.1 → 1.1.0

package/dist/components/solutions-all-shell/customElement.js

@@ -1,16 +1,16 @@
 import { c } from "../../chunks/runtime.js";
 import { repeat as d } from "lit/directives/repeat.js";
-import { u } from "../../chunks/useT9n.js";
-import { LitElement as h, createEvent as r, nothing as p, safeStyleMap as a, safeClassMap as f } from "@arcgis/lumina";
+import { u as h } from "../../chunks/useT9n.js";
+import { LitElement as u, createEvent as o, nothing as f, safeStyleMap as a, safeClassMap as p } from "@arcgis/lumina";
 import { useContextConsumer as g } from "@arcgis/lumina/context";
-import { css as m, html as l } from "lit";
-import { i as b } from "../../chunks/deployAppContexts.js";
+import { css as b, html as l } from "lit";
+import { i as m } from "../../chunks/deployAppContexts.js";
 import { j as y, k as _ } from "../../chunks/interfaces.js";
-import { createRef as n, ref as o } from "lit/directives/ref.js";
+import { createRef as n, ref as r } from "lit/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20251015.1 */
-const v = m`/** @license
+v1.1.0 */
+const v = b`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,22 +24,22 @@ const v = m`/** @license
  * 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.
- */.display-flex{display:flex}.border-override{border-top-width:var(--calcite-border-width-none);border-bottom-width:var(--calcite-border-width-none)}.header-override{--calcite-panel-header-content-space: 0px;--calcite-panel-header-background-color: var(--calcite-color-foreground-2)}.panel-override{--calcite-panel-background-color: var(--calcite-color-foreground-2);--calcite-panel-border-color: none}.label-override{--calcite-label-margin-bottom: 0px;padding-inline-start:1rem}.header-button-padding{padding-top:.5rem;padding-bottom:.5rem;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start{padding-inline-start:1rem}.align-items-center{align-items:center}.justify-content-end{justify-content:end}.filter-width-350{--calcite-shell-panel-width: 350px}.z-index-1{z-index:1}.z-index-2{z-index:2}h1{font-weight:unset;margin:0;padding:0}@media(max-width:800px){.filter{display:none}.filter-button{display:block;position:absolute;top:.5rem;left:.5rem;z-index:999}}@media(min-width:800px){.filter-button{display:none}}.mock-fab{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}.background-override{--calcite-shell-panel-background-color: var(--calcite-color-foreground-3);--calcite-panel-background-color: var(--calcite-color-foreground-3)}.position-relative{position:relative}.height-100{height:100%}`;
-class S extends h {
+ */.display-flex{display:flex}.border-override{border-top-width:var(--calcite-border-width-none);border-bottom-width:var(--calcite-border-width-none)}.header-override{--calcite-panel-header-content-space: 0px;--calcite-panel-header-background-color: var(--calcite-color-foreground-2)}.panel-override{--calcite-panel-background-color: var(--calcite-color-foreground-2);--calcite-panel-border-color: none}.label-override{--calcite-label-margin-bottom: 0px;padding-inline-start:1rem}.header-button-padding{padding-top:.5rem;padding-bottom:.5rem;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start{padding-inline-start:1rem}.align-items-center{align-items:center}.justify-content-end{justify-content:end}.filter-width-350{--calcite-shell-panel-width: 350px}.z-index-1{z-index:1}.z-index-2{z-index:2}h1{font-weight:unset;margin:0;padding:0}@media(max-width:800px){.filter{display:none}.filter-button{display:block;position:absolute;top:.5rem;left:.5rem;z-index:999}}@media(min-width:800px){.filter-button{display:none}}.mock-fab{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}.background-override{--calcite-shell-panel-background-color: var(--calcite-color-foreground-3);--calcite-panel-background-color: var(--calcite-color-foreground-3)}.position-relative{position:relative}.height-100{height:100%}.height-32{height:32px}`;
+class x extends u {
   constructor() {
     super(), this.solutionsCount = 0, this.filterOpen = !0, this._filters = {
       categories: [],
       searchTerm: ""
-    }, this.isMobile = !1, this._translations = u({ name: "solutions-all-shell", blocking: !0 }), this._allSolutionsPanelRef = n(), this._solutionsFilterPanelRef = n(), this._isMobileContextConsumer = g({
-      context: b,
+    }, this.isMobile = !1, this._translations = h({ name: "solutions-all-shell", blocking: !0 }), this._allSolutionsPanelRef = n(), this._solutionsFilterPanelRef = n(), this._isMobileContextConsumer = g({
+      context: m,
       subscribe: !0,
       callback: (e) => this.isMobile = e
-    }), this.filterRemoved = r(), this.solutionsAllLoaded = r(), this.listenOn(window, "searchChanged", (e) => {
-      e.detail && e.detail.scope === "solutions" && this._filterApplied(e.detail.option);
+    }), this.filterRemoved = o(), this.solutionsAllLoaded = o(), this.listenOn(window, "searchChanged", (e) => {
+      e.detail && e.detail.scope === "all-solutions" && this._filterApplied(e.detail.option);
     });
   }
   static {
-    this.properties = { appConfig: 1, solutionsCount: 9, filterOpen: 16, _filters: 16, isMobile: 16, _translations: 16 };
+    this.properties = { solutionsCount: 9, filterOpen: 16, _filters: 16, isMobile: 16, _translations: 16 };
   }
   static {
     this.styles = v;
@@ -62,19 +62,19 @@ class S extends h {
   }
   render() {
     const e = this.filterOpen ? "chevron-left" : "chevron-right", i = this.isMobile ? "justify-content-end" : "";
-    return l`<calcite-shell class="position-relative">${this.isMobile ? "" : this._getFilterPanel()}<calcite-button appearance=outline-fill class="filter-button mock-fab z-index-2" icon-start=${e ?? p} kind=neutral @click=${this._toggleFilter} scale=m></calcite-button><h1 class="height-100"><calcite-panel class="border-override header-override panel-override z-index-1"><div class=${`display-flex align-items-center ${i}`} slot=header-content><calcite-label class="label-override">${this._translations.numberOfSolutions.replace("{{count}}", this.solutionsCount.toString())}</calcite-label>${this._renderChips()}</div>${this.isMobile && this._getFilterPanel() || ""}${this._getSolutionsAllPanel()}</calcite-panel></h1></calcite-shell>`;
+    return l`<calcite-shell class="position-relative">${this.isMobile ? "" : this._getFilterPanel()}<calcite-button appearance=outline-fill class="filter-button mock-fab z-index-2" icon-start=${e ?? f} kind=neutral @click=${this._toggleFilter} scale=m></calcite-button><h1 class="height-100"><calcite-panel class="border-override header-override panel-override z-index-1"><div class=${`display-flex align-items-center height-32 ${i}`} slot=header-content><calcite-label class="label-override">${this._translations.numberOfSolutions.replace("{{count}}", this.solutionsCount.toString())}</calcite-label>${this._renderChips()}</div>${this.isMobile && this._getFilterPanel() || ""}${this._getSolutionsAllPanel()}</calcite-panel></h1></calcite-shell>`;
   }
   _getFilterPanel() {
     const e = this.filterOpen ? { display: "flex" } : "";
-    return this.isMobile ? l`<calcite-panel class=${f(this.filterOpen ? "background-override" : "filter background-override")} id=solutions-all-shell-panel-start style=${a(e)}><solutions-filter-panel class="height-100" @applyFilter=${(i) => {
+    return this.isMobile ? l`<calcite-panel class=${p(this.filterOpen ? "background-override" : "filter background-override")} id=solutions-all-shell-panel-start style=${a(e)}><solutions-filter-panel class="height-100" @applyFilter=${(i) => {
       this._filterApplied(i.detail);
-    }} ${o(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel>` : l`<calcite-shell-panel class="filter background-override filter-width-350" id=solutions-all-shell-panel-start position=start slot=panel-start style=${a(e)}><calcite-panel><solutions-filter-panel class="height-100" @applyFilter=${(i) => {
+    }} ${r(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel>` : l`<calcite-shell-panel class="filter background-override filter-width-350" id=solutions-all-shell-panel-start position=start slot=panel-start style=${a(e)}><calcite-panel><solutions-filter-panel class="height-100" @applyFilter=${(i) => {
       this._filterApplied(i.detail);
-    }} ${o(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel></calcite-shell-panel>`;
+    }} ${r(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel></calcite-shell-panel>`;
   }
   _getSolutionsAllPanel() {
     const e = this.isMobile && this.filterOpen ? { display: "none" } : "";
-    return l`<solutions-all-panel .agoSolutionsGroupId=${this.appConfig.primarySolutionsGroupId} .enterpriseSolutionsGroupId=${this.appConfig.agoBasedEnterpriseSolutionsGroupId} .locale=${this.appConfig.locale || "en"} .orgUrl=${this.appConfig.portalURL} @cardsFetched=${this._updateSolutionCount} .portalUrl=${this.appConfig.portalURL} sort-type=relevance style=${a(e)} ${o(this._allSolutionsPanelRef)}></solutions-all-panel>`;
+    return l`<solutions-all-panel @cardsFetched=${this._updateSolutionCount} style=${a(e)} ${r(this._allSolutionsPanelRef)}></solutions-all-panel>`;
   }
   _renderChips() {
     if (!this._filters.categories)
@@ -108,7 +108,7 @@ class S extends h {
         this._filters.categories = [], this._allSolutionsPanelRef.value?.searchSolutions();
   }
 }
-c("solutions-all-shell", S);
+c("solutions-all-shell", x);
 export {
-  S as SolutionsAllShell
+  x as SolutionsAllShell
 };

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

@@ -4,7 +4,7 @@ import { u as r } from "../../chunks/useT9n.js";
 import { LitElement as a, nothing as e } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20251015.1 */
+v1.1.0 */
 const l = s`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solutions-articles/customElement.js

@@ -7,7 +7,7 @@ import { request as p } from "@esri/solution-common";
 import { u as g } from "../../chunks/deployAppContexts.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20251015.1 */
+v1.1.0 */
 const u = l`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solutions-articles-shell/customElement.js

@@ -4,7 +4,7 @@ import { u as l } from "../../chunks/useT9n.js";
 import { LitElement as n, createEvent as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20251015.1 */
+v1.1.0 */
 const o = i`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solutions-deploy-app/customElement.d.ts

@@ -1,34 +1,11 @@
 /// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 import { DeployAppTab, IActiveTab, ISolutionInfoCard, SortType } from '../../utils/interfaces';
+import { Auth } from '../../utils/Auth';
 
 export declare class SolutionsDeployApp extends LitElement {
     /** App config to use when useLocalAppConfig is false */
     appConfig: any;
-    /**
-     * The current locale.
-     *
-     * @default ''
-     */
-    locale: string;
-    /**
-     * URL of organization, e.g., 'http://myOrg.maps.arcgis.com'
-     *
-     * @default ''
-     */
-    orgUrl: string;
-    /**
-     * URL of portal, e.g., 'https://www.arcgis.com'
-     *
-     * @default ''
-     */
-    portalUrl: string;
-    /**
-     * The group id that contains the solutions.
-     *
-     * @default ''
-     */
-    primarySolutionsGroupId: string;
     /**
      * Define how the cards will be sorted
      *
@@ -49,6 +26,4 @@ export declare class SolutionsDeployApp extends LitElement {
     readonly deployAppTabSelected: TargetedEvent<this, DeployAppTab>;
     /** Details card selected event */
     readonly detailsCardSelected: TargetedEvent<this, ISolutionInfoCard>;
-    /** Emitted on demand when the auth token is updated */
-    readonly tokenRefreshed: TargetedEvent<this, string>;
 }

package/dist/components/solutions-deploy-app/customElement.js

@@ -1,20 +1,18 @@
-import { c as _ } from "../../chunks/runtime.js";
-import { css as y, html as d } from "lit";
+import { c as b } from "../../chunks/runtime.js";
+import { css as T, html as h } from "lit";
 import { u as m } from "../../chunks/useT9n.js";
-import { LitElement as g, createEvent as u, safeClassMap as p } from "@arcgis/lumina";
-import { createRef as a, ref as l } from "lit-html/directives/ref.js";
-import { C as f } from "../../chunks/CardsFetcher.js";
-import { q as T, r as S } from "../../chunks/interfaces.js";
+import { LitElement as y, createEvent as u, safeClassMap as p } from "@arcgis/lumina";
+import { createRef as i, ref as s } from "lit-html/directives/ref.js";
+import { C as g } from "../../chunks/CardsFetcher.js";
+import { q as S, r as v } from "../../chunks/interfaces.js";
 import { useContextProvider as n } from "@arcgis/lumina/context";
-import { a as v, i as C, l as x, u as I } from "../../chunks/deployAppContexts.js";
-import { A as w } from "../../chunks/Auth.js";
-import { _ as A } from "../../chunks/appConfig.js";
-import { UserSession as L } from "@esri/solution-common";
-import { f as $, a as k } from "../../chunks/cardsHelpers.js";
+import { a as f, c as C, i as x, u as A } from "../../chunks/deployAppContexts.js";
+import { f as w, a as L } from "../../chunks/cardsHelpers.js";
+import { _ as $ } from "../../chunks/appConfig.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20251015.1 */
-const O = y`/** @license
+v1.1.0 */
+const k = T`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -28,83 +26,89 @@ const O = y`/** @license
  * 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.
- */.back-color-override{background-color:var(--calcite-color-foreground-2);--calcite-tab-border-color: var(--calcite-color-foreground-3)}.display-none{display:none}.shell-container{width:1440px;display:block;max-width:96vw;padding-right:0;padding-left:0;margin-left:auto;margin-right:auto;box-sizing:border-box}.height-100{height:100%}calcite-tab-nav{padding-bottom:6px;padding-top:6px}calcite-tabs{--calcite-color-focus: transparent;height:100%}`;
-class P extends g {
+ */.back-color-override{background-color:var(--calcite-color-foreground-2);--calcite-tab-border-color: var(--calcite-color-foreground-3)}.display-none{display:none!important}.shell-container{width:1440px;display:block;max-width:96vw;padding-right:0;padding-left:0;margin-left:auto;margin-right:auto;box-sizing:border-box}.height-100{height:100%}calcite-tab-nav{padding-bottom:6px;padding-top:6px}calcite-tabs{--calcite-color-focus: transparent;height:100%}`;
+class I extends y {
   constructor() {
-    super(), this.locale = "", this.orgUrl = "", this.portalUrl = "", this.primarySolutionsGroupId = "", this.sortType = "relevance", this.useLocalAppConfig = !1, this._isLoaded = !1, this.isMobile = !1, this._translations = m({ name: "solutions-deploy-app", blocking: !0 }), this._agoTerms = `${T} OR ${S}`, this._allCards = [], this._allShell = a(), this._allTab = a(), this._allTabTitle = a(), this._articlesTab = a(), this._articlesTabTitle = a(), this._authContextProvider = n({ context: v }), this.authentication = void 0, this._categories = [], this._delay = !1, this._detailsShell = a(), this._detailsTab = a(), this._detailsTabTitle = a(), this._getSuggested = !1, this._isMobileContextProvider = n({ context: C }), this._localDebugContextProvider = n({ context: x }), this._mySolutionsShell = a(), this._mySolutionsTab = a(), this._mySolutionsTabTitle = a(), this._sortField = "relevance", this._sortOrder = "desc", this._userSessionContextProvider = n({ context: I }), this.deployAppTabSelected = u(), this.detailsCardSelected = u(), this.tokenRefreshed = u(), this.listenOn(window, "solutionsAllLoaded", this._solutionsAllLoaded), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "deployProgressEnd", this._deployProgressEnd), this._mediaQueryChange = this._mediaQueryChange.bind(this);
+    super(), this.sortType = "relevance", this.useLocalAppConfig = !1, this.authentication = void 0, this._isLoaded = !1, this.isMobile = !1, this._translations = m({ name: "solutions-deploy-app", blocking: !0 }), this._agoTerms = `${S} OR ${v}`, this._allCards = [], this._allShell = i(), this._allTab = i(), this._allTabTitle = i(), this._articlesTab = i(), this._articlesTabTitle = i(), this._authContextProvider = n({ context: f }), this._categories = [], this._configContextProvider = n({ context: C }), this._delay = !1, this._deployAppNav = i(), this._detailsShell = i(), this._detailsTab = i(), this._detailsTabTitle = i(), this._getSuggested = !1, this._isMobileContextProvider = n({ context: x }), this._mySolutionsShell = i(), this._mySolutionsTab = i(), this._mySolutionsTabTitle = i(), this._sortField = "relevance", this._sortOrder = "desc", this._userSessionContextProvider = n({
+      context: A
+    }), this.deployAppTabSelected = u(), this.detailsCardSelected = u(), this.listenOn(window, "solutionsAllLoaded", this._solutionsAllLoaded), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "deployProgressEnd", this._deployProgressEnd), this._mediaQueryChange = this._mediaQueryChange.bind(this);
   }
   static {
-    this.properties = { appConfig: 1, locale: 1, orgUrl: 1, portalUrl: 1, primarySolutionsGroupId: 1, sortType: 1, useLocalAppConfig: 5, _isLoaded: 16, isMobile: 16, _translations: 16 };
+    this.properties = { appConfig: 1, sortType: 1, useLocalAppConfig: 5, authentication: 16, _isLoaded: 16, isMobile: 16, _translations: 16 };
   }
   static {
-    this.styles = O;
+    this.styles = k;
   }
   selectTab(t, e) {
-    const s = this._getDefaultSearchOptions(e);
-    switch (console.log(s), t.tabType) {
+    const l = this._getDefaultSearchOptions(e);
+    switch (t.tabType) {
       case "all-solutions":
-        this._allTab.value.selected = !0, this._allTabTitle.value.selected = !0, s && this._allShell.value?.searchSolutions(s);
+        this._allTab.value.selected = !0, this._allTabTitle.value.selected = !0, l && this._allShell.value?.searchSolutions(l);
         break;
       case "articles":
         this._articlesTab.value.selected = !0, this._articlesTabTitle.value.selected = !0;
         break;
       case "details":
         if (this._allCards) {
-          let i = $(this._allCards, t.tabTitleOrId);
-          i = i || k(this._allCards, t.tabTitleOrId), i ? (this._detailsTab.value.selected = !0, this._detailsTabTitle.value.selected = !0, this.detailsCardSelected.emit(i)) : (this._allTab.value.selected = !0, this._allTabTitle.value.selected = !0, this._setActiveTab("all-solutions"));
+          let a = w(this._allCards, t.tabTitleOrId);
+          a = a || L(this._allCards, t.tabTitleOrId), a ? (this._detailsTab.value.selected = !0, this._detailsTabTitle.value.selected = !0, this.detailsCardSelected.emit(a)) : (this._allTab.value.selected = !0, this._allTabTitle.value.selected = !0, this._setActiveTab(new CustomEvent("all-solutions")));
         }
         break;
       case "my-deployments":
-        this._mySolutionsTab.value.selected = !0, this._mySolutionsTabTitle.value.selected = !0, s && this._mySolutionsShell.value?.searchSolutions(s);
+        this._mySolutionsTab.value.selected = !0, this._mySolutionsTabTitle.value.selected = !0, l && this._mySolutionsShell.value?.searchSolutions(l);
         break;
     }
     this._blurTabs();
   }
   async connectedCallback() {
-    super.connectedCallback();
-    const t = new L({
-      username: "",
-      password: ""
-    });
-    this._userSessionContextProvider.setValue(t), this._mediaQuery = window.matchMedia("(max-width: 800px)"), this._mediaQuery.addEventListener("change", this._mediaQueryChange), this._mediaQueryChange(this._mediaQuery);
+    super.connectedCallback(), this._mediaQuery = window.matchMedia("(max-width: 800px)"), this._mediaQuery.addEventListener("change", this._mediaQueryChange), this._mediaQueryChange(this._mediaQuery);
   }
   async load() {
-    this.useLocalAppConfig ? (this.appConfig = A, this.primarySolutionsGroupId = this.appConfig.primarySolutionsGroupId, this.orgUrl = this.appConfig.orgUrl, this.locale = this.appConfig.locale, this.portalUrl = this.appConfig.portalURL, this._localDebugContextProvider.setValue(!0)) : (this.primarySolutionsGroupId = this.appConfig.primarySolutionsGroupId, this._localDebugContextProvider.setValue(!1)), this._cardsFetcher = new f(this.locale, this.orgUrl, this.portalUrl), this.authentication || (this.appConfig.authentication ? this.authentication = this.appConfig.authentication : (this.authentication = new w(this.appConfig.appId, this.appConfig.portalURL, this.appConfig.locale), await this.authentication.initialize(), this.authentication.IsSignedIn || this.authentication.signIn())), this._authContextProvider.setValue(this.authentication), this.authentication.RestUserSession && this._userSessionContextProvider.setValue(this.authentication.RestUserSession), this._setRefreshInterval(), await this._getSolutions();
-  }
-  loaded() {
-    this._handleTabs();
+    this.useLocalAppConfig && (this.appConfig = $);
   }
   render() {
     const t = this._isLoaded ? "display-none" : "", e = this._isLoaded ? "" : "display-none";
-    return d`<calcite-loader class=${p(t)} id=solutions-loader .label=${this._translations.fetchingAllSolutions}></calcite-loader><calcite-tabs class=${p(e)} scale=l><calcite-tab-nav class="shell-container" slot=title-group><calcite-tab-title @calciteTabsActivate=${() => this._setActiveTab("all-solutions")} ${l(this._allTabTitle)}>${this._translations.allSolutions}</calcite-tab-title>${this.authentication?.IsSignedIn ? d`<calcite-tab-title @calciteTabsActivate=${() => this._setActiveTab("my-deployments")} ${l(this._mySolutionsTabTitle)}>${this._translations.mySolutions}</calcite-tab-title>` : ""}<calcite-tab-title @calciteTabsActivate=${() => this._setActiveTab("articles")} ${l(this._articlesTabTitle)}>${this._translations.solutionArticles}</calcite-tab-title><calcite-tab-title class="display-none" @calciteTabsActivate=${() => this._setActiveTab("details")} ${l(this._detailsTabTitle)}></calcite-tab-title></calcite-tab-nav><calcite-tab class="back-color-override" selected ${l(this._allTab)}><solutions-searchsort-toolbar .isMobile=${this.isMobile} scope=solutions></solutions-searchsort-toolbar><solutions-all-shell .appConfig=${this.appConfig} class="shell-container height-100" ${l(this._allShell)}></solutions-all-shell></calcite-tab>${this.authentication?.IsSignedIn ? d`<calcite-tab class="back-color-override" ${l(this._mySolutionsTab)}><solutions-searchsort-toolbar default-sort-type=created .isMobile=${this.isMobile} scope=deployments></solutions-searchsort-toolbar><solutions-deployed-shell .appConfig=${this.appConfig} class="shell-container height-100" ${l(this._mySolutionsShell)}></solutions-deployed-shell></calcite-tab>` : ""}<calcite-tab class="back-color-override" ${l(this._articlesTab)}><solutions-articles-shell class="shell-container height-100"></solutions-articles-shell></calcite-tab><calcite-tab class="back-color-override" ${l(this._detailsTab)}><solution-details-panel class="shell-container height-100" ${l(this._detailsShell)}></solution-details-panel></calcite-tab></calcite-tabs>`;
+    return h`<calcite-shell><solutions-deploy-app-nav .appConfig=${this.appConfig} @authInit=${this._handleAuthInit} @navTabSelected=${this._setActiveTab} slot=header .useLocalAppConfig=${this.useLocalAppConfig} ${s(this._deployAppNav)}></solutions-deploy-app-nav><solutions-searchsort-toolbar .isMobile=${this.isMobile} slot=header></solutions-searchsort-toolbar><calcite-loader class=${p(t)} id=solutions-loader .label=${this._translations.fetchingAllSolutions}></calcite-loader><calcite-tabs class=${p(e)} scale=l><calcite-tab-nav class="shell-container display-none" slot=title-group><calcite-tab-title ${s(this._allTabTitle)}>${this._translations.allSolutions}</calcite-tab-title>${this.authentication?.IsSignedIn ? h`<calcite-tab-title ${s(this._mySolutionsTabTitle)}>${this._translations.mySolutions}</calcite-tab-title>` : ""}<calcite-tab-title ${s(this._articlesTabTitle)}>${this._translations.solutionArticles}</calcite-tab-title><calcite-tab-title class="display-none" ${s(this._detailsTabTitle)}></calcite-tab-title></calcite-tab-nav><calcite-tab class="back-color-override" selected ${s(this._allTab)}><solutions-all-shell class="shell-container height-100" ${s(this._allShell)}></solutions-all-shell></calcite-tab>${this.authentication?.IsSignedIn ? h`<calcite-tab class="back-color-override" ${s(this._mySolutionsTab)}><solutions-deployed-shell class="shell-container height-100" ${s(this._mySolutionsShell)}></solutions-deployed-shell></calcite-tab>` : ""}<calcite-tab class="back-color-override" ${s(this._articlesTab)}><solutions-articles-shell class="shell-container height-100"></solutions-articles-shell></calcite-tab><calcite-tab class="back-color-override" ${s(this._detailsTab)}><solution-details-panel class="shell-container height-100" ${s(this._detailsShell)}></solution-details-panel></calcite-tab></calcite-tabs></calcite-shell>`;
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._mediaQuery?.removeEventListener("change", this._mediaQueryChange);
   }
+  async _handleAuthInit(t) {
+    const e = t.detail;
+    e.userSession && this._userSessionContextProvider.setValue(e.userSession), e.authentication && (this.authentication = e.authentication, this._authContextProvider.setValue(this.authentication)), this._configContextProvider.setValue(e), this._cardsFetcher = new g(e.locale, e.orgUrl, e.portalUrl), await this._getSolutions(e.primarySolutionsGroupId);
+  }
   _mediaQueryChange(t) {
     this.isMobile = t.matches, this._isMobileContextProvider.setValue(this.isMobile);
   }
-  _handleTabs() {
-    document.body.addEventListener("keydown", function(t) {
-      t.key == "Tab" || t.key == "Shift " || t.key == "Enter" ? document.querySelector("calcite-tabs")?.style.setProperty("--calcite-color-focus", "var(--calcite-color-brand)") : document.querySelector("calcite-tabs")?.style.setProperty("--calcite-color-focus", "transparent");
-    }), document.body.addEventListener("click", function() {
-      document.querySelector("calcite-tabs")?.style.setProperty("--calcite-color-focus", "transparent");
-    });
-  }
   _setActiveTab(t) {
-    this.deployAppTabSelected.emit(t);
+    const e = t.detail;
+    switch (e) {
+      case "all-solutions":
+        this._allTabTitle.value?.click();
+        break;
+      case "my-deployments":
+        this._mySolutionsTabTitle.value?.click();
+        break;
+      case "articles":
+        this._articlesTabTitle.value?.click();
+        break;
+      case "details":
+        this._detailsTabTitle.value?.click();
+        break;
+    }
+    this.deployAppTabSelected.emit(e);
   }
   _solutionsAllLoaded() {
     this._isLoaded = !0;
   }
   _detailsCardSelected() {
-    this._detailsTabTitle.value.selected = !0, this._detailsTab.value.selected = !0;
+    this._detailsTabTitle.value.selected = !0, this._detailsTab.value.selected = !0, this._deployAppNav.value.clearMenuItems();
   }
   _deployProgressEnd() {
     this._mySolutionsTabTitle.value.selected = !0, this._mySolutionsTab.value.selected = !0;
   }
-  async _getSolutions() {
-    const t = await this._cardsFetcher?.requestAvailableSolutionCards(
+  async _getSolutions(t) {
+    const e = await this._cardsFetcher?.requestAvailableSolutionCards(
       {
         q: this._agoTerms,
         filter: "type:Solution",
@@ -116,7 +120,7 @@ class P extends g {
         delay: this._delay,
         getSuggested: this._getSuggested
       },
-      this.primarySolutionsGroupId,
+      t,
       "",
       //this.enterpriseSolutionsGroupId, TODO both are passed by default in the old app...don't follow why
       this._userSessionContextProvider.value,
@@ -124,43 +128,25 @@ class P extends g {
         num: 1e3
       }
     );
-    return this._allCards.length === 0 && t?.cards && (this._allCards = t?.cards), this._allCards;
+    return this._allCards.length === 0 && e?.cards && (this._allCards = e?.cards), this._allCards;
   }
   _blurTabs() {
     this._allTabTitle.value?.blur(), this._articlesTabTitle.value?.blur(), this._detailsTabTitle.value?.blur(), this._mySolutionsTabTitle.value?.blur();
   }
-  _setRefreshInterval() {
-    const t = this._userSessionContextProvider?.value, e = this._authContextProvider?.value;
-    if (t && t.tokenDuration && e?.IsSignedIn) {
-      const s = t.tokenDuration * 0.9;
-      setInterval(
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        async () => {
-          const i = await e?.refreshSession();
-          if (i) {
-            this._userSessionContextProvider.setValue(i);
-            const r = i?.token ?? "";
-            this.tokenRefreshed.emit(r);
-          }
-        },
-        s
-      );
-    }
-  }
   _getDefaultSearchOptions(t) {
     let e;
     if (t) {
-      const s = t.domain, i = t.industry, r = t.offerType, c = t.searchTerm, b = "";
+      const l = t.domain, a = t.industry, d = t.offerType, r = t.searchTerm, _ = "";
       let o = t.sortField;
-      const h = t.owner;
-      e = s || i ? {
-        type: s ? "domain" : i ? "industry" : ""
-      } : void 0, s && (e = e ? { ...e, domain: s } : { domain: s }), i && (e = e ? { ...e, industry: i } : { industry: i }), c && (e = e ? { ...e, searchTerm: c } : { searchTerm: c }), e && (e = { ...e, displayValue: b }), o && (e = e ? { ...e, sortType: o } : { sortType: o }), r && (o = r.toLowerCase(), e = e ? { ...e, sortType: o } : { sortType: o }), h && (e = e ? { ...e, owner: h } : { owner: h });
+      const c = t.owner;
+      e = l || a ? {
+        type: l ? "domain" : a ? "industry" : ""
+      } : void 0, l && (e = e ? { ...e, domain: l } : { domain: l }), a && (e = e ? { ...e, industry: a } : { industry: a }), r && (e = e ? { ...e, searchTerm: r } : { searchTerm: r }), e && (e = { ...e, displayValue: _ }), o && (e = e ? { ...e, sortType: o } : { sortType: o }), d && (o = d.toLowerCase(), e = e ? { ...e, sortType: o } : { sortType: o }), c && (e = e ? { ...e, owner: c } : { owner: c });
     }
     return e;
   }
 }
-_("solutions-deploy-app", P);
+b("solutions-deploy-app", I);
 export {
-  P as SolutionsDeployApp
+  I as SolutionsDeployApp
 };

package/dist/components/solutions-deploy-app/index.d.ts

@@ -1,9 +1,11 @@
+import "@esri/calcite-components/components/calcite-shell";
+import "../solutions-deploy-app-nav/index.js";
+import "../solutions-searchsort-toolbar/index.js";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-tabs";
 import "@esri/calcite-components/components/calcite-tab-nav";
 import "@esri/calcite-components/components/calcite-tab-title";
 import "@esri/calcite-components/components/calcite-tab";
-import "../solutions-searchsort-toolbar/index.js";
 import "../solutions-all-shell/index.js";
 import "../solutions-deployed-shell/index.js";
 import "../solutions-articles-shell/index.js";

package/dist/components/solutions-deploy-app/index.js

@@ -1,9 +1,11 @@
+import "@esri/calcite-components/components/calcite-shell";
+import "../solutions-deploy-app-nav/index.js";
+import "../solutions-searchsort-toolbar/index.js";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-tabs";
 import "@esri/calcite-components/components/calcite-tab-nav";
 import "@esri/calcite-components/components/calcite-tab-title";
 import "@esri/calcite-components/components/calcite-tab";
-import "../solutions-searchsort-toolbar/index.js";
 import "../solutions-all-shell/index.js";
 import "../solutions-deployed-shell/index.js";
 import "../solutions-articles-shell/index.js";

package/dist/components/solutions-deploy-app-nav/customElement.d.ts

@@ -1,16 +1,24 @@
 /// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { DeployAppTab } from '../../utils/interfaces';
-import { Auth } from '../../utils/Auth';
-import { PropertyValues } from 'lit';
+import { DeployAppTab, IAppConfig } from '../../utils/interfaces';
 
 export declare class SolutionsDeployAppNav extends LitElement {
     /** App config to use when useLocalAppConfig is false */
-    authentication: Auth | null;
+    appConfig: any;
     /**
-     * The active tab
+     * When true the local appConfig will be used over anything that was passed in.
+     * This is used for local debugging.
+     * When this is false authentication, locale, orgUrl, and portalUrl MUST be defined.
      *
-     * @default 'all-solutions'
+     * @default false
      */
-    activeTab: DeployAppTab;
+    useLocalAppConfig: boolean;
+    /** Use to clear the active state from all nav menu items */
+    clearMenuItems(): void;
+    /** Emitted on demand when the auth is initialized */
+    readonly authInit: TargetedEvent<this, IAppConfig>;
+    /** Tab selected event */
+    readonly navTabSelected: TargetedEvent<this, DeployAppTab>;
+    /** Emitted on demand when the auth token is updated */
+    readonly tokenRefreshed: TargetedEvent<this, string>;
 }