@uxland/primary-shell 7.15.2 → 7.17.0

package/dist/primary/shell/src/UI/shared-components/primaria-region/index.d.ts

@@ -0,0 +1 @@
+export { PrimariaRegion } from './primaria-region';

package/dist/primary/shell/src/UI/shared-components/primaria-region/primaria-region.d.ts

@@ -0,0 +1,67 @@
+import { IRegion } from '@uxland/regions';
+declare const PrimariaRegion_base: any;
+/**
+ * PrimariaRegion Web Component
+ *
+ * A plug-and-play region component that allows dynamic region creation without
+ * needing to extend PrimariaRegionHost or use the @region decorator manually.
+ *
+ * Renders in light DOM (no shadow-root) to allow region content to be properly
+ * displayed in the parent's DOM tree.
+ *
+ * @example
+ * ```html
+ * <primaria-region name="diagnostics-region"></primaria-region>
+ * ```
+ *
+ * This component internally handles:
+ * - Creating a container with the appropriate ID
+ * - Setting up the region definition
+ * - Managing the region lifecycle
+ */
+export declare class PrimariaRegion extends PrimariaRegion_base {
+    /**
+     * The name of the region to create.
+     * This will be used both as the region name in the region manager
+     * and to generate the container ID.
+     */
+    name: string;
+    /**
+     * Render in light DOM instead of shadow DOM.
+     * This allows the region content to be visible in the parent's DOM tree.
+     */
+    createRenderRoot(): this;
+    /**
+     * Override shadowRoot getter to return this (light DOM) instead of null.
+     * The region mixin tries to find elements using shadowRoot.querySelector(),
+     * so we need to make it work with light DOM.
+     */
+    get shadowRoot(): ShadowRoot | null;
+    /**
+     * The region instance created by the region host mixin.
+     * Plugins can inject content into this region using the region manager.
+     */
+    region: IRegion | undefined;
+    /**
+     * Virtual constructor for this instance to hold its own region definition.
+     * This prevents conflicts when multiple primaria-region instances exist.
+     */
+    private _instanceConstructor;
+    constructor();
+    /**
+     * Called when the component is connected to the DOM.
+     * Sets up the region definition before the parent connectedCallback runs.
+     */
+    connectedCallback(): void;
+    /**
+     * Called before the component updates.
+     * Updates the region definition if the name changes.
+     */
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    /**
+     * Renders nothing because we create the container div manually in connectedCallback.
+     * This is necessary because the mixin needs the div to exist before it tries to create the region.
+     */
+    render(): import('lit').TemplateResult<1>;
+}
+export {};

package/dist/primary/shell/src/index.d.ts

@@ -6,6 +6,7 @@ export * from './api/api';
 export * from './api/broker/primaria-broker';
 export * from './UI/index';
 export { PrimariaNavItem } from './UI/shared-components/primaria-nav-item/primaria-nav-item';
+export { PrimariaRegion } from './UI/shared-components/primaria-region';
 export { EcapEventManager, createEcapEventManager, } from './api/ecap-event-manager/ecap-event-manager';
 export type { IEcapEvent } from './api/ecap-event-manager/typings';
 export * from '@uxland/harmonix-adapters';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.15.2",
+  "version": "7.17.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/UI/components/bootstrapper.ts

@@ -18,6 +18,7 @@ export const useComponents = () => {
   customElement("quick-actions-menu")(QuickActionsMenu);
   customElement("finalize-visit-button")(FinalizeVisitButton);
   customElement('header-divider')(HeaderDivider);
+  //@ts-ignore
   customElement("communication-action-menu")(CommunicationActionMenu);
   //@ts-ignore
   customElement("poc-events-ecap")(PocEventsEcap);

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

@@ -49,6 +49,13 @@
     .icon {
       margin-left: 8px;
     }
+
+    #menu-region{
+      width: 100%;
+      height: 100%;
+      min-height: 1px;
+    }
+
     #menu-region-container {
       padding-top: 24px;
       min-height: 1px;
@@ -64,16 +71,17 @@
       scrollbar-width: thin;
     }
 
-    #menu-region-container::-webkit-scrollbar {
-      width: 6px; 
-    }
-    #menu-region-container::-webkit-scrollbar-track {
-      background: var(--color-primary-700);
-    }
-    #menu-region-container::-webkit-scrollbar-thumb {
-      background-color: var(--color-primary-400);
-      border-radius: 4px;
-    }
+      #menu-region-container::-webkit-scrollbar {
+        width: 6px; 
+      }
+      #menu-region-container::-webkit-scrollbar-track {
+        background: var(--color-primary-700);
+      }
+      #menu-region-container::-webkit-scrollbar-thumb {
+        background-color: var(--color-primary-400);
+        border-radius: 4px;
+      }
+    
 
     .bottom-content {
       display: flex;

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

@@ -6,6 +6,7 @@ import gencatLogo from "../../../UI/images/Gencat_Logotip.svg";
 import { PrimariaShell } from "./primaria-shell";
 import { shellViews } from "./constants";
 import { translate } from "../../../locales";
+import { shellApi } from "../../../api/api";
 
 export const template = (props: PrimariaShell) => html`
 <primaria-content-switcher id="main-switcher" attrForSelected="view" .selected=${props.viewSelected}>
@@ -13,7 +14,8 @@ export const template = (props: PrimariaShell) => html`
     <primaria-shell-header></primaria-shell-header>
     <div class="main-container">
       <div class="sidebar" ?expanded=${props.sidebarExpanded}>
-        <div id="menu-region-container"></div>
+         <div id="menu-region-container"></div>
+         <!-- <primaria-region id="menu-region" name=${shellApi.regionManager.regions.shell.navigationMenu}></primaria-region> -->
         <div class="quick-actions-content">
           <quick-actions-menu>
             <div class="${props.sidebarExpanded ? "create-button-opened" : "create-button-closed"} " slot="anchor" id="usage-anchor">

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

@@ -4,6 +4,7 @@ import { PrimariaNavItem } from "./primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "./primaria-nav-tree-menu/primaria-nav-tree-menu";
 import { PrimariaRichTextEditor } from "./primaria-text-editor/primaria-rich-text-editor";
 import { PrimariaCharacterLimitBadge } from "./primaria-character-limit-badge/primaria-character-limit-badge";
+import { PrimariaRegion } from "./primaria-region";
 
 export const useSharedUI = () => {
   customElement("primaria-content-switcher")(PrimariaContentSwitcher);
@@ -11,4 +12,5 @@ export const useSharedUI = () => {
   customElement("primaria-rich-text-editor")(PrimariaRichTextEditor);
   customElement("primaria-nav-tree-menu")(PrimariaNavTreeMenu);
   customElement("primaria-character-limit-badge")(PrimariaCharacterLimitBadge);
+   customElement("primaria-region")(PrimariaRegion);
 };

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

@@ -0,0 +1 @@
+export { PrimariaRegion } from "./primaria-region";

package/src/UI/shared-components/primaria-region/primaria-region.ts

@@ -0,0 +1,145 @@
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { IRegion } from "@uxland/regions";
+import { PrimariaRegionHost } from "../../../api/api";
+import { regionsProperty } from "@uxland/regions/region-decorator";
+
+/**
+ * PrimariaRegion Web Component
+ *
+ * A plug-and-play region component that allows dynamic region creation without
+ * needing to extend PrimariaRegionHost or use the @region decorator manually.
+ *
+ * Renders in light DOM (no shadow-root) to allow region content to be properly
+ * displayed in the parent's DOM tree.
+ *
+ * @example
+ * ```html
+ * <primaria-region name="diagnostics-region"></primaria-region>
+ * ```
+ *
+ * This component internally handles:
+ * - Creating a container with the appropriate ID
+ * - Setting up the region definition
+ * - Managing the region lifecycle
+ */
+export class PrimariaRegion extends PrimariaRegionHost(LitElement) {
+  /**
+   * The name of the region to create.
+   * This will be used both as the region name in the region manager
+   * and to generate the container ID.
+   */
+  @property({ type: String })
+  name = "";
+
+  /**
+   * Render in light DOM instead of shadow DOM.
+   * This allows the region content to be visible in the parent's DOM tree.
+   */
+  createRenderRoot() {
+    return this;
+  }
+
+  /**
+   * Override shadowRoot getter to return this (light DOM) instead of null.
+   * The region mixin tries to find elements using shadowRoot.querySelector(),
+   * so we need to make it work with light DOM.
+   */
+  get shadowRoot(): ShadowRoot | null {
+    return this as any;
+  }
+
+  /**
+   * The region instance created by the region host mixin.
+   * Plugins can inject content into this region using the region manager.
+   */
+  region: IRegion | undefined;
+
+  /**
+   * Virtual constructor for this instance to hold its own region definition.
+   * This prevents conflicts when multiple primaria-region instances exist.
+   */
+  private _instanceConstructor: any;
+
+  constructor() {
+    super();
+
+    // Create a unique constructor object for this instance
+    // This allows each instance to have its own region definition
+    // without affecting other instances of the same component
+    this._instanceConstructor = Object.create(this.constructor);
+
+    // Override the constructor property to return our instance constructor
+    Object.defineProperty(this, "constructor", {
+      get: () => this._instanceConstructor,
+      configurable: true,
+    });
+  }
+
+  /**
+   * Called when the component is connected to the DOM.
+   * Sets up the region definition before the parent connectedCallback runs.
+   */
+  connectedCallback(): void {
+    // First, call the base LitElement connectedCallback but NOT the mixin yet
+    // We need to do this in a special order
+    LitElement.prototype.connectedCallback.call(this);
+
+    if (this.name) {
+      const targetId = `${this.name}-container`;
+
+      // Create the container div immediately in the light DOM
+      const container = document.createElement("div");
+      container.id = targetId;
+      container.style.cssText = "width: 100%; height: 100%; min-height: 1px";
+      this.appendChild(container);
+
+      // Set the region metadata directly on the instance constructor
+      this._instanceConstructor[regionsProperty] = {
+        ...this._instanceConstructor[regionsProperty],
+        region: { targetId, name: this.name },
+      };
+
+      // The mixin creates regions in the `updated()` lifecycle, not in connectedCallback
+      // So we need to trigger the updated lifecycle or call createRegions directly
+      // Let's check if the component has the create method from the mixin
+      if ((this as any).create) {
+        (this as any).create();
+      }
+
+      // Also manually call the mixin's connectedCallback if it exists
+      const litProto = Object.getPrototypeOf(this);
+      const mixinProto = Object.getPrototypeOf(litProto);
+
+      if (mixinProto.connectedCallback) {
+        mixinProto.connectedCallback.call(this);
+      }
+    }
+  }
+
+  /**
+   * Called before the component updates.
+   * Updates the region definition if the name changes.
+   */
+  protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changedProperties);
+
+    // If the name changed after connection, update the region definition
+    if (this.name && changedProperties.has("name")) {
+      const targetId = `${this.name}-container`;
+      this._instanceConstructor[regionsProperty] = {
+        ...this._instanceConstructor[regionsProperty],
+        region: { targetId, name: this.name },
+      };
+    }
+  }
+
+  /**
+   * Renders nothing because we create the container div manually in connectedCallback.
+   * This is necessary because the mixin needs the div to exist before it tries to create the region.
+   */
+  render() {
+    // Don't render anything - the container is created in connectedCallback
+    return html``;
+  }
+}

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./api/api";
 export * from "./api/broker/primaria-broker";
 export * from "./UI/index";
 export { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
+export { PrimariaRegion } from "./UI/shared-components/primaria-region";
 export {
   EcapEventManager,
   createEcapEventManager,