@uxland/primary-shell 3.4.1 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -25,7 +25,6 @@
     "url": "https://github.com/uxland/harmonix/issues"
   },
   "dependencies": {
-    "@material/web": "^2.1.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@uxland/harmonix": "^1.0.0",
     "@uxland/harmonix-adapters": "^1.0.1",
@@ -45,7 +44,7 @@
     "axios-mock-adapter": "^2.0.0",
     "inversify": "^6.0.2",
     "inversify-inject-decorators": "^3.1.0",
-    "@salut/design-system-salut": "../../design-system-salut-2.0.3.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.0.5.tgz",
     "jwt-decode": "^4.0.0",
     "lit": "^3.1.0",
     "mediatr-ts": "^1.2.1",

package/src/UI/components/index.ts

@@ -2,3 +2,4 @@ import "./primaria-shell/primaria-shell";
 import "./clinical-monitoring/clinical-monitoring";
 import "../shared-components";
 import "../components/shell-header/shell-header";
+import "../components/quick-actions-menu/quick-actions-menu";

package/src/UI/components/primaria-error-view/component.ts

@@ -0,0 +1,18 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+
+@customElement("primaria-error-view")
+export class PrimariaErrorView extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+  ${unsafeCSS(styles)}
+`;
+
+  @property()
+  error: {message: string};
+}

package/src/UI/components/primaria-error-view/styles.css

@@ -0,0 +1,27 @@
+:host{
+  width: 100%;
+  height: 100%;
+  min-height: 1px;
+  display: flex;
+}
+
+.container{
+  width: 100%;
+  min-height: 1px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #60A8F0;
+}
+
+svg{
+  width: 45px;
+  height: 45px;
+  fill: #D36262;
+}
+
+h1{
+  color: white;
+}

package/src/UI/components/primaria-error-view/template.ts

@@ -0,0 +1,12 @@
+import { html } from "lit";
+import { PrimariaErrorView } from "./component";
+
+export const template = (props: PrimariaErrorView) => {
+
+  return html`
+    <div class="container">
+    <svg height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+    <h1>${props.error?.message}</h1>
+</div>
+`;
+};

package/src/UI/components/primaria-shell/constants.ts

@@ -0,0 +1,4 @@
+export enum shellViews {
+  shell = "primaria-shell",
+  error = "primaria-error-view",
+}

package/src/UI/components/primaria-shell/primaria-shell.ts

@@ -1,10 +1,13 @@
 import { IRegion, region } from "@uxland/regions";
 import { LitElement, css, html, unsafeCSS } from "lit";
-import { PrimariaRegionHost } from "../../../api/api";
+import { PrimariaRegionHost, shellApi } from "../../../api/api";
 import { customElement, state } from "lit/decorators.js";
 import { shellRegions } from "../../../api/region-manager/regions";
 import styles from "./styles.css?inline";
 import { template } from "./template";
+import { shellViews } from "./constants";
+import { shellEvents } from "../../../events";
+import { activateDefaultView } from "../../../handle-views";
 
 //@ts-ignore
 @customElement("primaria-shell")
@@ -17,6 +20,23 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
     ${unsafeCSS(styles)}
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._subscribeEvents();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribeEvents();
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    setTimeout(() => {
+      activateDefaultView();
+    }, 300);
+  }
+
   @region({ targetId: "menu-region-container", name: shellRegions.navigationMenu })
   navigationMenuRegion: IRegion | undefined;
 
@@ -38,7 +58,24 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
   @state()
   sidebarExpanded = false;
 
+  @state()
+  viewSelected = shellViews.shell;
+
+  @state()
+  error: { message: string };
+
   _toggleSidebar() {
     this.sidebarExpanded = !this.sidebarExpanded;
   }
+
+  _subscribeEvents() {
+    shellApi.broker.subscribe(shellEvents.appCrashed, (error: { message: string }) => {
+      this.viewSelected = shellViews.error;
+      this.error = error;
+    });
+  }
+
+  _unsubscribeEvents() {
+    //TODO unsubscribe when broker accept unsuscribe
+  }
 }

package/src/UI/components/primaria-shell/styles.css

@@ -2,6 +2,11 @@
   width: 100%;
   overflow: hidden;
 }
+
+#main-switcher{
+  display: inherit;
+}
+
 .container {
   width: 100%;
   height: 100%;
@@ -15,18 +20,22 @@
   height: 100%;
   display: flex;
   .sidebar {
-    padding-inline: 2px;
+    padding-inline: 16px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     background: var(--color-primary-700);
-    width: 72px;
+    width: 40px;
     height: 100%;
     color: white;
     .top-content {
       padding-top: 24px;
       padding-bottom: 24px;
+      border-radius: 8px;
+    }
+    .icon {
+      margin-left: 8px;
     }
     #menu-region-container {
       min-height: 1px;
@@ -53,28 +62,11 @@
     &[expanded] {
       width: 252px;
       align-items: flex-start;
-      padding-inline: 16px;
-    }
-    md-menu {
-      cursor: pointer;
-      --md-menu-container-color: white;
-      min-width: 239px;
-      .menu-item {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: 1rem;
-        gap: 50px;
-        &:hover {
-          background-color: #f0f0f0;
-        }
-      }
-      color: var(--color-neutral-900);
     }
     .create-button-closed {
       cursor: pointer;
       background-color: #f0f0f0;
+      color: var(--color-primary-700);
       border-radius: 8px;
       width: 40px;
       height: 40px;
@@ -82,11 +74,17 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
+      transition: background-color 0.3s ease;
+      &:hover {
+        background-color: var(--color-primary-900);
+        color: white;
+      }
     }
     .create-button-opened {
       padding: 1px;
       cursor: pointer;
       background-color: #f0f0f0;
+      color: var(--color-primary-700);
       border-radius: 8px;
       gap: 8px;
       font-weight: 600;
@@ -95,7 +93,11 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding-left: 9px;
+      transition: background-color 0.3s ease;
+      &:hover {
+        background-color: var(--color-primary-900);
+        color: white;
+      }
     }
   }
   .content {
@@ -129,38 +131,6 @@
 .divider-closed {
   width: 40px;
 }
-.actions-bottom {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 100%;
-}
-primaria-menu {
-  border-radius: 8px;
-  color: var(--color-primary-700);
-}
-.toggle-opened,
-.toggle-closed {
-  cursor: pointer;
-  display: flex;
+.toggle-button {
   margin-bottom: 24px;
-  padding: 8px;
-  gap: 8px;
-  border-radius: 8px;
-  border: 1px;
-  transition: background-color 0.3s ease;
-  &:hover {
-    background-color: var(--color-primary-900);
-  }
-}
-.toggle-opened {
-  justify-content: flex-start;
-}
-.toggle-closed {
-  justify-content: center;
-}
-.close-menu {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
 }

package/src/UI/components/primaria-shell/template.ts

@@ -4,64 +4,57 @@ import "../../fonts/fonts.css";
 import { html, nothing } from "lit";
 import gencatLogo from "../../../UI/images/Gencat_Logotip.svg";
 import { PrimariaShell } from "./primaria-shell";
-import "@material/web/menu/menu.js";
-import "@material/web/menu/menu-item.js";
-import "@material/web/button/filled-button.js";
+import { shellViews } from "./constants";
+import {translate} from '../../../locales';
 
 export const template = (props: PrimariaShell) => html`
-<div class="container">
-  <shell-header></shell-header>
-  <div class="main-container">
-    <div class="sidebar" ?expanded=${props.sidebarExpanded}>
-      <!-- <div class="top-content"> -->
+<primaria-content-switcher id="main-switcher" attrForSelected="view" .selected=${props.viewSelected}>
+  <div class="container" view=${shellViews.shell}>
+    <shell-header></shell-header>
+    <div class="main-container">
+      <div class="sidebar" ?expanded=${props.sidebarExpanded}>
         <div class="top-content">
-          <primaria-menu>
+          <quick-actions-menu>
             <div class="${props.sidebarExpanded ? "create-button-opened" : "create-button-closed"} " slot="anchor" id="usage-anchor">
-              <dss-icon icon="add_circle_outline" size="md"></dss-icon>${props.sidebarExpanded ? "Crear" : nothing}
+              <dss-icon class="${props.sidebarExpanded ? "icon" : ""}" icon="add_circle_outline" size="md"></dss-icon>${props.sidebarExpanded ? translate('actions.create') : nothing}
+              ${!props.sidebarExpanded ? html`<dss-tooltip position="right">
+                ${translate('actions.create')}
+              </dss-tooltip>` : nothing}
             </div>
-            <md-menu slot="content" id="content" anchor="usage-anchor">
-              <div id="quick-actions-region-container"></div>
-            </md-menu>
-          </primaria-menu>
+            <dss-action-menu id="quick-actions-region-container" slot="content" id="content" anchor="usage-anchor"></dss-action-menu>
+          </quick-actions-menu>
         </div>
         <div id="menu-region-container"></div>
-      <!-- </div> -->
-      <div class="bottom-content">
-        <div class="bottom-content-first">
-          <hr class="dss-divider--bold ${props.sidebarExpanded ? "divider-opened" : "divider-closed"}" />
-         <!--  <primaria-menu-item
-            icon="add_box"
-            label="Menu Item"
-          ></primaria-menu-item>
-          <primaria-menu-item
-            icon="add_box"
-            label="Menu Item"
-          ></primaria-menu-item>
-          <primaria-menu-item
-            icon="add_box"
-            label="Menu Item"
-          ></primaria-menu-item>
-          <primaria-menu-item
-            icon="add_box"
-            label="Menu Item"
-          ></primaria-menu-item> -->
-          <div id="navigation-menu-lower-region-container"></div>
-        </div>
-        <div @click=${() => props._toggleSidebar()} class="${props.sidebarExpanded ? "toggle-opened" : "toggle-closed"}">
-          ${!props.sidebarExpanded ? html`<dss-container><span class="dss-icon white dss-icon--fill dss-icon-button--md">expand_circle_right</span></dss-container>` : html`<dss-container class="close-menu"><span class="dss-icon white dss-icon--fill dss-icon-button--md" style="transform: rotate(180deg);">expand_circle_right</span>Tancar Menu</dss-container>`}
+        <div class="bottom-content">
+          <div class="bottom-content-first">
+            <hr class="dss-divider--bold ${props.sidebarExpanded ? "divider-opened" : "divider-closed"}" />
+            <div id="navigation-menu-lower-region-container"></div>
+          </div>
+          <primaria-nav-item 
+            .config=${{
+              icon: "expand_circle_right",
+              label: props.sidebarExpanded ? translate('actions.toggleMenuClose') : translate('actions.toggleMenuOpen'),
+              fill: true,
+              rotateIcon: props.sidebarExpanded,
+              callbackFn: () => props._toggleSidebar(),
+            }}
+            class="toggle-button"
+          ></primaria-nav-item>
         </div>
       </div>
+      <div class="content">
+        <div id="floating-region-container"></div>
+        <primaria-content-switcher id="main-region-container"></primaria-content-switcher>
+      </div>
     </div>
-    <div class="content">
-      <div id="floating-region-container"></div>
-      <primaria-content-switcher id="main-region-container"></primaria-content-switcher>
-    </div>
+    <!-- <div class="footer">
+      <div class="footer-logo">
+        <img src=${gencatLogo} alt="logo" />
+        <span>|</span>
+        <span>Historial Electrònic de Salut (HES)</span>
+      </div>
+    </div> -->
   </div>
-  <!-- <div class="footer">
-    <div class="footer-logo">
-      <img src=${gencatLogo} alt="logo" />
-      <span>|</span>
-      <span>Historial Electrònic de Salut (HES)</span>
-    </div>
-  </div> -->
-</div>`;
+  <primaria-error-view .error=${props.error} view=${shellViews.error}></primaria-error-view>
+</primaria-content-switcher>
+`;

package/src/UI/{shared-components/primaria-menu/primaria-menu.ts → components/quick-actions-menu/quick-actions-menu.ts}

@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { template } from "./template";
 
-@customElement("primaria-menu")
-export class PrimariaMenu extends LitElement {
+@customElement("quick-actions-menu")
+export class QuickActionsMenu extends LitElement {
   render() {
     return html`${template(this)}`;
   }
@@ -43,4 +43,4 @@ export class PrimariaMenu extends LitElement {
       targetElement.show();
     }
   }
-}
+}

package/src/UI/components/quick-actions-menu/template.ts

@@ -0,0 +1,10 @@
+
+import { html } from "lit";
+import { QuickActionsMenu } from "./quick-actions-menu";
+
+export const template = (props: QuickActionsMenu) => html`
+<span >
+  <slot name="anchor"></slot>
+  <slot name="content"></slot>
+</span>
+`;

package/src/UI/images/not-found.svg

@@ -0,0 +1,9 @@
+<svg width="215" height="150" viewBox="0 0 215 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.9" d="M135.132 57.43C96.9221 47.658 83.3815 -29.7048 26.9734 12.5083C-13.0511 42.4595 11.4691 115.499 61.6878 107.019C92.0822 101.867 87.3917 101.341 113.129 115.244C139.231 129.308 167.972 136.397 195.855 111.436C210.28 98.5179 215.939 67.0352 201.939 50.7417C184.388 30.3592 158.485 63.4098 135.132 57.43Z" fill="#EFF7FF"/>
+<ellipse cx="120.5" cy="143.5" rx="52.5" ry="3.5" fill="#F5F5F5"/>
+<path d="M121.387 80.2184C121.995 79.5948 122.563 78.953 123.09 78.2959L134.396 89.3383C135.09 90.0177 134.851 91.389 133.861 92.4024C132.872 93.4159 131.505 93.6888 130.811 93.0094L119.505 81.967C120.148 81.424 120.777 80.8407 121.385 80.2171L121.387 80.2184Z" fill="#1D1D1D"/>
+<path opacity="0.6" d="M121.127 79.9896C132.157 68.6986 131.888 50.5485 120.527 39.4502C109.166 28.3519 91.0149 28.5081 79.9849 39.799C68.955 51.09 69.2233 69.2401 80.5843 80.3385C91.9453 91.4368 110.097 91.2806 121.127 79.9896Z" fill="#8FC2F5"/>
+<path d="M78.0382 83.0622C90.8729 95.6382 111.378 95.4578 123.835 82.6609C136.293 69.8625 135.986 49.2932 123.15 36.7173C110.316 24.1413 89.8107 24.3217 77.3538 37.1186C64.8956 49.9169 65.2022 70.4862 78.0382 83.0622ZM80.642 80.387C69.289 69.264 69.0172 51.0692 80.037 39.749C91.0569 28.4288 109.194 28.2694 120.547 39.3938C131.9 50.5182 132.171 68.713 121.152 80.0332C110.132 91.3534 91.9949 91.5128 80.642 80.3884V80.387Z" fill="#7BACFC"/>
+<path d="M169.953 128.522L171.714 126.696C173.474 124.871 173.421 121.964 171.595 120.205L135.013 84.9265C133.187 83.1661 130.281 83.2205 128.522 85.0451L126.761 86.8711C125.001 88.6957 125.055 91.6028 126.88 93.3619L163.462 128.64C165.287 130.401 168.194 130.346 169.953 128.522Z" fill="#656565"/>
+<path opacity="0.35" d="M88.8399 71.2315C96.506 79.2245 101.258 78.1642 100.757 82.4547C100.256 86.7452 91.398 85.7448 82.7698 76.0396C74.1415 66.3344 75.0893 54.9166 79.8491 55.2485C84.6089 55.5803 80.129 62.1492 88.8399 71.2315Z" fill="white"/>
+</svg>

package/src/UI/shared-components/index.ts

@@ -1,6 +1,4 @@
 import "./primaria-content-switcher/primaria-content-switcher";
-import "./primaria-menu-item/primaria-menu-item";
-import "./primaria-menu/primaria-menu";
+import "./primaria-nav-item/primaria-nav-item";
 import "./primaria-text-editor/primaria-rich-text-editor";
 export * from "./primaria-interaction";
-import "./dss-container/dss-container";

package/src/UI/shared-components/primaria-nav-item/primaria-nav-item.ts

@@ -0,0 +1,54 @@
+import { LitElement, html, css, unsafeCSS, PropertyValues } from "lit";
+import { template } from "./template";
+import styles from "./styles.css?inline";
+import { customElement, property, state } from "lit/decorators.js";
+import { shellApi } from "../../../api/api";
+import { shellEvents } from "../../../events";
+import { PrimariaNavItemConfig } from "../typings";
+import { regionView } from "@uxland/regions";
+
+@customElement("primaria-nav-item")
+export class PrimariaNavItem extends regionView(LitElement) {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  constructor(config: PrimariaNavItemConfig) {
+    super();
+    this.config = config;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    shellApi.broker.subscribe(shellEvents.mainViewChanged, (payload: { viewId: string }) => {
+      this.isActive = payload.viewId === this.view?.id;
+    });
+  }
+
+  firstUpdated(_changedProps: PropertyValues<PrimariaNavItem>) {
+    super.firstUpdated(_changedProps);
+    this.observeHostResize();
+  }
+
+  observeHostResize() {
+    const parentElement = this.parentElement;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.target.clientWidth; // Obtenemos el ancho del host
+        this.showText = width > 100; // Mostrar texto si el ancho del host es mayor que 150px
+      }
+    });
+
+    observer.observe(parentElement as HTMLElement);
+  }
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  @property({ type: Number }) containerWidth = 0;
+  @state() showText = false;
+  @state() isActive = false;
+
+  @property({ type: Object }) config: PrimariaNavItemConfig;
+}

package/src/UI/shared-components/{primaria-menu-item → primaria-nav-item}/styles.css

@@ -18,3 +18,7 @@
     transition: background-color 0.3s;
   }
 }
+
+.item.active{
+  outline: 2px solid white;
+}

package/src/UI/shared-components/primaria-nav-item/template.ts

@@ -0,0 +1,27 @@
+import { html, nothing } from "lit";
+import { PrimariaNavItem } from "./primaria-nav-item";
+import { classMap } from "lit/directives/class-map.js";
+
+export const template = (props: PrimariaNavItem) => {
+  return html`
+  <div 
+    class=${classMap({ item: true, active: props.isActive })} 
+    @click=${props.config.callbackFn} 
+    ?expanded=${props.showText}
+  >
+    <div class="icon-label">
+      <dss-icon icon=${props.config.icon} size="md" ?fill=${props.config.fill} style=${props.config.rotateIcon ? "transform: rotate(180deg);" : ""}></dss-icon>
+      ${props.showText ? html`<span>${props.config.label}</span>` : ""}
+    </div>
+    ${props.showText && props.config.showArrow ? html`<dss-icon icon="chevron_right" size="md"></dss-icon>` : ""}
+    ${
+      !props.showText
+        ? html`
+      <dss-tooltip position="right">
+        ${props.config.label}
+      </dss-tooltip>`
+        : nothing
+    }
+  </div>
+`;
+};

package/src/UI/shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu.ts

@@ -0,0 +1,41 @@
+import { LitElement, html, css, unsafeCSS } from "lit";
+import styles from "./styles.css?inline";
+import { customElement, property, state } from "lit/decorators.js";
+import { template } from "./template";
+import { PrimariaNavItemConfig, PrimariaNavTreeMenuConfig } from "../typings";
+
+@customElement("primaria-nav-tree-menu")
+export class PrimariaNavTreeMenu extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @property({ type: Object }) config: PrimariaNavTreeMenuConfig;
+  @state() primariaNavItemConfig: PrimariaNavItemConfig;
+
+  @state() showActionMenu = false;
+
+  constructor(config: PrimariaNavTreeMenuConfig) {
+    super();
+    this.config = config;
+    this.primariaNavItemConfig = {
+      icon: config.icon,
+      label: config.label,
+      showArrow: true,
+      callbackFn: this.handleItemClick,
+    };
+  }
+
+  handleItemClick = () => {
+    this.showActionMenu = true;
+    this.requestUpdate();
+  };
+
+  handleCloseMenu = () => {
+    this.showActionMenu = false;
+  };
+
+  render() {
+    return html`${template(this)}`;
+  }
+}

package/src/UI/shared-components/primaria-nav-tree-menu/styles.css

@@ -0,0 +1,11 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-active {
+  background-color: var(--color-primary-900);
+  color: white;
+  border-radius: 8px;
+}

package/src/UI/shared-components/primaria-nav-tree-menu/template.ts

@@ -0,0 +1,30 @@
+import { html, nothing } from "lit";
+import { PrimariaNavTreeMenu } from "./primaria-nav-tree-menu";
+import { classMap } from "lit/directives/class-map.js";
+
+export const template = (props: PrimariaNavTreeMenu) => html`
+  <div class="wrapper">
+    <primaria-nav-item
+      .config=${props.primariaNavItemConfig}
+      @click=${props.handleItemClick}
+      class="${classMap({ "menu-active": props.showActionMenu })}"
+    ></primaria-nav-item>
+    ${
+      props.showActionMenu
+        ? html`
+          <dss-action-menu @onCloseActionMenu=${props.handleCloseMenu}>
+            ${props.config.actionMenuItems?.map(
+              (item) => html`
+                <dss-action-menu-item
+                  righticon=${item.icon}
+                  .label=${item.label}
+                  @click=${item.callbackFn}
+                ></dss-action-menu-item>
+              `,
+            )}
+          </dss-action-menu>
+        `
+        : nothing
+    }
+  </div>
+`;

package/src/UI/shared-components/typings.ts

@@ -0,0 +1,17 @@
+interface MenuItem {
+  icon: string;
+  label: string;
+}
+
+export interface PrimariaNavItemConfig extends MenuItem {
+  callbackFn: () => void;
+  showArrow?: boolean;
+  fill?: boolean;
+  rotateIcon?: boolean;
+}
+
+export interface PrimariaNavTreeMenuConfig {
+  icon: string;
+  label: string;
+  actionMenuItems: PrimariaNavItemConfig[];
+}

package/src/api/api.ts

@@ -47,7 +47,7 @@ export const primariaApiFactory: ApiFactory<PrimariaApi> = (
 ): PrimariaApi => {
   return {
     pluginInfo: pluginInfo,
-    regionManager: createRegionManagerProxy(pluginInfo, regionManager),
+    regionManager: createRegionManagerProxy(pluginInfo, regionManager, broker),
     httpClient: createHttpClient(tokenManager),
     interactionManager: { ...createInteractionManager() },
     broker: broker,