@esri/hub-web-components 0.2.2 → 0.4.0

package/dist/components/arcgis-hub-ai-assistant/customElement.js

@@ -1,51 +1,52 @@
-import { c as T } from "../../chunks/runtime.js";
+import { c as E } from "../../chunks/runtime.js";
 import { html as I } from "lit-html";
-import { LitElement as E, noShadowRoot as R } from "@arcgis/lumina";
-import { css as D } from "@lit/reactive-element/css-tag.js";
-import { getPortalSettings as z, getItem as C, getItemData as M } from "@esri/arcgis-rest-portal";
-import { createRef as P, ref as S } from "lit/directives/ref.js";
-import U from "@arcgis/core/layers/Layer.js";
-import x from "@arcgis/core/portal/PortalItem.js";
+import { LitElement as A, noShadowRoot as D } from "@arcgis/lumina";
+import { css as _ } from "@lit/reactive-element/css-tag.js";
+import { getPortalSettings as R, getItem as M, getItemData as U } from "@esri/arcgis-rest-portal";
+import { createRef as z, ref as S } from "lit/directives/ref.js";
+import C from "@arcgis/core/layers/Layer.js";
+import P from "@arcgis/core/portal/PortalItem.js";
+import { u as x } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.2 */
-async function _(e) {
+See https://js.arcgis.com/0.4/esri/copyright.txt for details.
+v0.4.0 */
+async function L(i) {
   const {
     skillId: t,
     message: s,
-    context: a,
+    context: e,
     token: o,
-    conversationId: i,
+    conversationId: a,
     apiUrl: r = "https://api.example.com",
     pauseMs: h = 1e3,
-    retries: u = 3
-  } = e, p = {
+    retries: p = 3
+  } = i, u = {
     Authorization: `Bearer ${o}`,
     Accept: "application/json",
     "Content-Type": "application/json"
-  }, g = `${r}/skills/${t}/chat`, f = { message: s, context: a };
-  i && (f.conversationId = i);
+  }, g = `${r}/skills/${t}/chat`, f = { message: s, context: e };
+  a && (f.conversationId = a);
   try {
     const l = await fetch(g, {
       method: "POST",
-      headers: p,
+      headers: u,
       body: JSON.stringify(f)
     });
     if (!l.ok)
       throw new Error(`HTTP error! status: ${l.status}`);
-    const n = await l.json(), k = i ?? n.conversationId, A = n.inquiryId;
+    const n = await l.json(), $ = a ?? n.conversationId, k = n.inquiryId;
     let b = n.hasMore || n.message == null, y = n.sequenceNumber;
     const d = [];
     n.message && d.push(n);
     let w = 0;
-    for (; b && w < u; ) {
+    for (; b && w < p; ) {
       await new Promise((v) => setTimeout(v, h));
       const m = await fetch(g, {
         method: "POST",
-        headers: p,
+        headers: u,
         body: JSON.stringify({
-          conversationId: k,
-          inquiryId: A,
+          conversationId: $,
+          inquiryId: k,
           ackSequenceNumber: y
         })
       });
@@ -59,37 +60,37 @@ async function _(e) {
     return console.error("Error during request:", l), [];
   }
 }
-async function L({
-  message: e,
+async function V({
+  message: i,
   context: t,
   token: s,
-  conversationId: a,
+  conversationId: e,
   apiUrl: o = "https://hub.arcgis.com/api/assistants/v1",
-  pauseMs: i = 1e3,
+  pauseMs: a = 1e3,
   retries: r = 50
 }) {
-  return await _({
+  return await L({
     skillId: "finder",
-    message: e,
+    message: i,
     context: t,
     token: s,
-    conversationId: a ?? void 0,
+    conversationId: e ?? void 0,
     apiUrl: o,
-    pauseMs: i,
+    pauseMs: a,
     retries: r
   });
 }
-const V = (e) => {
-  if (!e)
+const q = (i) => {
+  if (!i)
     return [0, 0];
-  const t = e[0][0], s = e[0][1], a = e[1][0], i = (e[1][1] + s) / 2;
-  return [(a + t) / 2, i];
-}, q = (e) => {
-  if (!e)
+  const t = i[0][0], s = i[0][1], e = i[1][0], a = (i[1][1] + s) / 2;
+  return [(e + t) / 2, a];
+}, B = (i) => {
+  if (!i)
     return 5;
-  const t = e[0][0], s = e[0][1], a = e[1][0], o = e[1][1], i = Math.abs(a - t), r = Math.abs(o - s), h = Math.log2(360 / i), u = Math.log2(180 / r);
-  return Math.floor(Math.min(h, u)) + 2;
-}, H = D`@layer{arcgis-hub-ai-assistant{arcgis-feature-table{height:200px}}}`, $ = {
+  const t = i[0][0], s = i[0][1], e = i[1][0], o = i[1][1], a = Math.abs(e - t), r = Math.abs(o - s), h = Math.log2(360 / a), p = Math.log2(180 / r);
+  return Math.floor(Math.min(h, p)) + 2;
+}, F = _`@layer{arcgis-hub-ai-assistant{arcgis-feature-table{height:200px}}}`, T = {
   language: "en",
   defaultSuggestions: ["What can I do with this assistant?"],
   personality: "You are writing for a government websites readable by 8th graders."
@@ -97,33 +98,33 @@ const V = (e) => {
   // allowChat: false,
   // showHeader: true,
 };
-async function F({
-  portal: e,
+async function O({
+  portal: i,
   authentication: t
 }) {
   try {
-    const a = await z(void 0, {
-      portal: e,
+    const e = await R(void 0, {
+      portal: i,
       authentication: t
     });
-    return a.aiAssistantsEnabled === void 0 || a.aiAssistantsEnabled && !a.blockBetaApps ? !0 : (console.warn("AI Assistants are not enabled for this organization."), !1);
+    return e.aiAssistantsEnabled === void 0 || e.aiAssistantsEnabled && !e.blockBetaApps ? !0 : (console.warn("AI Assistants are not enabled for this organization."), !1);
   } catch (s) {
     return console.error("Error fetching organization assistant settings:", s), !1;
   }
 }
-async function O(e, t, s) {
+async function j(i, t, s) {
   try {
-    const [a, o] = await Promise.all([
-      C(e, { authentication: t, portal: s }),
+    const [e, o] = await Promise.all([
+      M(i, { authentication: t, portal: s }),
       // , { authentication: state.context.hubRequestOptions.authentication }
-      M(e, { authentication: t, portal: s })
+      U(i, { authentication: t, portal: s })
       // , { authentication: state.context.hubRequestOptions.authentication }
     ]);
     return {
-      ...$,
-      title: a.title,
+      ...T,
+      title: e.title,
       description: o.assistant?.description,
-      extent: a.extent,
+      extent: e.extent,
       // context: item.accessInformation as string,
       // placeholder: itemData.placeholder,
       // theme: itemData.theme,
@@ -138,7 +139,7 @@ async function O(e, t, s) {
       // entityId: itemData.entityId,
       location: o.assistant?.location ?? "",
       // tools: itemData.tools,
-      defaultSuggestions: o.assistant?.examplePrompts ?? $.defaultSuggestions,
+      defaultSuggestions: o.assistant?.examplePrompts ?? T.defaultSuggestions,
       context: "",
       hub: "",
       allowChat: !1,
@@ -146,23 +147,23 @@ async function O(e, t, s) {
       entityId: "",
       tools: []
     };
-  } catch (a) {
-    throw console.error("Error fetching configuration:", a), a;
+  } catch (e) {
+    throw console.error("Error fetching configuration:", e), e;
   }
 }
-class j extends E {
+class G extends A {
   constructor() {
-    super(...arguments), this._featureTable = P(), this.handleArcGISDataClick = (t) => {
-      const a = t.detail.data.id, o = new x({
-        id: a,
+    super(...arguments), this._messages = x({ blocking: !0 }), this._featureTable = z(), this.handleArcGISDataClick = (t) => {
+      const e = t.detail.data.id, o = new P({
+        id: e,
         portal: { url: this.portalUrl }
       });
-      U.fromPortalItem({
+      C.fromPortalItem({
         portalItem: o
-      }).then((i) => {
-        this._mapRef?.map?.add(i), this._featureTable.value && (this._featureTable.value.layer = i), this.mapLayers.push(a), this.mapVisible = !0;
-      }).catch((i) => {
-        console.log("could not add layer:", i);
+      }).then((a) => {
+        this._mapRef?.map?.add(a), this._featureTable.value && (this._featureTable.value.layer = a), this.mapLayers.push(e), this.mapVisible = !0;
+      }).catch((a) => {
+        console.log("could not add layer:", a);
       });
     }, this.handleArcGISLocationClick = (t) => {
       const s = t.detail;
@@ -170,54 +171,59 @@ class j extends E {
         center: [s.longitude, s.latitude],
         zoom: s.zoom
       }));
-    }, this.assistantsEnabled = !1, this.mapEnabled = !1, this.mapVisible = !1, this.itemId = null, this.portalUrl = "https://www.arcgis.com", this.apiUrl = "/api/assistants/v1", this.botTitle = "Hub AI Assistant", this.extent = [
+    }, this.handleFinderResponse = async (t, s) => {
+      const e = await V({
+        message: t,
+        conversationId: s,
+        context: {
+          kind: "FinderRequest",
+          item: this.itemId ?? void 0
+        },
+        token: this.authentication?.token ?? "",
+        apiUrl: this.apiUrl
+      });
+      if (e.length === 0)
+        throw new Error("Finder response is empty or invalid");
+      return e;
+    }, this.handleUpdateMapVisibility = (t) => {
+      this.mapVisible = t.detail;
+    }, this.assistantsEnabled = !1, this.mapEnabled = !1, this.mapVisible = !1, this.itemId = null, this.portalUrl = "https://www.arcgis.com", this.apiUrl = "/api/assistants/v1", this.botTitle = void 0, this.extent = [
       [-77.119, 38.791],
       [-76.909, 38.995]
-    ], this.mapLayers = [], this.mapShowTable = !1, this.mapBasemap = "gray-vector", this.location = "Washington, DC", this.hub = "opendata.dc.gov", this.entityId = null, this.context = null, this.language = void 0, this.botDescription = "Hub AI Assistant helps you find and use open data in your community.", this.defaultSuggestions = [], this.authentication = void 0;
+    ], this.mapLayers = [], this.mapShowTable = !1, this.mapBasemap = "gray-vector", this.location = "Washington, DC", this.hub = "opendata.dc.gov", this.entityId = null, this.context = null, this.language = void 0, this.botDescription = void 0, this.defaultSuggestions = [], this.authentication = void 0;
   }
   static {
     this.properties = { assistantsEnabled: 16, _mapRef: 16, mapEnabled: 5, mapVisible: 5, itemId: 1, portalUrl: 1, apiUrl: 1, botTitle: 1, extent: 0, mapLayers: 0, mapShowTable: 5, mapBasemap: 1, location: 1, hub: 1, entityId: 1, context: 1, language: 1, botDescription: 1, defaultSuggestions: 0, authentication: 0 };
   }
   static {
-    this.shadowRootOptions = R;
+    this.shadowRootOptions = D;
   }
   static {
-    this.styles = H;
+    this.styles = F;
+  }
+  get _botTitle() {
+    return this.botTitle || this._messages.defaultBotTitle;
+  }
+  get _botDescription() {
+    return this.botDescription || this._messages.defaultBotDescription;
   }
   async load() {
-    if (this.assistantsEnabled = await F({
+    if (this.assistantsEnabled = await O({
       portal: `${this.portalUrl}/sharing/rest`,
       authentication: this.authentication
     }), this.itemId) {
-      const t = await O(this.itemId, this.authentication, `${this.portalUrl}/sharing/rest`);
+      const t = await j(this.itemId, this.authentication, `${this.portalUrl}/sharing/rest`);
       this.botTitle = t.title, this.botDescription = t.description ? t.description : "", this.hub = t.hub, this.location = t.location, this.extent = t.extent, this.defaultSuggestions = t.defaultSuggestions;
     }
   }
-  async handleFinderResponse(t, s) {
-    const a = await L({
-      message: t,
-      conversationId: s,
-      context: {
-        kind: "FinderRequest",
-        item: this.itemId ?? void 0
-      },
-      token: this.authentication?.token ?? "",
-      apiUrl: this.apiUrl
-    });
-    if (a.length === 0)
-      throw new Error("Finder response is empty or invalid");
-    return a;
-  }
   _setMapRef(t) {
     this._mapRef = t;
   }
   render() {
-    return I`<link rel=stylesheet href=https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css><arcgis-chat-shell .aboutContent=${this.botDescription} .mapEnabled=${this.mapEnabled} .mapVisible=${this.mapEnabled && this.mapVisible} @arcgisUpdateMapVisibility=${(t) => {
-      this.mapVisible = t.detail;
-    }}><arcgis-chat-ui .botDescription=${this.botDescription} .botTitle=${this.botTitle} .defaultSuggestions=${this.defaultSuggestions} slot=leftPanel .getFinderResponse=${this.handleFinderResponse.bind(this)} @arcgisAddDataClick=${this.handleArcGISDataClick} @arcgisLocationClick=${this.handleArcGISLocationClick} .authentication=${this.authentication} .portalUrl=${this.portalUrl}></arcgis-chat-ui><arcgis-map slot=map .center=${V(this.extent)} .zoom=${q(this.extent)} .basemap=${this.mapBasemap} ${S(this._setMapRef)}><arcgis-zoom position=top-left></arcgis-zoom><arcgis-expand position=top-right><arcgis-layer-list></arcgis-layer-list></arcgis-expand><arcgis-search position=bottom-trailing></arcgis-search></arcgis-map>${this.mapShowTable && I`<arcgis-feature-table .referenceElement=${this._mapRef} slot=featureTable ${S(this._featureTable)}></arcgis-feature-table>` || ""}</arcgis-chat-shell>`;
+    return I`<link rel=stylesheet href=https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css><arcgis-chat-shell .aboutContent=${this._botDescription} .mapEnabled=${this.mapEnabled} .mapVisible=${this.mapEnabled && this.mapVisible} @arcgisUpdateMapVisibility=${this.handleUpdateMapVisibility}><arcgis-chat-ui .botDescription=${this._botDescription} .botTitle=${this._botTitle} .defaultSuggestions=${this.defaultSuggestions} slot=leftPanel .getFinderResponse=${this.handleFinderResponse} @arcgisAddDataClick=${this.handleArcGISDataClick} @arcgisLocationClick=${this.handleArcGISLocationClick} .authentication=${this.authentication} .portalUrl=${this.portalUrl}></arcgis-chat-ui><arcgis-map slot=map .center=${q(this.extent)} .zoom=${B(this.extent)} .basemap=${this.mapBasemap} ${S(this._setMapRef)}><arcgis-zoom position=top-left></arcgis-zoom><arcgis-expand position=top-right><arcgis-layer-list></arcgis-layer-list></arcgis-expand><arcgis-search position=bottom-trailing></arcgis-search></arcgis-map>${this.mapShowTable && I`<arcgis-feature-table .referenceElement=${this._mapRef} slot=featureTable ${S(this._featureTable)}></arcgis-feature-table>` || ""}</arcgis-chat-shell>`;
   }
 }
-T("arcgis-hub-ai-assistant", j);
+E("arcgis-hub-ai-assistant", G);
 export {
-  j as ArcGISHubAIAssistant
+  G as ArcGISHubAIAssistant
 };

package/dist/components/arcgis-layout/customElement.js

@@ -1,17 +1,17 @@
 import { c as e } from "../../chunks/runtime.js";
 import { html as a } from "lit-html";
-import { keyed as t } from "lit-html/directives/keyed.js";
-import { LitElement as c, safeClassMap as r, safeStyleMap as s } from "@arcgis/lumina";
-import { css as n } from "@lit/reactive-element/css-tag.js";
-import { g as u, p as g } from "../../chunks/processLayout.js";
+import { keyed as o } from "lit-html/directives/keyed.js";
+import { LitElement as s, safeClassMap as i, safeStyleMap as c } from "@arcgis/lumina";
+import { css as u } from "@lit/reactive-element/css-tag.js";
+import { g as r, p as g } from "../../chunks/processLayout.js";
 import { b as m } from "../../chunks/getResponsiveClasses.js";
 import { c as f } from "../../chunks/typeGuards.js";
-import { Logger as d } from "@esri/hub-common";
+import { Logger as y } from "@esri/hub-common";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.2 */
-const y = n`:host{font-family:inherit;display:block;box-sizing:border-box;container-type:inline-size;--hub-layout-spacing-x: 1.5rem;--hub-layout-spacing-y: 1rem}#layout-container{contain:layout;padding:0;margin:0;box-sizing:border-box}arcgis-layout-section{box-sizing:border-box;display:flex;flex-direction:column;padding-inline:calc(var(--hub-layout-spacing-x) * .5);padding-block:var(--hub-layout-spacing-y);gap:var(--hub-layout-spacing-y);justify-content:space-between;margin:0 auto;width:100%}@container (min-width: 576px){arcgis-layout-section:not(.fluid),arcgis-layout-section.section-sm{max-width:540px}}@container (min-width: 768px){arcgis-layout-section:not(.fluid),arcgis-layout-section.section-sm,arcgis-layout-section.section-md{max-width:720px}}@container (min-width: 992px){arcgis-layout-section:not(.fluid),arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg{max-width:960px}}@container (min-width: 1200px){arcgis-layout-section:not(.fluid),arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg,arcgis-layout-section.section-xl{max-width:1140px}}@container (min-width: 1440px){arcgis-layout-section:not(.fluid),arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg,arcgis-layout-section.section-xl,arcgis-layout-section.section-xxl{max-width:1320px}}:host(.no-gutters){padding-right:0!important;padding-left:0!important}arcgis-layout-row{display:flex;flex-wrap:wrap;box-sizing:border-box;margin-right:calc(var(--hub-layout-spacing-x) * -.5);margin-left:calc(var(--hub-layout-spacing-x) * -.5);row-gap:var(--hub-layout-spacing-y)}arcgis-layout-row.no-gutters{margin-right:0;margin-left:0}arcgis-layout-row.align-items-start{align-items:flex-start}arcgis-layout-row.align-items-end{align-items:flex-end}arcgis-layout-row.align-items-center{align-items:center}arcgis-layout-row.align-items-baseline{align-items:baseline}arcgis-layout-row.align-items-stretch{align-items:stretch}arcgis-layout-column{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;flex:0 0;max-width:100%;padding-right:12px;padding-left:12px}arcgis-hub-layout-row.no-gutters arcgis-layout-column{padding-right:0;padding-left:0}arcgis-hub-layout-row.align-items-stretch>arcgis-layout-column>*,arcgis-hub-layout-row.align-self-stretch>arcgis-layout-column>*{height:100%}arcgis-layout-column.col,arcgis-layout-column:not([class*=col-]){flex:1 1 0%;max-width:100%}arcgis-layout-column[class^=col-md-],arcgis-layout-column[class^=col-lg-],arcgis-layout-column[class^=col-xl-]{flex:1 1 100%;max-width:100%}arcgis-layout-column.col-1{flex:1 1 100%;max-width:8.333333%}arcgis-layout-column.col-2{flex:1 1 100%;max-width:16.666667%}arcgis-layout-column.col-3{flex:1 1 100%;max-width:25%}arcgis-layout-column.col-4{flex:1 1 100%;max-width:33.333333%}arcgis-layout-column.col-5{flex:1 1 100%;max-width:41.666667%}arcgis-layout-column.col-6{flex:1 1 100%;max-width:50%}arcgis-layout-column.col-7{flex:1 1 100%;max-width:58.333333%}arcgis-layout-column.col-8{flex:1 1 100%;max-width:66.666667%}arcgis-layout-column.col-9{flex:1 1 100%;max-width:75%}arcgis-layout-column.col-10{flex:1 1 100%;max-width:83.333333%}arcgis-layout-column.col-11{flex:1 1 100%;max-width:91.666667%}arcgis-layout-column.col-12{flex:1 1 100%;max-width:100%}@container (min-width: 576px){arcgis-layout-column.col-sm-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-sm-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-sm-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-sm-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-sm-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-sm-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-sm-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-sm-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-sm-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-sm-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-sm-12{flex:0 0 100%;max-width:100%}}@container (min-width: 768px){arcgis-layout-column.col-md-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-md-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-md-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-md-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-md-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-md-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-md-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-md-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-md-12{flex:0 0 100%;max-width:100%}}@container (min-width: 992px){arcgis-layout-column.col-lg-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-lg-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-lg-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-lg-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-lg-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-lg-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-lg-12{flex:0 0 100%;max-width:100%}}@container (min-width: 1440px){arcgis-layout-column.col-xxl-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-xxl-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-xxl-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-xxl-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-xxl-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-xxl-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-xxl-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-xxl-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-xxl-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-xxl-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-xxl-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-xxl-12{flex:0 0 100%;max-width:100%}}arcgis-layout-column.offset-1{margin-left:8.333333%}arcgis-layout-column.offset-2{margin-left:16.666667%}arcgis-layout-column.offset-3{margin-left:25%}arcgis-layout-column.offset-4{margin-left:33.333333%}arcgis-layout-column.offset-5{margin-left:41.666667%}arcgis-layout-column.offset-6{margin-left:50%}arcgis-layout-column.offset-7{margin-left:58.333333%}arcgis-layout-column.offset-8{margin-left:66.666667%}arcgis-layout-column.offset-9{margin-left:75%}arcgis-layout-column.offset-10{margin-left:83.333333%}arcgis-layout-column.offset-11{margin-left:91.666667%}arcgis-layout-column.offset-12{margin-left:100%}@container (min-width: 576px){arcgis-layout-column.offset-sm-1{margin-left:8.333333%}arcgis-layout-column.offset-sm-2{margin-left:16.666667%}arcgis-layout-column.offset-sm-3{margin-left:25%}arcgis-layout-column.offset-sm-4{margin-left:33.333333%}arcgis-layout-column.offset-sm-5{margin-left:41.666667%}arcgis-layout-column.offset-sm-6{margin-left:50%}arcgis-layout-column.offset-sm-7{margin-left:58.333333%}arcgis-layout-column.offset-sm-8{margin-left:66.666667%}arcgis-layout-column.offset-sm-9{margin-left:75%}arcgis-layout-column.offset-sm-10{margin-left:83.333333%}arcgis-layout-column.offset-sm-11{margin-left:91.666667%}arcgis-layout-column.offset-sm-12{margin-left:100%}}@container (min-width: 768px){arcgis-layout-column.offset-md-1{margin-left:8.333333%}arcgis-layout-column.offset-md-2{margin-left:16.666667%}arcgis-layout-column.offset-md-3{margin-left:25%}arcgis-layout-column.offset-md-4{margin-left:33.333333%}arcgis-layout-column.offset-md-5{margin-left:41.666667%}arcgis-layout-column.offset-md-6{margin-left:50%}arcgis-layout-column.offset-md-7{margin-left:58.333333%}arcgis-layout-column.offset-md-8{margin-left:66.666667%}arcgis-layout-column.offset-md-9{margin-left:75%}arcgis-layout-column.offset-md-10{margin-left:83.333333%}arcgis-layout-column.offset-md-11{margin-left:91.666667%}arcgis-layout-column.offset-md-12{margin-left:100%}}@container (min-width: 992px){arcgis-layout-column.offset-lg-1{margin-left:8.333333%}arcgis-layout-column.offset-lg-2{margin-left:16.666667%}arcgis-layout-column.offset-lg-3{margin-left:25%}arcgis-layout-column.offset-lg-4{margin-left:33.333333%}arcgis-layout-column.offset-lg-5{margin-left:41.666667%}arcgis-layout-column.offset-lg-6{margin-left:50%}arcgis-layout-column.offset-lg-7{margin-left:58.333333%}arcgis-layout-column.offset-lg-8{margin-left:66.666667%}arcgis-layout-column.offset-lg-9{margin-left:75%}arcgis-layout-column.offset-lg-10{margin-left:83.333333%}arcgis-layout-column.offset-lg-11{margin-left:91.666667%}arcgis-layout-column.offset-lg-12{margin-left:100%}}@container (min-width: 1200px){arcgis-layout-column.offset-xl-1{margin-left:8.333333%}arcgis-layout-column.offset-xl-2{margin-left:16.666667%}arcgis-layout-column.offset-xl-3{margin-left:25%}arcgis-layout-column.offset-xl-4{margin-left:33.333333%}arcgis-layout-column.offset-xl-5{margin-left:41.666667%}arcgis-layout-column.offset-xl-6{margin-left:50%}arcgis-layout-column.offset-xl-7{margin-left:58.333333%}arcgis-layout-column.offset-xl-8{margin-left:66.666667%}arcgis-layout-column.offset-xl-9{margin-left:75%}arcgis-layout-column.offset-xl-10{margin-left:83.333333%}arcgis-layout-column.offset-xl-11{margin-left:91.666667%}arcgis-layout-column.offset-xl-12{margin-left:100%}}@container (min-width: 1440px){arcgis-layout-column.offset-xxl-1{margin-left:8.333333%}arcgis-layout-column.offset-xxl-2{margin-left:16.666667%}arcgis-layout-column.offset-xxl-3{margin-left:25%}arcgis-layout-column.offset-xxl-4{margin-left:33.333333%}arcgis-layout-column.offset-xxl-5{margin-left:41.666667%}arcgis-layout-column.offset-xxl-6{margin-left:50%}arcgis-layout-column.offset-xxl-7{margin-left:58.333333%}arcgis-layout-column.offset-xxl-8{margin-left:66.666667%}arcgis-layout-column.offset-xxl-9{margin-left:75%}arcgis-layout-column.offset-xxl-10{margin-left:83.333333%}arcgis-layout-column.offset-xxl-11{margin-left:91.666667%}arcgis-layout-column.offset-xxl-12{margin-left:100%}}arcgis-layout-column.order-0{order:0}arcgis-layout-column.order-1{order:1}arcgis-layout-column.order-2{order:2}arcgis-layout-column.order-3{order:3}arcgis-layout-column.order-4{order:4}arcgis-layout-column.order-5{order:5}arcgis-layout-column.order-6{order:6}arcgis-layout-column.order-7{order:7}arcgis-layout-column.order-8{order:8}arcgis-layout-column.order-9{order:9}arcgis-layout-column.order-10{order:10}@container (min-width: 576px){arcgis-layout-column.order-sm-0{order:0}arcgis-layout-column.order-sm-1{order:1}arcgis-layout-column.order-sm-2{order:2}arcgis-layout-column.order-sm-3{order:3}arcgis-layout-column.order-sm-4{order:4}arcgis-layout-column.order-sm-5{order:5}arcgis-layout-column.order-sm-6{order:6}arcgis-layout-column.order-sm-7{order:7}arcgis-layout-column.order-sm-8{order:8}arcgis-layout-column.order-sm-9{order:9}arcgis-layout-column.order-sm-10{order:10}}@container (min-width: 768px){arcgis-layout-column.order-md-0{order:0}arcgis-layout-column.order-md-1{order:1}arcgis-layout-column.order-md-2{order:2}arcgis-layout-column.order-md-3{order:3}arcgis-layout-column.order-md-4{order:4}arcgis-layout-column.order-md-5{order:5}arcgis-layout-column.order-md-6{order:6}arcgis-layout-column.order-md-7{order:7}arcgis-layout-column.order-md-8{order:8}arcgis-layout-column.order-md-9{order:9}arcgis-layout-column.order-md-10{order:10}}@container (min-width: 992px){arcgis-layout-column.order-lg-0{order:0}arcgis-layout-column.order-lg-1{order:1}arcgis-layout-column.order-lg-2{order:2}arcgis-layout-column.order-lg-3{order:3}arcgis-layout-column.order-lg-4{order:4}arcgis-layout-column.order-lg-5{order:5}arcgis-layout-column.order-lg-6{order:6}arcgis-layout-column.order-lg-7{order:7}arcgis-layout-column.order-lg-8{order:8}arcgis-layout-column.order-lg-9{order:9}arcgis-layout-column.order-lg-10{order:10}}@container (min-width: 1200px){arcgis-layout-column.order-xl-0{order:0}arcgis-layout-column.order-xl-1{order:1}arcgis-layout-column.order-xl-2{order:2}arcgis-layout-column.order-xl-3{order:3}arcgis-layout-column.order-xl-4{order:4}arcgis-layout-column.order-xl-5{order:5}arcgis-layout-column.order-xl-6{order:6}arcgis-layout-column.order-xl-7{order:7}arcgis-layout-column.order-xl-8{order:8}arcgis-layout-column.order-xl-9{order:9}arcgis-layout-column.order-xl-10{order:10}}@container (min-width: 1440px){arcgis-layout-column.order-xxl-0{order:0}arcgis-layout-column.order-xxl-1{order:1}arcgis-layout-column.order-xxl-2{order:2}arcgis-layout-column.order-xxl-3{order:3}arcgis-layout-column.order-xxl-4{order:4}arcgis-layout-column.order-xxl-5{order:5}arcgis-layout-column.order-xxl-6{order:6}arcgis-layout-column.order-xxl-7{order:7}arcgis-layout-column.order-xxl-8{order:8}arcgis-layout-column.order-xxl-9{order:9}arcgis-layout-column.order-xxl-10{order:10}}arcgis-layout-column.align-self-auto{align-self:auto}arcgis-layout-column.align-self-baseline{align-self:baseline}arcgis-layout-column.align-self-start{align-self:flex-start}arcgis-layout-column.align-self-center{align-self:center}arcgis-layout-column.align-self-end{align-self:flex-end}arcgis-layout-column.align-self-stretch{align-self:stretch}@container (min-width: 576px){arcgis-layout-column.align-self-sm-auto{align-self:auto}arcgis-layout-column.align-self-sm-baseline{align-self:baseline}arcgis-layout-column.align-self-sm-start{align-self:flex-start}arcgis-layout-column.align-self-sm-center{align-self:center}arcgis-layout-column.align-self-sm-end{align-self:flex-end}arcgis-layout-column.align-self-sm-stretch{align-self:stretch}}@container (min-width: 768px){arcgis-layout-column.align-self-md-auto{align-self:auto}arcgis-layout-column.align-self-md-baseline{align-self:baseline}arcgis-layout-column.align-self-md-start{align-self:flex-start}arcgis-layout-column.align-self-md-center{align-self:center}arcgis-layout-column.align-self-md-end{align-self:flex-end}arcgis-layout-column.align-self-md-stretch{align-self:stretch}}@container (min-width: 992px){arcgis-layout-column.align-self-lg-auto{align-self:auto}arcgis-layout-column.align-self-lg-baseline{align-self:baseline}arcgis-layout-column.align-self-lg-start{align-self:flex-start}arcgis-layout-column.align-self-lg-center{align-self:center}arcgis-layout-column.align-self-lg-end{align-self:flex-end}arcgis-layout-column.align-self-lg-stretch{align-self:stretch}}@container (min-width: 1200px){arcgis-layout-column.align-self-xl-auto{align-self:auto}arcgis-layout-column.align-self-xl-baseline{align-self:baseline}arcgis-layout-column.align-self-xl-start{align-self:flex-start}arcgis-layout-column.align-self-xl-center{align-self:center}arcgis-layout-column.align-self-xl-end{align-self:flex-end}arcgis-layout-column.align-self-xl-stretch{align-self:stretch}}@container (min-width: 1440px){arcgis-layout-column.align-self-xxl-auto{align-self:auto}arcgis-layout-column.align-self-xxl-baseline{align-self:baseline}arcgis-layout-column.align-self-xxl-start{align-self:flex-start}arcgis-layout-column.align-self-xxl-center{align-self:center}arcgis-layout-column.align-self-xxl-end{align-self:flex-end}arcgis-layout-column.align-self-xxl-stretch{align-self:stretch}}:host([debug]){#layout-container{background-color:pink}@container (min-width: 576px){#layout-container{background-color:orange}}@container (min-width: 768px){#layout-container{background-color:#fafad2}}@container (min-width: 992px){#layout-container{background-color:#90ee90}}@container (min-width: 1200px){#layout-container{background-color:#add8e6}}@container (min-width: 1440px){#layout-container{background-color:violet}}}:host([debug]) arcgis-layout-section{outline:2px solid blue;outline-offset:6px}:host([debug]) arcgis-layout-section.layout-error{outline:4px solid fuchsia;outline-offset:4px;height:50px}:host([debug]) arcgis-layout-section.layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative;top:-12px}:host([debug]) arcgis-layout-row{outline:2px solid red;outline-offset:3px}:host([debug]) arcgis-layout-row.layout-error{outline:4px solid fuchsia;outline-offset:2px;height:50px}:host([debug]) arcgis-layout-row.layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative;top:8px}:host([debug]) arcgis-layout-column{outline:2px solid green}:host([debug]) arcgis-layout-column.layout-error{outline:4px solid fuchsia;outline-offset:-5px;align-self:stretch}:host([debug]) arcgis-layout-column[debug].layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative}:host([debug]) arcgis-layout-column[debug]>.layout-error{outline:4px solid fuchsia;outline-offset:-2px;align-self:stretch;height:40px}:host([debug]) arcgis-layout-column[debug]>.layout-error:after{content:"!";color:#f0f;font-size:1.5rem;font-weight:700;position:relative;top:8px;left:5px}:host([is-edit-mode]) arcgis-layout-column>:not(arcgis-layout-row):hover,.current-node{outline:3px solid var(--calcite-ui-brand);outline-offset:2px}`;
-class x extends c {
+See https://js.arcgis.com/0.4/esri/copyright.txt for details.
+v0.4.0 */
+const x = u`:host{font-family:inherit;display:block;box-sizing:border-box;container-type:inline-size;--hub-layout-spacing-x: 1.5rem;--hub-layout-spacing-y: 1rem}#layout-container{contain:layout;padding:0;margin:0;box-sizing:border-box}arcgis-layout-section{box-sizing:border-box;display:flex;flex-direction:column;padding-block:var(--hub-layout-spacing-y);gap:var(--hub-layout-spacing-y);justify-content:space-between;margin:0 auto}arcgis-layout-section.section,arcgis-layout-section.section-fluid,arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg,arcgis-layout-section.section-xl,arcgis-layout-section.section-xxl{width:100%;padding-inline:calc(var(--hub-layout-spacing-x) * .5)}@container (min-width: 576px){arcgis-layout-section.section,arcgis-layout-section.section-sm{max-width:540px}}@container (min-width: 768px){arcgis-layout-section.section,arcgis-layout-section.section-sm,arcgis-layout-section.section-md{max-width:720px}}@container (min-width: 992px){arcgis-layout-section.section,arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg{max-width:960px}}@container (min-width: 1200px){arcgis-layout-section.section,arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg,arcgis-layout-section.section-xl{max-width:1140px}}@container (min-width: 1440px){arcgis-layout-section.section,arcgis-layout-section.section-sm,arcgis-layout-section.section-md,arcgis-layout-section.section-lg,arcgis-layout-section.section-xl,arcgis-layout-section.section-xxl{max-width:1320px}}arcgis-layout-row{display:flex;flex-wrap:wrap;box-sizing:border-box;margin-inline:calc(var(--hub-layout-spacing-x) * -.5);row-gap:var(--hub-layout-spacing-y)}arcgis-layout-row.align-items-start{align-items:flex-start}arcgis-layout-row.align-items-end{align-items:flex-end}arcgis-layout-row.align-items-center{align-items:center}arcgis-layout-row.align-items-baseline{align-items:baseline}arcgis-layout-row.align-items-stretch{align-items:stretch}arcgis-layout-column{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;flex:0 0;max-width:100%;padding-inline:calc(var(--hub-layout-spacing-x) * .5)}arcgis-layout-section.no-gutters{padding-inline:0}arcgis-hub-layout-row.align-items-stretch>arcgis-layout-column>*,arcgis-hub-layout-row.align-self-stretch>arcgis-layout-column>*{height:100%}arcgis-layout-column.col,arcgis-layout-column:not([class*=col-]){flex:1 1 0%;max-width:100%}arcgis-layout-column[class^=col-md-],arcgis-layout-column[class^=col-lg-],arcgis-layout-column[class^=col-xl-]{flex:1 1 100%;max-width:100%}arcgis-layout-column.col-1{flex:1 1 100%;max-width:8.333333%}arcgis-layout-column.col-2{flex:1 1 100%;max-width:16.666667%}arcgis-layout-column.col-3{flex:1 1 100%;max-width:25%}arcgis-layout-column.col-4{flex:1 1 100%;max-width:33.333333%}arcgis-layout-column.col-5{flex:1 1 100%;max-width:41.666667%}arcgis-layout-column.col-6{flex:1 1 100%;max-width:50%}arcgis-layout-column.col-7{flex:1 1 100%;max-width:58.333333%}arcgis-layout-column.col-8{flex:1 1 100%;max-width:66.666667%}arcgis-layout-column.col-9{flex:1 1 100%;max-width:75%}arcgis-layout-column.col-10{flex:1 1 100%;max-width:83.333333%}arcgis-layout-column.col-11{flex:1 1 100%;max-width:91.666667%}arcgis-layout-column.col-12{flex:1 1 100%;max-width:100%}@container (min-width: 576px){arcgis-layout-column.col-sm-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-sm-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-sm-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-sm-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-sm-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-sm-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-sm-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-sm-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-sm-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-sm-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-sm-12{flex:0 0 100%;max-width:100%}}@container (min-width: 768px){arcgis-layout-column.col-md-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-md-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-md-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-md-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-md-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-md-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-md-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-md-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-md-12{flex:0 0 100%;max-width:100%}}@container (min-width: 992px){arcgis-layout-column.col-lg-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-lg-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-lg-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-lg-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-lg-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-lg-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-lg-12{flex:0 0 100%;max-width:100%}}@container (min-width: 1440px){arcgis-layout-column.col-xxl-1{flex:0 0 8.333333%;max-width:8.333333%}arcgis-layout-column.col-xxl-2{flex:0 0 16.666667%;max-width:16.666667%}arcgis-layout-column.col-xxl-3{flex:0 0 25%;max-width:25%}arcgis-layout-column.col-xxl-4{flex:0 0 33.333333%;max-width:33.333333%}arcgis-layout-column.col-xxl-5{flex:0 0 41.666667%;max-width:41.666667%}arcgis-layout-column.col-xxl-6{flex:0 0 50%;max-width:50%}arcgis-layout-column.col-xxl-7{flex:0 0 58.333333%;max-width:58.333333%}arcgis-layout-column.col-xxl-8{flex:0 0 66.666667%;max-width:66.666667%}arcgis-layout-column.col-xxl-9{flex:0 0 75%;max-width:75%}arcgis-layout-column.col-xxl-10{flex:0 0 83.333333%;max-width:83.333333%}arcgis-layout-column.col-xxl-11{flex:0 0 91.666667%;max-width:91.666667%}arcgis-layout-column.col-xxl-12{flex:0 0 100%;max-width:100%}}arcgis-layout-column.offset-1{margin-left:8.333333%}arcgis-layout-column.offset-2{margin-left:16.666667%}arcgis-layout-column.offset-3{margin-left:25%}arcgis-layout-column.offset-4{margin-left:33.333333%}arcgis-layout-column.offset-5{margin-left:41.666667%}arcgis-layout-column.offset-6{margin-left:50%}arcgis-layout-column.offset-7{margin-left:58.333333%}arcgis-layout-column.offset-8{margin-left:66.666667%}arcgis-layout-column.offset-9{margin-left:75%}arcgis-layout-column.offset-10{margin-left:83.333333%}arcgis-layout-column.offset-11{margin-left:91.666667%}arcgis-layout-column.offset-12{margin-left:100%}@container (min-width: 576px){arcgis-layout-column.offset-sm-1{margin-left:8.333333%}arcgis-layout-column.offset-sm-2{margin-left:16.666667%}arcgis-layout-column.offset-sm-3{margin-left:25%}arcgis-layout-column.offset-sm-4{margin-left:33.333333%}arcgis-layout-column.offset-sm-5{margin-left:41.666667%}arcgis-layout-column.offset-sm-6{margin-left:50%}arcgis-layout-column.offset-sm-7{margin-left:58.333333%}arcgis-layout-column.offset-sm-8{margin-left:66.666667%}arcgis-layout-column.offset-sm-9{margin-left:75%}arcgis-layout-column.offset-sm-10{margin-left:83.333333%}arcgis-layout-column.offset-sm-11{margin-left:91.666667%}arcgis-layout-column.offset-sm-12{margin-left:100%}}@container (min-width: 768px){arcgis-layout-column.offset-md-1{margin-left:8.333333%}arcgis-layout-column.offset-md-2{margin-left:16.666667%}arcgis-layout-column.offset-md-3{margin-left:25%}arcgis-layout-column.offset-md-4{margin-left:33.333333%}arcgis-layout-column.offset-md-5{margin-left:41.666667%}arcgis-layout-column.offset-md-6{margin-left:50%}arcgis-layout-column.offset-md-7{margin-left:58.333333%}arcgis-layout-column.offset-md-8{margin-left:66.666667%}arcgis-layout-column.offset-md-9{margin-left:75%}arcgis-layout-column.offset-md-10{margin-left:83.333333%}arcgis-layout-column.offset-md-11{margin-left:91.666667%}arcgis-layout-column.offset-md-12{margin-left:100%}}@container (min-width: 992px){arcgis-layout-column.offset-lg-1{margin-left:8.333333%}arcgis-layout-column.offset-lg-2{margin-left:16.666667%}arcgis-layout-column.offset-lg-3{margin-left:25%}arcgis-layout-column.offset-lg-4{margin-left:33.333333%}arcgis-layout-column.offset-lg-5{margin-left:41.666667%}arcgis-layout-column.offset-lg-6{margin-left:50%}arcgis-layout-column.offset-lg-7{margin-left:58.333333%}arcgis-layout-column.offset-lg-8{margin-left:66.666667%}arcgis-layout-column.offset-lg-9{margin-left:75%}arcgis-layout-column.offset-lg-10{margin-left:83.333333%}arcgis-layout-column.offset-lg-11{margin-left:91.666667%}arcgis-layout-column.offset-lg-12{margin-left:100%}}@container (min-width: 1200px){arcgis-layout-column.offset-xl-1{margin-left:8.333333%}arcgis-layout-column.offset-xl-2{margin-left:16.666667%}arcgis-layout-column.offset-xl-3{margin-left:25%}arcgis-layout-column.offset-xl-4{margin-left:33.333333%}arcgis-layout-column.offset-xl-5{margin-left:41.666667%}arcgis-layout-column.offset-xl-6{margin-left:50%}arcgis-layout-column.offset-xl-7{margin-left:58.333333%}arcgis-layout-column.offset-xl-8{margin-left:66.666667%}arcgis-layout-column.offset-xl-9{margin-left:75%}arcgis-layout-column.offset-xl-10{margin-left:83.333333%}arcgis-layout-column.offset-xl-11{margin-left:91.666667%}arcgis-layout-column.offset-xl-12{margin-left:100%}}@container (min-width: 1440px){arcgis-layout-column.offset-xxl-1{margin-left:8.333333%}arcgis-layout-column.offset-xxl-2{margin-left:16.666667%}arcgis-layout-column.offset-xxl-3{margin-left:25%}arcgis-layout-column.offset-xxl-4{margin-left:33.333333%}arcgis-layout-column.offset-xxl-5{margin-left:41.666667%}arcgis-layout-column.offset-xxl-6{margin-left:50%}arcgis-layout-column.offset-xxl-7{margin-left:58.333333%}arcgis-layout-column.offset-xxl-8{margin-left:66.666667%}arcgis-layout-column.offset-xxl-9{margin-left:75%}arcgis-layout-column.offset-xxl-10{margin-left:83.333333%}arcgis-layout-column.offset-xxl-11{margin-left:91.666667%}arcgis-layout-column.offset-xxl-12{margin-left:100%}}arcgis-layout-column.align-self-auto{align-self:auto}arcgis-layout-column.align-self-baseline{align-self:baseline}arcgis-layout-column.align-self-start{align-self:flex-start}arcgis-layout-column.align-self-center{align-self:center}arcgis-layout-column.align-self-end{align-self:flex-end}arcgis-layout-column.align-self-stretch{align-self:stretch}@container (min-width: 576px){arcgis-layout-column.align-self-sm-auto{align-self:auto}arcgis-layout-column.align-self-sm-baseline{align-self:baseline}arcgis-layout-column.align-self-sm-start{align-self:flex-start}arcgis-layout-column.align-self-sm-center{align-self:center}arcgis-layout-column.align-self-sm-end{align-self:flex-end}arcgis-layout-column.align-self-sm-stretch{align-self:stretch}}@container (min-width: 768px){arcgis-layout-column.align-self-md-auto{align-self:auto}arcgis-layout-column.align-self-md-baseline{align-self:baseline}arcgis-layout-column.align-self-md-start{align-self:flex-start}arcgis-layout-column.align-self-md-center{align-self:center}arcgis-layout-column.align-self-md-end{align-self:flex-end}arcgis-layout-column.align-self-md-stretch{align-self:stretch}}@container (min-width: 992px){arcgis-layout-column.align-self-lg-auto{align-self:auto}arcgis-layout-column.align-self-lg-baseline{align-self:baseline}arcgis-layout-column.align-self-lg-start{align-self:flex-start}arcgis-layout-column.align-self-lg-center{align-self:center}arcgis-layout-column.align-self-lg-end{align-self:flex-end}arcgis-layout-column.align-self-lg-stretch{align-self:stretch}}@container (min-width: 1200px){arcgis-layout-column.align-self-xl-auto{align-self:auto}arcgis-layout-column.align-self-xl-baseline{align-self:baseline}arcgis-layout-column.align-self-xl-start{align-self:flex-start}arcgis-layout-column.align-self-xl-center{align-self:center}arcgis-layout-column.align-self-xl-end{align-self:flex-end}arcgis-layout-column.align-self-xl-stretch{align-self:stretch}}@container (min-width: 1440px){arcgis-layout-column.align-self-xxl-auto{align-self:auto}arcgis-layout-column.align-self-xxl-baseline{align-self:baseline}arcgis-layout-column.align-self-xxl-start{align-self:flex-start}arcgis-layout-column.align-self-xxl-center{align-self:center}arcgis-layout-column.align-self-xxl-end{align-self:flex-end}arcgis-layout-column.align-self-xxl-stretch{align-self:stretch}}arcgis-layout-column.align-items-auto{align-items:auto}arcgis-layout-column.align-items-baseline{align-items:baseline}arcgis-layout-column.align-items-center{align-items:center}arcgis-layout-column.align-items-end{align-items:flex-end}arcgis-layout-column.align-items-start{align-items:flex-start}arcgis-layout-column.align-items-stretch{align-items:stretch}@container (min-width: 576px){arcgis-layout-column.align-items-sm-auto{align-items:auto}arcgis-layout-column.align-items-sm-baseline{align-items:baseline}arcgis-layout-column.align-items-sm-start{align-items:flex-start}arcgis-layout-column.align-items-sm-center{align-items:center}arcgis-layout-column.align-items-sm-end{align-items:flex-end}arcgis-layout-column.align-items-sm-stretch{align-items:stretch}}@container (min-width: 768px){arcgis-layout-column.align-items-md-auto{align-items:auto}arcgis-layout-column.align-items-md-baseline{align-items:baseline}arcgis-layout-column.align-items-md-start{align-items:flex-start}arcgis-layout-column.align-items-md-center{align-items:center}arcgis-layout-column.align-items-md-end{align-items:flex-end}arcgis-layout-column.align-items-md-stretch{align-items:stretch}}@container (min-width: 992px){arcgis-layout-column.align-items-lg-auto{align-items:auto}arcgis-layout-column.align-items-lg-baseline{align-items:baseline}arcgis-layout-column.align-items-lg-start{align-items:flex-start}arcgis-layout-column.align-items-lg-center{align-items:center}arcgis-layout-column.align-items-lg-end{align-items:flex-end}arcgis-layout-column.align-items-lg-stretch{align-items:stretch}}@container (min-width: 1200px){arcgis-layout-column.align-items-xl-auto{align-items:auto}arcgis-layout-column.align-items-xl-baseline{align-items:baseline}arcgis-layout-column.align-items-xl-start{align-items:flex-start}arcgis-layout-column.align-items-xl-center{align-items:center}arcgis-layout-column.align-items-xl-end{align-items:flex-end}arcgis-layout-column.align-items-xl-stretch{align-items:stretch}}@container (min-width: 1440px){arcgis-layout-column.align-items-xxl-auto{align-items:auto}arcgis-layout-column.align-items-xxl-baseline{align-items:baseline}arcgis-layout-column.align-items-xxl-start{align-items:flex-start}arcgis-layout-column.align-items-xxl-center{align-items:center}arcgis-layout-column.align-items-xxl-end{align-items:flex-end}arcgis-layout-column.align-items-xxl-stretch{align-items:stretch}}arcgis-layout-column.justify-content-start{justify-content:flex-start}arcgis-layout-column.justify-content-end{justify-content:flex-end}arcgis-layout-column.justify-content-center{justify-content:center}arcgis-layout-column.justify-content-between{justify-content:space-between}arcgis-layout-column.justify-content-around{justify-content:space-around}arcgis-layout-column.justify-content-evenly{justify-content:space-evenly}@container (min-width: 576px){arcgis-layout-column.justify-content-sm-start{justify-content:flex-start}arcgis-layout-column.justify-content-sm-end{justify-content:flex-end}arcgis-layout-column.justify-content-sm-center{justify-content:center}arcgis-layout-column.justify-content-sm-between{justify-content:space-between}arcgis-layout-column.justify-content-sm-around{justify-content:space-around}arcgis-layout-column.justify-content-sm-evenly{justify-content:space-evenly}}@container (min-width: 768px){arcgis-layout-column.justify-content-md-start{justify-content:flex-start}arcgis-layout-column.justify-content-md-end{justify-content:flex-end}arcgis-layout-column.justify-content-md-center{justify-content:center}arcgis-layout-column.justify-content-md-between{justify-content:space-between}arcgis-layout-column.justify-content-md-around{justify-content:space-around}arcgis-layout-column.justify-content-md-evenly{justify-content:space-evenly}}@container (min-width: 992px){arcgis-layout-column.justify-content-lg-start{justify-content:flex-start}arcgis-layout-column.justify-content-lg-end{justify-content:flex-end}arcgis-layout-column.justify-content-lg-center{justify-content:center}arcgis-layout-column.justify-content-lg-between{justify-content:space-between}arcgis-layout-column.justify-content-lg-around{justify-content:space-around}arcgis-layout-column.justify-content-lg-evenly{justify-content:space-evenly}}@container (min-width: 1200px){arcgis-layout-column.justify-content-xl-start{justify-content:flex-start}arcgis-layout-column.justify-content-xl-end{justify-content:flex-end}arcgis-layout-column.justify-content-xl-center{justify-content:center}arcgis-layout-column.justify-content-xl-between{justify-content:space-between}arcgis-layout-column.justify-content-xl-around{justify-content:space-around}arcgis-layout-column.justify-content-xl-evenly{justify-content:space-evenly}}arcgis-layout-column.shrink{flex:0 0 auto;width:auto;max-width:none}:host([debug]){#layout-container{background-color:pink}@container (min-width: 576px){#layout-container{background-color:orange}}@container (min-width: 768px){#layout-container{background-color:#fafad2}}@container (min-width: 992px){#layout-container{background-color:#90ee90}}@container (min-width: 1200px){#layout-container{background-color:#add8e6}}@container (min-width: 1440px){#layout-container{background-color:violet}}}:host([debug]) arcgis-layout-section{outline:2px solid blue;outline-offset:6px}:host([debug]) arcgis-layout-section.layout-error{outline:4px solid fuchsia;outline-offset:4px;height:50px}:host([debug]) arcgis-layout-section.layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative;top:-12px}:host([debug]) arcgis-layout-row{outline:2px solid red;outline-offset:3px}:host([debug]) arcgis-layout-row.layout-error{outline:4px solid fuchsia;outline-offset:2px;height:50px}:host([debug]) arcgis-layout-row.layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative;top:8px}:host([debug]) arcgis-layout-column{outline:2px solid green}:host([debug]) arcgis-layout-column.layout-error{outline:4px solid fuchsia;outline-offset:-5px;align-self:stretch}:host([debug]) arcgis-layout-column[debug].layout-error:after{content:"!";color:#f0f;font-size:2rem;font-weight:700;position:relative}:host([debug]) arcgis-layout-column[debug]>.layout-error{outline:4px solid fuchsia;outline-offset:-2px;align-self:stretch;height:40px}:host([debug]) arcgis-layout-column[debug]>.layout-error:after{content:"!";color:#f0f;font-size:1.5rem;font-weight:700;position:relative;top:8px;left:5px}:host([is-edit-mode]) arcgis-layout-column>:not(arcgis-layout-row):hover,.current-node{outline:3px solid var(--calcite-ui-brand);outline-offset:2px}`;
+class d extends s {
   constructor() {
     super(...arguments), this.layout = void 0, this.debug = !1, this.isEditMode = !1, this.options = {};
   }
@@ -19,43 +19,43 @@ class x extends c {
     this.properties = { layout: 0, debug: 7, isEditMode: 7, options: 0, currentNode: 0 };
   }
   static {
-    this.styles = y;
+    this.styles = x;
   }
   get _context() {
-    return u();
+    return r();
   }
   get _utils() {
     return {
-      processLayout: async (l) => await g(l, this.options, this._context)
+      processLayout: async (t) => await g(t, this.options, this._context)
     };
   }
-  _getChildClasses(l) {
-    const o = m(l.sectionProps);
-    return l.classes?.length && o.push(...l.classes), l.id === this.currentNode?.id && o.push("current-node"), o;
+  _getChildClasses(t) {
+    const l = m(t);
+    return t.id === this.currentNode?.id && l.push("current-node"), l;
   }
-  renderSection(l) {
-    if (f(l))
+  renderSection(t) {
+    if (f(t))
       return;
-    const o = l;
+    const l = t;
     try {
-      return t(o.id, a`<arcgis-layout-section class=${r(this._getChildClasses(o).join(" "))} .currentNode=${this.currentNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${o} style=${s(o.styles)} .utils=${this._utils}></arcgis-layout-section>`);
-    } catch (i) {
-      return d.error(`Error rendering section with id ${o.id}:`, i), t(o.id, a`<arcgis-layout-section class=${r({ "layout-error": this.debug })} .debug=${this.debug} .node=${{ children: [], id: o.id, tag: "arcgis-layout-section" }}></arcgis-layout-section>`);
+      return o(l.id, a`<arcgis-layout-section class=${i(this._getChildClasses(l).join(" "))} .currentNode=${this.currentNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${l} style=${c(l.styles)} .utils=${this._utils}></arcgis-layout-section>`);
+    } catch (n) {
+      return y.error(`Error rendering section with id ${l.id}:`, n), o(l.id, a`<arcgis-layout-section class=${i({ "layout-error": this.debug })} .debug=${this.debug} .node=${{ children: [], id: l.id, tag: "arcgis-layout-section" }}></arcgis-layout-section>`);
     }
   }
   renderLayout() {
-    let l;
-    return this.layout ? this.layout.sections.map((o) => this.renderSection(o)) : l;
+    let t;
+    return this.layout ? this.layout.sections.map((l) => this.renderSection(l)) : t;
   }
   renderLoading() {
-    let l;
-    return this.layout || (l = a`<calcite-loader label=loading scale=l></calcite-loader>`), l;
+    let t;
+    return this.layout || (t = a`<calcite-loader label=loading scale=l></calcite-loader>`), t;
   }
   render() {
     return a`<div id=layout-container>${this.renderLayout()}${this.renderLoading()}</div>`;
   }
 }
-e("arcgis-layout", x);
+e("arcgis-layout", d);
 export {
-  x as ArcgisLayout
+  d as ArcgisLayout
 };

package/dist/components/arcgis-layout-column/customElement.js

@@ -1,16 +1,16 @@
-import { c as l } from "../../chunks/runtime.js";
+import { c as p } from "../../chunks/runtime.js";
 import { html as r } from "lit-html";
 import { keyed as i } from "lit-html/directives/keyed.js";
-import { LitElement as m, createEvent as u, noShadowRoot as c, safeClassMap as d, safeStyleMap as p } from "@arcgis/lumina";
-import { b as y, a as f, i as h } from "../../chunks/typeGuards.js";
-import { g as w, a as M } from "../../chunks/getResponsiveClasses.js";
-import { ArcgisLayoutNode as g } from "../layouts/components/layout-node/customElement.js";
+import { LitElement as c, createEvent as u, noShadowRoot as y, safeClassMap as d, safeStyleMap as f } from "@arcgis/lumina";
+import { i as g, a as l, b as h } from "../../chunks/typeGuards.js";
+import { g as M, a as E } from "../../chunks/getResponsiveClasses.js";
+import { ArcgisLayoutNode as m } from "../layouts/components/layout-node/customElement.js";
 import { Logger as a } from "@esri/hub-common";
-import { spreadProps as E } from "@open-wc/lit-helpers";
+import { spreadProps as w } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.2 */
-class N extends m {
+See https://js.arcgis.com/0.4/esri/copyright.txt for details.
+v0.4.0 */
+class N extends c {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1, this.arcgisLayoutNodeDeactivate = u(), this.arcgisLayoutNodeActivate = u();
   }
@@ -18,57 +18,57 @@ class N extends m {
     this.properties = { node: 0, currentNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = c;
+    this.shadowRootOptions = y;
   }
-  _handleMouseOverNode(e) {
-    const o = e.target;
-    o instanceof HTMLElement && this.arcgisLayoutNodeActivate.emit(o);
+  _handleMouseOverNode(t) {
+    const s = t.target;
+    s instanceof HTMLElement && this.arcgisLayoutNodeActivate.emit(s);
   }
-  _handleMouseOutNode(e) {
-    const o = e.target;
-    o instanceof HTMLElement && this.arcgisLayoutNodeDeactivate.emit(o);
+  _handleMouseOutNode(t) {
+    const s = t.target;
+    s instanceof HTMLElement && this.arcgisLayoutNodeDeactivate.emit(s);
   }
-  _handleNodeKeyDown(e) {
-    const o = e.target;
-    o instanceof HTMLElement && e.key === "Enter" && this.arcgisLayoutNodeActivate.emit(o);
+  _handleNodeKeyDown(t) {
+    const s = t.target;
+    s instanceof HTMLElement && t.key === "Enter" && this.arcgisLayoutNodeActivate.emit(s);
   }
-  _getChildClasses(e) {
-    const o = e.classes?.length ? [...e.classes] : [];
-    return e.tag === "arcgis-layout-row" && o.push(...w(e.rowProps)), e.tag === "arcgis-layout-column" && o.push(...M(e.columnProps)), e.id === this.currentNode?.id && o.push("current-node"), o;
+  _getChildClasses(t) {
+    const s = t.classes?.length ? [...t.classes] : [];
+    return g(t) && s.push(...M(t)), l(t) && s.push(...E(t)), t.id === this.currentNode?.id && s.push("current-node"), s;
   }
   render() {
-    const { debug: e, utils: o } = this;
-    return this.node.children?.map((t) => {
-      const { id: n } = t;
-      if (y(t) || f(t)) {
+    const { debug: t, utils: s } = this;
+    return this.node.children?.filter((e) => !e.hidden).map((e) => {
+      const { id: n } = e;
+      if (h(e) || l(e)) {
         a.warn(`Child with id ${n} in arcgis-layout-column is not a row or card.`);
         return;
       }
-      if (h(t))
+      if (g(e))
         try {
-          return i(t.id, r`<arcgis-layout-row class=${d(this._getChildClasses(t).join(" "))} .currentNode=${this.currentNode} .debug=${e} .isEditMode=${this.isEditMode} .node=${t} .utils=${o} style=${p(t.styles)} .role=${t.rowProps?.role} .ariaLabel=${t.rowProps?.ariaLabel} ${E(t.properties ?? {})}></arcgis-layout-row>`);
-        } catch (s) {
-          return a.error(`Error rendering row with id ${n} in arcgis-hub-layout-column:`, s), i(t.id, r`<arcgis-layout-row class=${d({ "layout-error": e })} .debug=${e} .node=${{ id: t.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
+          return i(e.id, r`<arcgis-layout-row class=${d(this._getChildClasses(e).join(" "))} .currentNode=${this.currentNode} .debug=${t} .isEditMode=${this.isEditMode} .node=${e} .utils=${s} style=${f(e.styles)} .role=${e.rowProps?.role} .ariaLabel=${e.rowProps?.ariaLabel} ${w(e.properties ?? {})}></arcgis-layout-row>`);
+        } catch (o) {
+          return a.error(`Error rendering row with id ${n} in arcgis-hub-layout-column:`, o), i(e.id, r`<arcgis-layout-row class=${d({ "layout-error": t })} .debug=${t} .node=${{ id: e.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
         }
       try {
-        return g({ tagName: t.tag, classes: this._getChildClasses(t).join(" "), styles: t.styles, options: { isEditMode: this.isEditMode }, props: {
+        return m({ tagName: e.tag, classes: this._getChildClasses(e).join(" "), styles: e.styles, options: { isEditMode: this.isEditMode }, props: {
           currentNode: this.currentNode,
-          debug: e,
-          key: t.id,
-          node: t,
+          debug: t,
+          key: e.id,
+          node: e,
           onKeyDown: this.isEditMode ? this._handleNodeKeyDown : void 0,
           onMouseLeave: this.isEditMode ? this._handleMouseOutNode : void 0,
           onMouseEnter: this.isEditMode ? this._handleMouseOverNode : void 0,
-          utils: o,
-          ...t.properties
-        }, children: Object.values(t.slots ?? {}).map((s) => typeof s == "string" ? s : g({ tagName: s.tag, options: { isEditMode: this.isEditMode }, props: s.properties ?? {} })) });
-      } catch (s) {
-        return a.error(`Error rendering block with id ${t.id} in arcgis-layout-column:`, s), e ? i(t.id, r`<div class="layout-error"></div>`) : null;
+          utils: s,
+          ...e.properties
+        }, children: Object.values(e.slots ?? {}).map((o) => typeof o == "string" ? o : m({ tagName: o.tag, options: { isEditMode: this.isEditMode }, props: o.properties ?? {} })) });
+      } catch (o) {
+        return a.error(`Error rendering block with id ${e.id} in arcgis-layout-column:`, o), t ? i(e.id, r`<div class="layout-error"></div>`) : null;
       }
     }) ?? [];
   }
 }
-l("arcgis-layout-column", N);
+p("arcgis-layout-column", N);
 export {
   N as ArcgisLayoutColumn
 };

package/dist/components/arcgis-layout-container/customElement.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ILayout, ILayoutNode, IProcessLayoutOptions } from '../layouts/types';
+import { ILayoutNode, IProcessLayoutOptions, HTMLConfigurableLayoutNodeElement, Layout, ILayout } from '../layouts/types';
 import { getLayoutNodeConfig } from '../layouts/utils/getLayoutNodeConfig';
 import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
 
 export declare class ArcgisLayoutContainer extends LitElement {
     /** The layout to render */
-    layout: ILayout;
+    layout: Layout;
     /** @default false */
     debug: boolean;
     /**