@esri/hub-web-components 0.12.4 → 0.13.0

package/dist/components/arcgis-nav-card/customElement.js

@@ -1,50 +1,71 @@
-import { c } from "../../chunks/runtime.js";
+import { c as d } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
-import { LitElement as h, noShadowRoot as m } from "@arcgis/lumina";
-import { u as b } from "../../chunks/useT9n.js";
-import { getProp as n } from "@esri/hub-common";
-import { i as d } from "../../chunks/isNodeVisible.js";
+import { LitElement as c, noShadowRoot as h, nothing as g, safeClassMap as u, safeStyleMap as b } from "@arcgis/lumina";
+import { u as m } from "../../chunks/useT9n.js";
+import { getProp as r } from "@esri/hub-common";
+import { i as p } from "../../chunks/isNodeVisible.js";
+import { b as f } from "../../chunks/getResponsiveClasses.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-function u(i, s, t, e) {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.0 */
+function v(s, e, t, i) {
   {
-    let a = i;
-    const r = n(e, `${s}.${i}`);
-    if (r)
-      a = r;
+    let a = s;
+    const l = r(i, `${e}.${s}`);
+    if (l)
+      a = l;
     else {
-      const l = n(t, i);
-      l && (a = l);
+      const n = r(t, s);
+      n && (a = n);
     }
     return a;
   }
 }
-class g extends h {
+class $ extends c {
   constructor() {
-    super(...arguments), this._messages = b(), this.sections = [], this.translations = {}, this.isEditMode = !1;
+    super(...arguments), this._messages = m(), this.layoutNodeConfig = {
+      tag: "arcgis-nav-card",
+      name: "Nav Card",
+      canEdit: !0,
+      canMove: !0,
+      // valuesProp: "data",
+      defaults: {},
+      i18n: {
+        label: "Nav card",
+        description: "A card for navigation",
+        editLabel: "Edit nav card",
+        deleteLabel: "Delete nav card",
+        repositionUpLabel: "Move nav card up",
+        repositionDownLabel: "Move nav card down"
+      }
+      // editor: {}
+    }, this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1;
   }
   static {
-    this.properties = { sections: 0, translations: 0, isEditMode: 5 };
+    this.properties = { layoutNodeConfig: 32, node: 0, sections: 0, translations: 0, isEditMode: 5, highlightedNode: 0, utils: 0, debug: 5, highlightHandler: 0, unHighlightHandler: 0 };
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = h;
   }
   get _visibleSections() {
-    return this.sections.filter((s) => d(s));
+    return this.sections.filter((e) => p(e));
   }
   get _hasSections() {
     return this._visibleSections.length > 0;
   }
+  _getSectionClasses(e) {
+    const t = f(e);
+    return e.id === this.highlightedNode?.id && t.push("current-node"), t;
+  }
   renderTabs() {
-    let s;
-    return this._hasSections && (s = o`<calcite-tabs scale=l><calcite-tab-nav slot=title-group>${this._visibleSections.map((t, e) => o`<calcite-tab-title .selected=${e === 0} .tab=${t.label}>${u(t.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((t, e) => o`<calcite-tab .selected=${e === 0} .tab=${t.label}><arcgis-layout-section .isEditMode=${this.isEditMode} .node=${t}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), s;
+    let e;
+    return this._hasSections && (e = o`<calcite-tabs scale=l><calcite-tab-nav data-node-id=${this.node.id ?? g} @mouseenter=${this.highlightHandler} @mouseleave=${this.unHighlightHandler} slot=title-group>${this._visibleSections.map((t, i) => o`<calcite-tab-title .selected=${i === 0} .tab=${t.label}>${v(t.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((t, i) => o`<calcite-tab .selected=${i === 0} .tab=${t.label}><arcgis-layout-section class=${u(this._getSectionClasses(t).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${t} style=${b(t.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), e;
   }
   render() {
     return this.renderTabs();
   }
 }
-c("arcgis-nav-card", g);
+d("arcgis-nav-card", $);
 export {
-  g as ArcgisNavCard
+  $ as ArcgisNavCard
 };

package/dist/components/arcgis-text-card/customElement.js

@@ -1,14 +1,14 @@
-import { c as i } from "../../chunks/runtime.js";
-import { html as e } from "lit-html";
+import { c as e } from "../../chunks/runtime.js";
+import { html as i } from "lit-html";
 import { LitElement as s } from "@arcgis/lumina";
 import { css as o } from "@lit/reactive-element/css-tag.js";
 import { sanitizeHtml as r } from "@esri/hub-components";
 import { getProp as t } from "@esri/hub-common";
 import { u as a } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-const d = o`:host>div>h1:first-child,:host>div>h2:first-child,:host>div>h3:first-child,:host>div>h4:first-child,:host>div>h5:first-child,:host>div>h6:first-child,:host>div>p:first-child{margin-top:0}`;
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.0 */
+const n = o`:host>div>h1:first-child,:host>div>h2:first-child,:host>div>h3:first-child,:host>div>h4:first-child,:host>div>h5:first-child,:host>div>h6:first-child,:host>div>p:first-child{margin-top:0}`;
 class l extends s {
   constructor() {
     super(...arguments), this._messages = a(), this.html = "";
@@ -17,7 +17,7 @@ class l extends s {
     this.properties = { layoutNodeConfig: 32, html: 1 };
   }
   static {
-    this.styles = d;
+    this.styles = n;
   }
   get _content() {
     return r(this.html);
@@ -40,18 +40,34 @@ class l extends s {
         repositionUpLabel: t(this._messages, "layoutNodeConfig.up"),
         repositionDownLabel: t(this._messages, "layoutNodeConfig.down")
       },
-      valuesProp: "html",
       defaults: {},
       editor: {
-        tag: "hub-field-input-rich-text"
+        schema: {
+          type: "object",
+          properties: {
+            html: { type: "string" }
+          }
+        },
+        uiSchema: {
+          type: "Layout",
+          elements: [
+            {
+              type: "Control",
+              scope: "/properties/html",
+              options: {
+                control: "hub-field-input-rich-text"
+              }
+            }
+          ]
+        }
       }
     };
   }
   render() {
-    return e`<div .innerHTML=${this._content ?? ""}></div>`;
+    return i`<div .innerHTML=${this._content ?? ""}></div>`;
   }
 }
-i("arcgis-text-card", l);
+e("arcgis-text-card", l);
 export {
   l as ArcgisTextCard
 };

package/dist/components/layouts/components/layout-node/customElement.js

@@ -1,95 +1,98 @@
 import { html as i } from "lit-html";
-import { safeStyleMap as s, deferLoad as g } from "@arcgis/lumina";
-import { spread as $, spreadProps as o, spreadEvents as b } from "@open-wc/lit-helpers";
-import { getProp as m } from "@esri/hub-common";
-import { i as h } from "../../../../chunks/isNodeVisible.js";
+import { safeStyleMap as s, deferLoad as d } from "@arcgis/lumina";
+import { spread as $, spreadProps as g, spreadEvents as b } from "@open-wc/lit-helpers";
+import { getProp as y } from "@esri/hub-common";
+import { i as k } from "../../../../chunks/isNodeVisible.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-function T({ tagName: v, props: u, classes: l, styles: a, children: n, options: k }) {
-  const d = () => {
-  }, w = u.onKeyDown || d, f = u.onMouseLeave || d, M = u.onMouseEnter || d, y = m(u, "node.id"), c = {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.0 */
+function N({ tagName: w, props: u, classes: f, styles: a, children: o, options: n }) {
+  const m = n.onMouseLeave, h = n.onMouseEnter, l = y(u, "node.id"), c = {
     ...u,
-    tabIndex: k.isEditMode ? 0 : void 0
+    isEditMode: n.isEditMode,
+    tabIndex: n.isEditMode ? 0 : void 0
   }, t = {
-    class: l,
-    "data-node-id": y,
+    class: f,
+    "data-node-id": l,
     label: u.label
     // label must be an attribute
   }, r = {
-    keydown: w,
-    mouseleave: f,
-    mouseenter: M
+    // keydown: onKeyDownHandler,
+    mouseleave: m,
+    mouseenter: h,
+    focus: h
+    // blur: onUnHighlightHandler, we do not handle blur events because we need the element to remain "highlighted" so its add button can be focused
   };
-  h(m(u, "node")) || (a || (a = {}), a["anchor-name"] = `--overlay-anchor-${y}`);
+  (!k(y(u, "node")) || n.isEditMode) && (a || (a = {}), a["anchor-name"] = `--overlay-anchor-${l}`);
   let e;
-  switch (v) {
+  switch (w) {
     case "arcgis-layout-row":
-      e = i`<arcgis-layout-row style=${s(a)} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-layout-row>`;
+      e = i`<arcgis-layout-row style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-layout-row>`;
       break;
     case "calcite-button":
-      e = i`<calcite-button style=${s(a)} ${$(t)} ${o(c)} ${b(r)}>${n}</calcite-button>`;
+      e = i`<calcite-button style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-button>`;
       break;
     case "calcite-chip":
-      e = i`<calcite-chip .label=${u.label} style=${s(a)} ${$(t)} ${o(c)} ${b(r)}>${n}</calcite-chip>`;
+      e = i`<calcite-chip .label=${u.label} style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-chip>`;
       break;
     case "calcite-avatar":
-      e = i`<calcite-avatar style=${s(a)} ${$(t)} ${o(c)} ${b(r)}>${n}</calcite-avatar>`;
+      e = i`<calcite-avatar style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-avatar>`;
       break;
     case "arcgis-text-card":
-      e = i`<arcgis-text-card style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-text-card>`;
+      e = i`<arcgis-text-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-text-card>`;
       break;
     case "arcgis-hub-gallery-card":
-      e = i`<arcgis-hub-gallery-card style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-gallery-card>`;
+      e = i`<arcgis-hub-gallery-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-gallery-card>`;
       break;
     case "arcgis-hub-image":
-      e = i`<arcgis-hub-image style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-image>`;
+      e = i`<arcgis-hub-image style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-image>`;
       break;
     case "arcgis-hub-embed-card":
-      e = i`<arcgis-hub-embed-card style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-embed-card>`;
+      e = i`<arcgis-hub-embed-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-embed-card>`;
       break;
     case "arcgis-nav-card":
-      e = i`<arcgis-nav-card style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-nav-card>`;
+      e = i`<arcgis-nav-card .highlightHandler=${h} .unHighlightHandler=${m} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-nav-card>`;
       break;
     case "arcgis-hub-timeline":
-      e = i`<arcgis-hub-timeline style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-timeline>`;
+      e = i`<arcgis-hub-timeline style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-timeline>`;
       break;
     case "arcgis-hub-entity-metadata":
-      e = i`<arcgis-hub-entity-metadata style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-metadata>`;
+      e = i`<arcgis-hub-entity-metadata style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metadata>`;
       break;
     case "arcgis-hub-catalog":
-      e = i`<arcgis-hub-catalog .catalogs=${u.catalogs} style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-catalog>`;
+      e = i`<arcgis-hub-catalog .catalogs=${u.catalogs} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-catalog>`;
       break;
     case "arcgis-hub-map-view":
-      e = i`<arcgis-hub-map-view style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-map-view>`;
+      e = i`<arcgis-hub-map-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-map-view>`;
       break;
     case "arcgis-hub-entity-metrics-card":
-      e = i`<arcgis-hub-entity-metrics-card .entity=${u.entity} style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-metrics-card>`;
+      e = i`<arcgis-hub-entity-metrics-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metrics-card>`;
       break;
     case "arcgis-hub-entity-associations-card":
-      e = i`<arcgis-hub-entity-associations-card .entity=${u.entity} style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-associations-card>`;
+      e = i`<arcgis-hub-entity-associations-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-associations-card>`;
       break;
     case "arcgis-hub-entity-status-card":
-      e = i`<arcgis-hub-entity-status-card .entity=${u.entity} style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-status-card>`;
+      e = i`<arcgis-hub-entity-status-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-status-card>`;
       break;
     case "arcgis-hub-entity-metrics-view":
-      e = i`<arcgis-hub-entity-metrics-view style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-metrics-view>`;
+      e = i`<arcgis-hub-entity-metrics-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metrics-view>`;
       break;
     case "arcgis-hub-project-initiatives-view":
-      e = i`<arcgis-hub-project-initiatives-view style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-project-initiatives-view>`;
+      e = i`<arcgis-hub-project-initiatives-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-project-initiatives-view>`;
       break;
     case "arcgis-hub-entity-hero":
-      e = i`<arcgis-hub-entity-hero style=${s(a)} ${g} ${$(t)} ${o(c)} ${b(r)}>${n}</arcgis-hub-entity-hero>`;
+      e = i`<arcgis-hub-entity-hero style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-hero>`;
       break;
     case "div":
-      e = i`<div .innerHTML=${u.html ?? ""} style=${s(a)} ${$(t)} ${o(c)} ${b(r)}></div>`;
+      e = i`<div .innerHTML=${u.html ?? ""} style=${s(a)} ${$(t)} ${g(c)} ${b(r)}></div>`;
       break;
     // Add more cases as needed
     default:
-      e = i`<div style=${s(a)} ${$(t)} ${o(c)} ${b(r)}>${n}</div>`;
+      e = i`<div style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</div>`;
   }
-  return h(m(u, "node")) ? e : i`${e}<arcgis-layout-node-overlay .nodeId=${y} type=hidden ${g} ${$(t)}></arcgis-layout-node-overlay>`;
+  const v = k(y(u, "node")) ? e : i`${e}<arcgis-layout-node-overlay .nodeId=${l} type=hidden ${d} ${$(t)}></arcgis-layout-node-overlay>`;
+  return n.isEditMode ? i`${v}<arcgis-layout-node-highlight .highlightedNode=${u.highlightedNode} .node=${u.node}></arcgis-layout-node-highlight>` : v;
 }
 export {
-  T as ArcgisLayoutNode
+  N as ArcgisLayoutNode
 };

package/dist/components/layouts/components/layout-node/index.d.ts

@@ -18,4 +18,5 @@ import "../../../arcgis-layout-row/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-avatar";
+import "../../../arcgis-layout-node-highlight/index.js";
 export * from "./customElement.js";

package/dist/components/layouts/components/layout-node/index.js

@@ -3,6 +3,7 @@ import "../../../arcgis-layout-row/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-avatar";
+import "../../../arcgis-layout-node-highlight/index.js";
 export * from "./customElement.js";
 deferredLoaders.set("arcgis-text-card", () => import("../../../arcgis-text-card/index.js"))
 .set("arcgis-hub-gallery-card", () => import("@esri/hub-components/dist/components/arcgis-hub-gallery-card.js"))

package/dist/components/layouts/utils/findColumnAndNodeIndex.d.ts

@@ -0,0 +1,13 @@
+import { ILayout, IColumn, LayoutNode } from '@esri/hub-common';
+export interface ColumnNodeLocation {
+    column: IColumn;
+    index: number;
+}
+/**
+ * Recursively traverses the layout to find the IColumn containing the given LayoutNode,
+ * and returns the column and the index of the node within that column.
+ * @param targetNode The LayoutNode to find
+ * @param layout The ILayout to search
+ * @returns {ColumnNodeLocation | undefined} The column and index, or undefined if not found
+ */
+export declare function findColumnAndNodeIndex(targetNode: LayoutNode, layout: ILayout): ColumnNodeLocation | undefined;

package/dist/components/layouts/utils/getAddableLayoutNodes.d.ts

@@ -0,0 +1,11 @@
+import { IArcGISContext, LayoutNodeTag, Permission } from '@esri/hub-common';
+export interface IAddLayoutNodeConfiguration {
+    tag: LayoutNodeTag;
+    label: string;
+    icon: string;
+    disabled?: boolean;
+    defaults?: Record<string, unknown>;
+    permissions?: Permission[];
+}
+export declare const layoutNodeConfig: IAddLayoutNodeConfiguration[];
+export declare const getAddableLayoutNodes: (_layout: import('@esri/hub-common').ILayoutV2, options: Record<string, unknown>, context: IArcGISContext) => Promise<Promise<IAddLayoutNodeConfiguration[]>>;

package/dist/components/layouts/utils/memoizeAsync.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Simple memoization for async functions.
+ * @param fn The async function to memoize
+ * @returns A memoized version of the async function
+ */
+export declare function memoizeAsync<T extends (...args: any[]) => Promise<unknown>>(fn: T): (...args: Parameters<T>) => Promise<ReturnType<T>>;

package/dist/components/layouts/utils/messagesContext.d.ts

@@ -0,0 +1,117 @@
+export declare const layoutMessagesContext: {
+    __context__: {
+        addButtonLabel: string;
+        addElementPopoverLabel: string;
+        addElementPopoverHeading: string;
+        addElementListLabel: string;
+        editModeActivatedLiveRegion: string;
+        editModeDeactivatedLiveRegion: string;
+        close: string;
+        layoutNodeControls: {
+            a11yLabel: string;
+            configurableNodes: {
+                gallery: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                image: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                embed: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                timeline: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                text: {
+                    label: string;
+                };
+                default: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    up: string;
+                    down: string;
+                    show: string;
+                    hide: string;
+                };
+            };
+        };
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        addButtonLabel: string;
+        addElementPopoverLabel: string;
+        addElementPopoverHeading: string;
+        addElementListLabel: string;
+        editModeActivatedLiveRegion: string;
+        editModeDeactivatedLiveRegion: string;
+        close: string;
+        layoutNodeControls: {
+            a11yLabel: string;
+            configurableNodes: {
+                gallery: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                image: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                embed: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                timeline: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    description: string;
+                    up: string;
+                    down: string;
+                };
+                text: {
+                    label: string;
+                };
+                default: {
+                    label: string;
+                    edit: string;
+                    delete: string;
+                    up: string;
+                    down: string;
+                    show: string;
+                    hide: string;
+                };
+            };
+        };
+    }>;
+};