@esri/solutions-components 5.1.0-next.67 → 5.1.0-next.68

package/dist/components/solution-builder-assistant/customElement.d.ts

@@ -0,0 +1,63 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ISolutionDesign } from "../../utils/interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class SolutionBuilderAssistant extends LitElement {
+  /**
+   * Translations
+   *
+   * @internal
+   */
+  protected _translations: {
+      noticeTitle: string;
+      noticeMessage: string;
+      undo: string;
+      redo: string;
+      name: string;
+      namePlaceholder: string;
+      description: string;
+      descriptionPlaceholder: string;
+      tags: string;
+      tagsPlaceholder: string;
+      deploy: string;
+      viewDiagram: string;
+      openHelp: string;
+      discard: string;
+      contents: string;
+      featureLayer: string;
+      solutionContentItems: string;
+      edit: string;
+      editItemContent: string;
+      title: string;
+      apply: string;
+      close: string;
+      solutionThumbnail: string;
+  } & T9nMeta<{
+      noticeTitle: string;
+      noticeMessage: string;
+      undo: string;
+      redo: string;
+      name: string;
+      namePlaceholder: string;
+      description: string;
+      descriptionPlaceholder: string;
+      tags: string;
+      tagsPlaceholder: string;
+      deploy: string;
+      viewDiagram: string;
+      openHelp: string;
+      discard: string;
+      contents: string;
+      featureLayer: string;
+      solutionContentItems: string;
+      edit: string;
+      editItemContent: string;
+      title: string;
+      apply: string;
+      close: string;
+      solutionThumbnail: string;
+  }>;
+  /** Solution design - can be set externally for demo/testing */
+  accessor design: ISolutionDesign | null;
+}

package/dist/components/solution-builder-assistant/customElement.js

@@ -0,0 +1,137 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as d, html as a } from "lit";
+import { keyed as p } from "lit/directives/keyed.js";
+import { u as h } from "../../chunks/useT9n.js";
+import { LitElement as u, nothing as l } from "@arcgis/lumina";
+import { useContextConsumer as g } from "@arcgis/lumina/context";
+import { b as m } from "../../chunks/deployAppContexts.js";
+const b = d`.builder-content{display:flex;flex-direction:column;flex:1;overflow:auto}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--calcite-spacing-xxl);text-align:center;color:var(--calcite-color-text-3)}.empty-state calcite-icon{margin-bottom:var(--calcite-spacing-md);color:var(--calcite-color-text-3)}.empty-state p{margin:0;font-size:var(--calcite-font-size--1)}.header-container{display:flex;align-items:stretch;gap:var(--calcite-spacing-lg);padding-bottom:var(--calcite-spacing-lg)}.header-container calcite-notice{flex:1;margin:0}calcite-action-bar{flex-shrink:0;background:var(--calcite-color-brand);border-left:1px solid var(--calcite-color-brand-dark)}.content-container{display:flex;gap:var(--calcite-spacing-xl);margin-bottom:var(--calcite-spacing-lg)}.solution-item-section{flex:1;min-width:0;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.solution-item-inputs{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.thumbnail-inputs-row{display:flex;gap:var(--calcite-spacing-md);align-items:flex-start}.thumbnail-container{flex-shrink:0;width:253px;aspect-ratio:200 / 133;border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-border-radius);overflow:hidden;background:var(--calcite-color-foreground-2)}.thumbnail-container img{width:100%;height:100%;object-fit:cover}.stacked-inputs{flex:1;display:flex;flex-direction:column;gap:var(--calcite-spacing-md);min-width:0}.stacked-inputs calcite-label{min-width:0}.stacked-inputs calcite-input-text,.stacked-inputs calcite-text-area{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.stacked-inputs calcite-text-area{max-height:150px}.tags-row{width:100%;min-width:0}.tags-row calcite-combobox{width:100%}.actions-section{flex-shrink:0;width:200px;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.action-buttons{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.tabs-section{flex:1;display:flex;flex-direction:column;min-height:0}.tabs-section calcite-tabs{height:100%}.feature-layer-placeholder{padding:var(--calcite-spacing-lg);color:var(--calcite-color-text-3)}.popover-content{padding:var(--calcite-spacing-lg);min-width:300px}.popover-field{margin-top:var(--calcite-spacing-md)}.popover-actions{display:flex;justify-content:flex-end;gap:var(--calcite-spacing-sm);margin-top:var(--calcite-spacing-lg)}`;
+class v extends u {
+  constructor() {
+    super(), this.design = null, this._design = null, this._translations = h({ name: "solution-builder-assistant", blocking: !0 }), this._isDirty = !1, this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "", this._designContextConsumer = g({
+      context: m,
+      subscribe: !0,
+      callback: (t) => {
+        t?.design && (this._design = t.design);
+      }
+    }), this._handleUndo = () => {
+      console.log("Undo clicked - to be implemented");
+    }, this._handleRedo = () => {
+      console.log("Redo clicked - to be implemented");
+    }, this._handleTitleChange = (t) => {
+      if (!this._design)
+        return;
+      const i = {
+        ...this._design,
+        solution: {
+          ...this._design.solution,
+          title: t
+        }
+      };
+      this._design = i, this._isDirty = !0;
+    }, this._handleDescriptionChange = (t) => {
+      if (!this._design)
+        return;
+      const i = {
+        ...this._design,
+        solution: {
+          ...this._design.solution,
+          description: t
+        }
+      };
+      this._design = i, this._isDirty = !0;
+    }, this._handleTagsChange = (t) => {
+      if (!this._design)
+        return;
+      const i = Array.from(t.target.selectedItems).map((e) => e.value);
+      this._design = {
+        ...this._design,
+        solution: {
+          ...this._design.solution,
+          tags: i
+        }
+      }, this._isDirty = !0;
+    }, this._handleItemPopoverOpen = (t) => {
+      this._openPopoverId = t.id, this._editingItemTitle = t.title || "", this._editingItemDescription = t.description || "", this.requestUpdate();
+    }, this._handleCloseItemPopover = () => {
+      this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "";
+    }, this._handleClosePopover = async (t) => {
+      const i = this.renderRoot.querySelector(`#${t}`);
+      i && (i.open = !1, await i.updateComplete), this._handleCloseItemPopover();
+    }, this._handleApplyItemChanges = (t) => {
+      if (!this._design)
+        return;
+      const i = this._design.items.map((c) => c.id === t ? { ...c, title: this._editingItemTitle, description: this._editingItemDescription } : c), e = {
+        ...this._design,
+        items: i
+      };
+      this._design = e, this._isDirty = !0;
+    }, this._handleDeploy = async () => {
+      this._design && console.log("Deploy design:", this._design);
+    }, this._designContextConsumer;
+  }
+  static {
+    this.properties = { design: [1, { type: Object }], _design: 16, _translations: 16, _isDirty: 16, _openPopoverId: 16, _editingItemTitle: 16, _editingItemDescription: 16 };
+  }
+  static {
+    this.styles = b;
+  }
+  willUpdate(t) {
+    t.has("design") && (this._design = this.design);
+  }
+  render() {
+    return this._translations ? this._design ? a`<calcite-panel><div class="header-container">${this._renderNoticeBar()}${this._renderActionBar()}</div><div class="builder-content">${this._renderMainContent()}${this._renderTabsSection()}</div></calcite-panel>` : this._renderEmptyState() : a`<div>Loading...</div>`;
+  }
+  _renderEmptyState() {
+    return a`<calcite-panel><div class="empty-state"><calcite-icon icon=layer scale=l></calcite-icon><p>No solution design loaded</p></div></calcite-panel>`;
+  }
+  _renderNoticeBar() {
+    const t = this._translations;
+    return a`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${t.noticeTitle}</div><div slot=message>${t.noticeMessage}</div></calcite-notice>`;
+  }
+  _renderActionBar() {
+    const t = this._translations;
+    return a`<calcite-action-bar layout=horizontal expand-disabled><calcite-action .text=${t.undo} text-enabled icon=undo disabled @click=${this._handleUndo}></calcite-action><calcite-action .text=${t.redo} text-enabled icon=redo disabled @click=${this._handleRedo}></calcite-action></calcite-action-bar>`;
+  }
+  _renderMainContent() {
+    return a`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
+  }
+  _renderSolutionItemInputs() {
+    const t = this._translations, i = this._design?.solution?.thumbnailUrl || "", e = this._design?.solution?.title || "", c = this._design?.solution?.description || "", o = this._design?.solution?.tags || [];
+    return a`<div class="solution-item-inputs"><div class="thumbnail-inputs-row"><div class="thumbnail-container"><img src=${(i || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="133"%3E%3Crect fill="%23ddd" width="200" height="133"/%3E%3C/svg%3E') ?? l} alt=${t.solutionThumbnail ?? l}></div><div class="stacked-inputs"><calcite-label>${t.name}<calcite-input-text .placeholder=${t.namePlaceholder} .value=${e} @input=${(n) => this._handleTitleChange(n.target.value)}></calcite-input-text></calcite-label><calcite-label>${t.description}<calcite-text-area .placeholder=${t.descriptionPlaceholder} .value=${c} resize=none @input=${(n) => this._handleDescriptionChange(n.target.value)}></calcite-text-area></calcite-label></div></div><div class="tags-row"><calcite-label>${t.tags}${p(o.join(","), a`<calcite-combobox .label=${t.tags} .placeholder=${t.tagsPlaceholder} selection-mode=multiple allow-custom-values @calciteComboboxChange=${(n) => this._handleTagsChange(n)}>${o.map((n) => a`<calcite-combobox-item .value=${n} .heading=${n} selected></calcite-combobox-item>`)}</calcite-combobox>`)}</calcite-label></div></div>`;
+  }
+  _renderActionButtons() {
+    const t = this._translations;
+    return a`<div class="action-buttons"><calcite-button appearance=solid width=full icon-start=launch>${t.deploy}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=diagram>${t.viewDiagram}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=information>${t.openHelp}</calcite-button><calcite-button appearance=outline kind=danger width=full icon-start=trash>${t.discard}</calcite-button></div>`;
+  }
+  _renderTabsSection() {
+    const t = this._translations;
+    return a`<div class="tabs-section"><calcite-tabs bordered layout=center><calcite-tab-nav slot=title-group><calcite-tab-title>${t.contents}</calcite-tab-title><calcite-tab-title icon-start=layers>${t.featureLayer}</calcite-tab-title></calcite-tab-nav><calcite-tab>${this._renderContentsTab()}</calcite-tab><calcite-tab>${this._renderFeatureLayerTab()}</calcite-tab></calcite-tabs></div>`;
+  }
+  _renderContentsTab() {
+    const t = this._translations, i = this._design?.items || [];
+    return a`<div><calcite-list .label=${t.solutionContentItems}>${i.map((e) => {
+      const c = `edit-action-${e.id}`;
+      return a`<calcite-list-item .label=${e.title} .description=${e.description || ""}><solution-item-icon slot=content-start .designType=${e.type}></solution-item-icon><calcite-action slot=actions-end id=${c ?? l} icon=edit-attributes .text=${t.edit} scale=s></calcite-action></calcite-list-item>`;
+    })}</calcite-list>${i.map((e) => {
+      const c = `edit-action-${e.id}`, o = `edit-popover-${e.id}`, n = this._openPopoverId === e.id;
+      return a`<calcite-popover id=${o ?? l} .label=${t.editItemContent} .referenceElement=${c} placement=auto @calcitePopoverBeforeOpen=${() => this._handleItemPopoverOpen(e)} @calcitePopoverClose=${() => this._handleCloseItemPopover()}><div class="popover-content"><calcite-label>${t.title}<calcite-input-text .value=${n ? this._editingItemTitle : e.title} @input=${(s) => {
+        this._editingItemTitle = s.target.value;
+      }}></calcite-input-text></calcite-label><calcite-label class="popover-field">${t.description}<calcite-text-area .value=${n ? this._editingItemDescription : e.description} resize=none rows=4 @input=${(s) => {
+        this._editingItemDescription = s.target.value;
+      }}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(s) => {
+        s.stopPropagation(), this._handleApplyItemChanges(e.id);
+      }}>${t.apply}</calcite-button><calcite-button appearance=outline @click=${async (s) => {
+        s.stopPropagation(), await this._handleClosePopover(o);
+      }}>${t.close}</calcite-button></div></div></calcite-popover>`;
+    })}</div>`;
+  }
+  _renderFeatureLayerTab() {
+    return a`<div class="feature-layer-placeholder">\r\n        Feature Layer configuration will go here</div>`;
+  }
+}
+r("solution-builder-assistant", v);
+export {
+  v as SolutionBuilderAssistant
+};

package/dist/components/solution-builder-assistant/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/solution-builder-assistant/index.js

@@ -0,0 +1,20 @@
+import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-input-text";
+import "@esri/calcite-components/components/calcite-text-area";
+import "@esri/calcite-components/components/calcite-combobox";
+import "@esri/calcite-components/components/calcite-combobox-item";
+import "@esri/calcite-components/components/calcite-button";
+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 "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
+import "../solution-item-icon/index.js";
+import "@esri/calcite-components/components/calcite-popover";
+export * from "./customElement.js";

package/dist/components/solution-deploy-dialog/index.js

@@ -6,5 +6,5 @@ import "@esri/calcite-components/components/calcite-input";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-block";
 import "@esri/calcite-components/components/calcite-tooltip";
-import "@arcgis/analysis-components/dist/components/analysis-spatial-reference-selector.js";
+import "@arcgis/analysis-components/components/analysis-spatial-reference-selector";
 export * from "./customElement.js";

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

@@ -5,7 +5,7 @@ import { u as z } from "../../chunks/useT9n.js";
 import { LitElement as $ } from "@arcgis/lumina";
 import { createRef as k, ref as I } from "lit-html/directives/ref.js";
 import * as d from "gojs";
-import { g as A } from "../../chunks/getItemIcon.js";
+import { a as A } from "../../chunks/getItemIcon.js";
 import "../solution-item-accordion/customElement.js";
 const P = C`#filter-bar{background-color:var(--calcite-color-surface-2);position:absolute;top:16px;right:196px;z-index:100;box-shadow:var(--calcite-shadow-sm)}#filteredViewButtonDiv{padding:8px}#filteredViewButtonLabel{--calcite-label-margin-bottom: 0}#graph-navigation-bar{background-color:var(--calcite-color-surface-2);position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0;box-shadow:var(--calcite-shadow-sm)}.z-index-1{z-index:1}#diagram-panel{--calcite-panel-space: 0px}#diagram-shell-panel{--calcite-color-surface-1: var(--calcite-color-surface-2);padding:16px}`, _ = 15, V = 15, H = 10, u = new d.Size(220, 48), O = 1, G = 8, S = new d.Size(48, 48), M = new d.Size(16, 16), v = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '500 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', K = "val(--calcite-color-surface-1)", W = p("--calcite-color-border-1"), N = p("--calcite-color-surface-2"), g = p("--calcite-color-text-1"), T = p("--calcite-color-border-input"), j = p("--calcite-color-surface-2"), f = 1, b = 0.3, w = 1, x = 0.2, Z = 1;
 function q(o) {

package/dist/components/solution-item-icon/customElement.d.ts

@@ -2,6 +2,12 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class SolutionItemIcon extends LitElement {
+  /**
+   * The design type (human-readable, alternative to type + typeKeywords)
+   *
+   * @default ''
+   */
+  accessor designType: string;
   /**
    * Indicate if this is portal
    *

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

@@ -1,24 +1,25 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as e } from "../../chunks/runtime.js";
-import { css as i, html as o } from "lit";
-import { LitElement as s, nothing as t } from "@arcgis/lumina";
-import { g as r } from "../../chunks/getItemIcon.js";
-const n = i`.item-type-icon{@apply block h-4 pointer-events-none;margin-top:.15em!important;min-width:16px;fill:currentColor;transform:rotate(360deg)}.item-type-icon-margin{@apply m-inline-end-1.5;}`;
-class m extends s {
+import { c as s } from "../../chunks/runtime.js";
+import { css as o, html as n } from "lit";
+import { LitElement as r, nothing as t } from "@arcgis/lumina";
+import { g as p, a as m } from "../../chunks/getItemIcon.js";
+const l = o`.item-type-icon{@apply block h-4 pointer-events-none;margin-top:.15em!important;min-width:16px;fill:currentColor;transform:rotate(360deg)}.item-type-icon-margin{@apply m-inline-end-1.5;}`;
+class c extends r {
   constructor() {
-    super(...arguments), this.isPortal = !1, this.type = "", this.typeKeywords = [];
+    super(...arguments), this.isPortal = !1, this.type = "", this.typeKeywords = [], this.designType = "";
   }
   static {
-    this.properties = { isPortal: 5, type: 1, typeKeywords: 0 };
+    this.properties = { isPortal: 5, type: 1, typeKeywords: 0, designType: 1 };
   }
   static {
-    this.styles = n;
+    this.styles = l;
   }
   render() {
-    return o`<div title=${this.type ?? t}><img class="item-type-icon item-type-icon-margin" height=16 role=presentation src=${r(this.type, this.typeKeywords) ?? t} width=16></div>`;
+    const e = this.designType ? p(this.designType) : m(this.type, this.typeKeywords), i = this.designType || this.type;
+    return n`<div title=${i ?? t}><img class="item-type-icon item-type-icon-margin" height=16 role=presentation src=${e ?? t} width=16></div>`;
   }
 }
-e("solution-item-icon", m);
+s("solution-item-icon", c);
 export {
-  m as SolutionItemIcon
+  c as SolutionItemIcon
 };