@uxland/primary-shell 7.34.3 → 7.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.34.3",
+  "version": "7.35.1",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@primaria/plugins-core": "^1.0.14",
-    "@salut/design-system-salut": "../../design-system-salut-2.11.0.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.13.2.tgz",
     "@types/react": "^19.0.12",
     "@uxland/lit-utilities": "^1.0.0",
     "@uxland/localization": "^1.0.3",

package/src/UI/components/bootstrapper.ts

@@ -8,6 +8,7 @@ import { FinalizeVisitButton } from "../../features/visit/finalize-visit/compone
 import { PrimariaAccordion } from "./primaria-accordion/primaria-accordion";
 import { CommunicationActionMenu } from "./communication-action-menu/communication-action-menu";
 import { ClinicalPathwaysActionMenu } from "./clinical-pathways-action-menu/clinical-pathways-action-menu";
+import { PetitionerActionMenu } from "./petitioner-action-menu/petitioner-action-menu";
 import { HeaderDivider } from "./primaria-shell/shell-header/header-divider/header-divider";
 
 export const useComponents = () => {
@@ -24,6 +25,8 @@ export const useComponents = () => {
   //@ts-ignore
   customElement("clinical-pathways-action-menu")(ClinicalPathwaysActionMenu);
   //@ts-ignore
+  customElement("petitioner-action-menu")(PetitionerActionMenu);
+  //@ts-ignore
   customElement("poc-events-ecap")(PocEventsEcap);
   customElement("primaria-accordion")(PrimariaAccordion);
 };

package/src/UI/components/nav-divider/nav-divider.ts

@@ -0,0 +1,41 @@
+import { regionView } from "@uxland/regions";
+import { LitElement, PropertyValues, css, html, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+
+export class NavDivider extends regionView(LitElement) {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  @state()
+  expanded = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+  }
+
+  firstUpdated(_changedProps: PropertyValues<NavDivider>) {
+    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;
+        this.expanded = width > 100;
+      }
+    });
+
+    observer.observe(parentElement as HTMLElement);
+  }
+}
+
+customElements.define("primaria-nav-divider", NavDivider);

package/src/UI/components/nav-divider/styles.css

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.divider-container {
+  display: flex;
+  justify-content: center;
+}
+
+.divider-container hr {
+  margin: 0;
+}
+
+.divider-opened {
+  width: 220px;
+}
+
+.divider-closed {
+  width: 40px;
+}

package/src/UI/components/nav-divider/template.ts

@@ -0,0 +1,8 @@
+import { html } from "lit";
+import { NavDivider } from "./nav-divider";
+
+export const template = (props: NavDivider) => html`
+  <div class="divider-container">
+    <hr class="${props.expanded ? "divider-opened" : "divider-closed"}" />
+  </div>
+`;

package/src/UI/components/petitioner-action-menu/petitioner-action-menu.ts

@@ -0,0 +1,47 @@
+import { LitElement, html, css, unsafeCSS, PropertyValues } from "lit";
+import { template } from "./template";
+import { property, state } from "lit/decorators.js";
+import { IRegion, region } from "@uxland/regions";
+import { PrimariaRegionHost, shellApi } from "../../../api/api";
+import styles from "./styles.css?inline";
+
+export class PetitionerActionMenu extends PrimariaRegionHost(LitElement) {
+  constructor(icon: string, label: string) {
+    super();
+    this.icon = icon;
+    this.label = label;
+  }
+
+  @state() showText = false;
+
+  @region({ targetId: "petitioner-sidenav-region-container", name: shellApi.regionManager.regions.shell.petitionerSidenav })
+  petitionerSidenavRegion: IRegion | undefined;
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  firstUpdated(_changedProps: PropertyValues<PetitionerActionMenu>) {
+    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;
+        this.showText = width > 100;
+      }
+    });
+
+    observer.observe(parentElement as HTMLElement);
+  }
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  @property({ type: String }) icon = "";
+  @property({ type: String }) label = "";
+}

package/src/UI/components/petitioner-action-menu/styles.css

@@ -0,0 +1,29 @@
+.item {
+  display: flex;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 8px;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+  &[expanded] {
+    justify-content: space-between;
+  }
+  &:hover {
+    background-color: var(--color-primary-900);
+    color: white;
+  }
+  .icon-label {
+    display: flex;
+    gap: 8px;
+    transition: background-color 0.3s;
+  }
+}
+
+.item.active{
+  outline: 2px solid white;
+  outline-offset: -2px;
+}
+
+dss-tooltip {
+  pointer-events: none;
+}

package/src/UI/components/petitioner-action-menu/template.ts

@@ -0,0 +1,24 @@
+import { html, nothing } from "lit";
+import { PetitionerActionMenu } from "./petitioner-action-menu";
+
+export const template = (props: PetitionerActionMenu) => {
+  return html`
+    <div class="item" ?expanded=${props.showText}>
+      <div class="icon-label">
+        <dss-icon icon=${props.icon} size="md"></dss-icon>
+        ${props.showText ? html`<span>${props.label}</span>` : ""}
+        ${
+          !props.showText
+            ? html`
+          <dss-tooltip position="right">
+            ${props.label}
+          </dss-tooltip>`
+            : nothing
+        }
+      </div>
+      <dss-action-menu id="petitioner-sidenav-region-container" slot="content" >
+      </dss-action-menu>
+      ${props.showText ? html`<dss-icon icon="chevron_right" size="md"></dss-icon>` : nothing}
+    </div>
+  `;
+};

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

@@ -11,6 +11,8 @@
   box-shadow:
     rgba(0, 0, 0, 0.12) 4px -1px 3px,
     rgba(0, 0, 0, 0.24) 0px 1px 2px;
+  position: relative;
+  z-index: 998;
   .header__left {
     display: flex;
     flex-direction: row;

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

@@ -23,7 +23,7 @@ export const template = (props: PrimariaShellHeader) => {
       <header-divider></header-divider>
       ${when(
         props.professional,
-        () => html`<dss-header-menu-professional @onExit=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
+        () => html`<dss-header-menu-professional tooltipFixed @onExit=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
         <dss-avatar size="xl" name="${props.professional.firstName}" surname="${props.professional?.familyName}" slot="avatar"></dss-avatar>
         <dss-input-dropdown icon="maps_home_work" type="default" .elements=${workCenterElements} selectedvalue="[&quot;1&quot;]">
             <label slot="label" for="preferences1">${translate("header.workCenter")}</label>

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

@@ -57,7 +57,7 @@
     }
 
     #menu-region-container {
-      padding-top: 24px;
+      padding-top: 15px;
       min-height: 1px;
       height: 100%;
       width: 100%;

package/src/UI/internal-views/administrative-nav-menu.ts

@@ -3,7 +3,7 @@ import { navigateToEcap } from "../../features/navigate-to-ecap/navigate-to-ecap
 import { GetVisitId } from "../../features/visit/get-visit-id/request";
 import { shellApi } from "../../api/api";
 import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
-import { MenuItemConfig, registerNavMenuViews, registerCommunicationNavMenu } from "./common-nav-menu";
+import { MenuItemConfig, registerNavMenuViews, registerCommunicationNavMenu, registerNavMenuDivider } from "./common-nav-menu";
 
 const administrativeNavMenuItems: MenuItemConfig[] = [
   {
@@ -300,4 +300,5 @@ export const registerAdministrativeNavMenuViews = () => {
   registerCommunicationNavMenu();
   registerAdministrativeCommunicationMenuActions();
   registerNavMenuViews(administrativeNavMenuItems);
+  registerNavMenuDivider();
 };

package/src/UI/internal-views/common-nav-menu.ts

@@ -1,6 +1,7 @@
 import { shellApi } from "../../api/api";
 import { ExitShell } from "../../features/exit/request";
 import { CommunicationActionMenu } from "../components/communication-action-menu/communication-action-menu";
+import { NavDivider } from "../components/nav-divider/nav-divider";
 import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "../shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
 
@@ -35,8 +36,8 @@ export type MenuItemConfig =
 export const commonNavMenuItems = [
   {
     id: "landing",
-    icon: "home",
-    label: "Pàgina inici",
+    icon: "door_front",
+    label: "Sortir de l’usuari",
     type: "item",
     sortHint: "0010",
     callbackFn: () => shellApi.broker.send(new ExitShell("OBRIR_PI")),
@@ -80,3 +81,14 @@ export const registerCommunicationNavMenu = () => {
     },
   });
 };
+
+export const registerNavMenuDivider = () => {
+  shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.navigationMenu, {
+    id: "nav-divider",
+    sortHint: "0020",
+    factory: () => {
+      const divider = new NavDivider();
+      return Promise.resolve(divider);
+    },
+  });
+};

package/src/UI/internal-views/doctor-nav-menu.ts

@@ -4,7 +4,8 @@ import { GetVisitId } from "../../features/visit/get-visit-id/request";
 import { shellApi } from "../../api/api";
 import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
 import { ClinicalPathwaysActionMenu } from "../components/clinical-pathways-action-menu/clinical-pathways-action-menu";
-import { MenuItemConfig, registerNavMenuViews, registerCommunicationNavMenu } from "./common-nav-menu";
+import { PetitionerActionMenu } from "../components/petitioner-action-menu/petitioner-action-menu";
+import { MenuItemConfig, registerNavMenuViews, registerCommunicationNavMenu, registerNavMenuDivider } from "./common-nav-menu";
 
 const doctorNavMenuItems: MenuItemConfig[] = [
   {
@@ -15,35 +16,6 @@ const doctorNavMenuItems: MenuItemConfig[] = [
     sortHint: "0030",
     callbackFn: () => navigateToEcap("IA_DEV"),
   },
-  {
-    id: "unique-petition",
-    icon: "playlist_add",
-    label: "Peticionari",
-    type: "tree",
-    sortHint: "0050",
-    actionMenuItems: [
-      {
-        icon: "open_in_new",
-        label: "Analítiques",
-        callbackFn: () => navigateToEcap("LABORATORI"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Ordres Clíniques",
-        callbackFn: () => navigateToEcap("RESULT_OC"),
-      },
-      {
-        icon: "open_in_new",
-        label: "OC Exprés",
-        callbackFn: () => navigateToEcap("OC_EXPRES"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Sol·licitud de trasllat",
-        callbackFn: () => navigateToEcap("TRANSPORT"),
-      },
-    ],
-  },
   {
     id: "analytics-monitoring", // id correcta?
     icon: "science",
@@ -260,10 +232,67 @@ export const registerDoctorClinicalPathwaysMenuActions = () => {
   }
 };
 
+export const registerPetitionerNavMenu = () => {
+  shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.navigationMenu, {
+    id: "petitioner",
+    sortHint: "0050",
+    factory: () => {
+      const menuItem = new PetitionerActionMenu("playlist_add", "Peticionari");
+      return Promise.resolve(menuItem as any);
+    },
+  });
+};
+
+export const registerDoctorPetitionerMenuActions = () => {
+  const petitionerItems = [
+    {
+      id: "1",
+      sortHint: "0010",
+      icon: "open_in_new",
+      label: "Analítiques",
+      callbackFn: () => navigateToEcap("LABORATORI"),
+    },
+    {
+      id: "2",
+      sortHint: "0020",
+      icon: "open_in_new",
+      label: "Ordres Clíniques",
+      callbackFn: () => navigateToEcap("RESULT_OC"),
+    },
+    {
+      id: "3",
+      sortHint: "0030",
+      icon: "open_in_new",
+      label: "OC Exprés",
+      callbackFn: () => navigateToEcap("OC_EXPRES"),
+    },
+    {
+      id: "4",
+      sortHint: "0040",
+      icon: "open_in_new",
+      label: "Sol·licitud de trasllat",
+      callbackFn: () => navigateToEcap("TRANSPORT"),
+    },
+  ];
+  for (const item of petitionerItems) {
+    shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.petitionerSidenav, {
+      id: item.id,
+      sortHint: item.sortHint,
+      factory: () => {
+        const menuItem = new QuickActionItem(item.icon, item.label, item.callbackFn);
+        return Promise.resolve(menuItem as any);
+      },
+    });
+  }
+};
+
 export const registerDoctorNavMenuViews = () => {
   registerCommunicationNavMenu();
   registerDoctorCommunicationMenuActions();
   registerClinicalPathwaysNavMenu();
   registerDoctorClinicalPathwaysMenuActions();
+  registerPetitionerNavMenu();
+  registerDoctorPetitionerMenuActions();
   registerNavMenuViews(doctorNavMenuItems);
+  registerNavMenuDivider();
 };

package/src/api/interaction-service/modal-styles.css

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   position: fixed;
-  z-index: 400;
+  z-index: 999;
   left: 0;
   top: 0;
   width: 100%;

package/src/api/region-manager/regions.ts

@@ -8,6 +8,7 @@ export const shellRegions = {
   floating: "floating-region",
   communicationSidenav: "communication-sidenav-region",
   clinicalPathwaysSidenav: "clinical-pathways-sidenav-region",
+  petitionerSidenav: "petitioner-sidenav-region",
   importData: "import-data-region",
 };
 

package/src/features/visit/finalize-visit/component/template.ts

@@ -4,6 +4,6 @@ import { translate } from "../../../../locales";
 
 export const template = (props: FinalizeVisitButton) => {
   return html`
-    <dss-button @click=${props.finalizeVisitHandler} variant="subtle" size="md" icon="door_front" label=${translate("actions.finalizeVisit")}></dss-button>
+    <dss-button @click=${props.finalizeVisitHandler} variant="secondary" size="md" icon="check" label=${translate("actions.finalizeVisit")}></dss-button>
   `;
 };

package/src/index.ts

@@ -17,6 +17,7 @@ export * from "./api/broker/primaria-broker";
 export type { PrimariaContextManager, EcapContext } from "./api/context-manager/context-manager";
 export * from "./UI/index";
 export { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
+export { QuickActionItem } from "./UI/shared-components/quick-action-item/quick-action-item";
 export { PrimariaRegion } from "./UI/shared-components/primaria-region";
 export {
   EcapEventManager,