@esri/solutions-components 5.0.8-next.1 → 5.0.8

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

@@ -1,298 +1,103 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { LitElement, createEvent, safeStyleMap } from "@arcgis/lumina";
-import { useContextConsumer } from "@arcgis/lumina/context";
-import { css, html, svg } from "lit";
-import { C as configContext, H as isMobileContext, K as handleKeyboardAction } from "../../chunks/helpers.js";
-import { createRef, ref } from "lit/directives/ref.js";
-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.
- */
-
-calcite-shell-panel {
-  z-index: var(--calcite-z-index-1);
-}
-
-.position-relative {
-  position: relative;
-}
-
-.display-flex {
-  display: flex;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.flex-grow {
-  flex: 1;
-  /* This allows the label to grow and take up available space */
-}
-
-.flex-shrink-0 {
-  flex: 0 0 auto;
-  /* This prevents the label from growing and allows it to take only the space it needs */
-}
-
-.leader-1 {
-  margin-top: var(--calcite-spacing-xxl);
-}
-
-.trailer-1 {
-  margin-bottom: var(--calcite-spacing-xxl);
-}
-
-.warning-text {
-  max-width: 35em;
-  margin-left: auto;
-  margin-right: auto;
-  font-size: var(--calcite-font-size-md);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.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: var(--calcite-spacing-none);
-  --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: var(--calcite-spacing-none);
-  font-weight: var(--calcite-font-weight-medium);
-}
-
-.header-content-wrapper {
-  padding-inline-start: var(--calcite-spacing-xxs);
-}
-
-.header-button-padding {
-  padding-top: var(--calcite-spacing-sm);
-  padding-bottom: var(--calcite-spacing-sm);
-  padding-inline-start: var(--calcite-spacing-lg);
-  padding-inline-end: var(--calcite-spacing-lg);
-}
-
-.padding-start {
-  padding-inline-start: var(--calcite-spacing-lg);
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.justify-content-end {
-  justify-content: end;
-}
-
-.justify-content-start {
-  justify-content: start;
-}
-
-.filter-width-350 {
-  --calcite-shell-panel-width: 350px;
-}
-
-.z-index-2 {
-  z-index: 2;
-}
-
-.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);
-}
-
-.position-relative {
-  position: relative;
-}
-
-.height-100 {
-  height: 100%;
-}
-
-.height-50 {
-  height: 50px;
-}
-
-.sign-in-prompt {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.sign-in-icon {
-  transform: translateX(-20px)
-}
-
-.height-150 {
-  height: 150px;
-}
-
-.width-150 {
-  width: 150px;
-}
-
-.padding-top-8 {
-  padding-top: 8px;
-}`;
-class SolutionsDeployedShell extends LitElement {
+import { c } from "../../chunks/runtime.js";
+import { u as d } from "../../chunks/useT9n.js";
+import { LitElement as h, createEvent as l, safeStyleMap as p } from "@arcgis/lumina";
+import { useContextConsumer as o } from "@arcgis/lumina/context";
+import { css as u, html as i, svg as g } from "lit";
+import { C as f, H as b, K as v } from "../../chunks/helpers.js";
+import { createRef as s, ref as r } from "lit/directives/ref.js";
+const m = u`calcite-shell-panel{z-index:var(--calcite-z-index-1)}.display-flex{display:flex}.flex-1,.flex-grow{flex:1}.flex-shrink-0{flex:0 0 auto}.leader-1{margin-top:var(--calcite-spacing-xxl)}.trailer-1{margin-bottom:var(--calcite-spacing-xxl)}.warning-text{max-width:35em;margin-left:auto;margin-right:auto;font-size:var(--calcite-font-size-md)}.text-center{text-align:center}.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: var(--calcite-spacing-none);--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: var(--calcite-spacing-none);font-weight:var(--calcite-font-weight-medium)}.header-content-wrapper{padding-inline-start:var(--calcite-spacing-xxs)}.header-button-padding{padding-top:var(--calcite-spacing-sm);padding-bottom:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}.padding-start{padding-inline-start:var(--calcite-spacing-lg)}.align-items-center{align-items:center}.justify-content-end{justify-content:end}.justify-content-start{justify-content:start}.filter-width-350{--calcite-shell-panel-width: 350px}.z-index-2{z-index:2}.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)}.position-relative{position:relative}.height-100{height:100%}.height-50{height:50px}.sign-in-prompt{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.sign-in-icon{transform:translate(-20px)}.height-150{height:150px}.width-150{width:150px}.padding-top-8{padding-top:8px}`;
+class x extends h {
   constructor() {
-    super();
-    this.solutionsCount = 0;
-    this.filterOpen = true;
-    this.isMobile = false;
-    this._showAlertFailed = false;
-    this._translations = useT9n({ name: "solutions-deployed-shell", blocking: true });
-    this._configContextConsumer = useContextConsumer({
-      context: configContext,
-      subscribe: true
-    });
-    this._deployedCardFetchFailedMessage = "";
-    this._deployedCardFetchFailedTitle = "";
-    this._isMobileContextConsumer = useContextConsumer({
-      context: isMobileContext,
-      subscribe: true,
-      callback: (value) => this.isMobile = value
-    });
-    this._solutionsDeployedPanelRef = createRef();
-    this._mainPanelRef = createRef();
-    this._panelFixed = false;
-    this.filterRemoved = createEvent();
-    this.tokenRefreshed = createEvent();
-    this._handleSignIn = () => {
-      const signInParam = window.location.pathname.endsWith("deployments") ? "" : "deployments";
-      this._configContextConsumer.value?.authentication?.signIn(signInParam);
-    };
-    this.listenOn(window, "deployedCardFetchFailed", (evt) => {
-      const detail = evt.detail;
-      this._deployedCardFetchFailedTitle = detail.title;
-      this._deployedCardFetchFailedMessage = detail.message;
-      this._showAlertFailed = true;
+    super(), this.solutionsCount = 0, this.filterOpen = !0, this.isMobile = !1, this._showAlertFailed = !1, this._translations = d({ name: "solutions-deployed-shell", blocking: !0 }), this._configContextConsumer = o({
+      context: f,
+      subscribe: !0
+    }), this._deployedCardFetchFailedMessage = "", this._deployedCardFetchFailedTitle = "", this._isMobileContextConsumer = o({
+      context: b,
+      subscribe: !0,
+      callback: (e) => this.isMobile = e
+    }), this._solutionsDeployedPanelRef = s(), this._mainPanelRef = s(), this._panelFixed = !1, this.filterRemoved = l(), this.tokenRefreshed = l(), this._handleSignIn = () => {
+      const e = window.location.pathname.endsWith("deployments") ? "" : "deployments";
+      this._configContextConsumer.value?.authentication?.signIn(e);
+    }, this.listenOn(window, "deployedCardFetchFailed", (e) => {
+      const t = e.detail;
+      this._deployedCardFetchFailedTitle = t.title, this._deployedCardFetchFailedMessage = t.message, this._showAlertFailed = !0;
     });
   }
   static {
-    this.properties = { solutionsCount: [9, {}, { type: Number }], filterOpen: [16, {}, { state: true }], isMobile: [16, {}, { state: true }], _showAlertFailed: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
+    this.properties = { solutionsCount: 9, filterOpen: 16, isMobile: 16, _showAlertFailed: 16, _translations: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = m;
   }
-  willUpdate(changes) {
-    if (changes.has("isMobile")) {
-      this.filterOpen = !this.isMobile;
-    }
+  willUpdate(e) {
+    e.has("isMobile") && (this.filterOpen = !this.isMobile);
   }
-  async searchSolutions(searchOptions) {
-    this._solutionsDeployedPanelRef.value?.setSearchOptions(searchOptions);
-    if ("sortType" in searchOptions || "searchTerm" in searchOptions) {
-      this._solutionsDeployedPanelRef.value?.searchSolutions(searchOptions);
-    }
+  async searchSolutions(e) {
+    this._solutionsDeployedPanelRef.value?.setSearchOptions(e), ("sortType" in e || "searchTerm" in e) && this._solutionsDeployedPanelRef.value?.searchSolutions(e);
   }
   async load() {
-    if (this._isMobileContextConsumer.value) {
-      this.isMobile = this._isMobileContextConsumer.value;
-    }
+    this._isMobileContextConsumer.value && (this.isMobile = this._isMobileContextConsumer.value);
   }
   updated() {
     this._fixPanelContentWrapperFocus();
   }
   _fixPanelContentWrapperFocus() {
     if (!this._panelFixed && this._mainPanelRef.value) {
-      const panel = this._mainPanelRef.value;
-      panel.componentOnReady?.().then(() => {
-        if (panel.shadowRoot) {
-          const contentWrapper = panel.shadowRoot.querySelector(".content-wrapper");
-          if (contentWrapper) {
-            contentWrapper.tabIndex = -1;
-            this._panelFixed = true;
-            this._setupPanelObserver();
-          }
+      const e = this._mainPanelRef.value;
+      e.componentOnReady?.().then(() => {
+        if (e.shadowRoot) {
+          const t = e.shadowRoot.querySelector(".content-wrapper");
+          t && (t.tabIndex = -1, this._panelFixed = !0, this._setupPanelObserver());
         }
       }).catch(() => {
-        this._panelFixed = true;
+        this._panelFixed = !0;
       });
     }
   }
   _setupPanelObserver() {
     if (this._panelObserver)
       return;
-    this._panelObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "tabindex") {
-          const target = mutation.target;
-          if (target.classList.contains("content-wrapper") && target.tabIndex === 0) {
-            target.tabIndex = -1;
-          }
+    this._panelObserver = new MutationObserver((t) => {
+      t.forEach((n) => {
+        if (n.type === "attributes" && n.attributeName === "tabindex") {
+          const a = n.target;
+          a.classList.contains("content-wrapper") && a.tabIndex === 0 && (a.tabIndex = -1);
         }
       });
     });
-    const panel = this._mainPanelRef.value;
-    if (panel?.shadowRoot) {
-      const contentWrapper = panel.shadowRoot.querySelector(".content-wrapper");
-      if (contentWrapper) {
-        this._panelObserver.observe(contentWrapper, { attributes: true, attributeFilter: ["tabindex"] });
-      }
+    const e = this._mainPanelRef.value;
+    if (e?.shadowRoot) {
+      const t = e.shadowRoot.querySelector(".content-wrapper");
+      t && this._panelObserver.observe(t, { attributes: !0, attributeFilter: ["tabindex"] });
     }
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
-    this._panelObserver?.disconnect();
+    super.disconnectedCallback(), this._panelObserver?.disconnect();
   }
   render() {
-    if (!this._configContextConsumer.value?.authentication?.IsSignedIn) {
+    if (!this._configContextConsumer.value?.authentication?.IsSignedIn)
       return this._getSignInPrompt();
-    }
-    const solutionsCountStyle = this.isMobile ? "justify-content-start" : "";
-    return html`<calcite-shell class="position-relative"><calcite-panel class="border-override header-override panel-override z-index-1" ${ref(this._mainPanelRef)}><div class=${`display-flex align-items-center height-50 header-content-wrapper ${solutionsCountStyle}`} slot=header-content><calcite-label class="label-override flex-shrink-0 padding-top-8" layout=inline>${this._translations.numberOfDeployments?.replace("{{count}}", this.solutionsCount.toString())}</calcite-label></div>${this._getSolutionsDeployedPanel()}</calcite-panel></calcite-shell>`;
+    const e = this.isMobile ? "justify-content-start" : "";
+    return i`<calcite-shell class="position-relative"><calcite-panel class="border-override header-override panel-override z-index-1" ${r(this._mainPanelRef)}><div class=${`display-flex align-items-center height-50 header-content-wrapper ${e}`} slot=header-content><calcite-label class="label-override flex-shrink-0 padding-top-8" layout=inline>${this._translations.numberOfDeployments?.replace("{{count}}", this.solutionsCount.toString())}</calcite-label></div>${this._getSolutionsDeployedPanel()}</calcite-panel></calcite-shell>`;
   }
   _getSignInPrompt() {
-    return html`<div class="sign-in-prompt">${this._getSignInIcon()}<div class="text-center leader-1 warning-text trailer-1">${this._translations.signInMessage}</div><calcite-button appearance=outline @click=${this._handleSignIn} @keydown=${(evt) => handleKeyboardAction(evt, () => this._handleSignIn())} scale=l>${this._translations.signIn}</calcite-button></div>`;
+    return i`<div class="sign-in-prompt">${this._getSignInIcon()}<div class="text-center leader-1 warning-text trailer-1">${this._translations.signInMessage}</div><calcite-button appearance=outline @click=${this._handleSignIn} @keydown=${(e) => v(e, () => this._handleSignIn())} scale=l>${this._translations.signIn}</calcite-button></div>`;
   }
   _getSolutionsDeployedPanel() {
-    const solutionsAllPanelOverride = this.isMobile && this.filterOpen ? { "display": "none" } : "";
-    return html`<div><solutions-deployed-panel @deployedCardsFetched=${this._updateSolutionCount} style=${safeStyleMap(solutionsAllPanelOverride)} ${ref(this._solutionsDeployedPanelRef)}></solutions-deployed-panel><calcite-alert icon=exclamation-mark-triangle kind=danger .label=${this._deployedCardFetchFailedTitle} @calciteAlertClose=${() => {
-      this._showAlertFailed = false;
+    const e = this.isMobile && this.filterOpen ? { display: "none" } : "";
+    return i`<div><solutions-deployed-panel @deployedCardsFetched=${this._updateSolutionCount} style=${p(e)} ${r(this._solutionsDeployedPanelRef)}></solutions-deployed-panel><calcite-alert icon=exclamation-mark-triangle kind=danger .label=${this._deployedCardFetchFailedTitle} @calciteAlertClose=${() => {
+      this._showAlertFailed = !1;
     }} .open=${this._showAlertFailed}><div slot=title>${this._deployedCardFetchFailedTitle}</div><div slot=message>${this._deployedCardFetchFailedMessage}</div></calcite-alert></div>`;
   }
-  _updateSolutionCount(evt) {
-    this.solutionsCount = evt.detail;
+  _updateSolutionCount(e) {
+    this.solutionsCount = e.detail;
   }
   _getSignInIcon() {
-    return html`<div class="sign-in-icon"><svg viewBox="0 0 64 64" width=200 height=200 xmlns=http://www.w3.org/2000/svg>${svg`<path d="M56.9 4.1V60h-.8V4.9H23.3l25.6 7.47v39.26l-28.8 8.4V35h.8v23.97l27.2-7.94V12.97L20.9 5.03V30h-.8V4.1h36.8zM30.735 41.7l.565.566 9.766-9.766-9.766-9.766-.565.567 8.799 8.799H5v.8h34.534l-8.8 8.8z" fill=var(--calcite-color-text-3) />`}</svg></div>`;
+    return i`<div class="sign-in-icon"><svg viewBox="0 0 64 64" width=200 height=200 xmlns=http://www.w3.org/2000/svg>${g`<path d="M56.9 4.1V60h-.8V4.9H23.3l25.6 7.47v39.26l-28.8 8.4V35h.8v23.97l27.2-7.94V12.97L20.9 5.03V30h-.8V4.1h36.8zM30.735 41.7l.565.566 9.766-9.766-9.766-9.766-.565.567 8.799 8.799H5v.8h34.534l-8.8 8.8z" fill=var(--calcite-color-text-3) />`}</svg></div>`;
   }
 }
-customElement("solutions-deployed-shell", SolutionsDeployedShell);
+c("solutions-deployed-shell", x);
 export {
-  SolutionsDeployedShell
+  x as SolutionsDeployedShell
 };