@uxland/primary-shell 5.5.0 → 5.6.1

package/dist/primary/shell/src/UI/components/primaria-shell/shell-header/header-divider/header-divider.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+
+export declare class HeaderDivider extends LitElement {
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}

package/dist/primary/shell/src/UI/components/primaria-shell/shell-header/header-divider/template.d.ts

@@ -0,0 +1,3 @@
+import { HeaderDivider } from './header-divider';
+
+export declare const template: (props: HeaderDivider) => import('lit').TemplateResult<1>;

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

@@ -12,5 +12,6 @@ export declare class PrimariaShellHeader extends PrimariaShellHeader_base {
     toggleMenu(): void;
     logout(): void;
     connectedCallback(): void;
+    firstUpdated(): void;
 }
 export {};

package/dist/primary/shell/src/features/utils.d.ts

@@ -2,7 +2,6 @@ import { Container, interfaces } from 'inversify';
 import { IRequestClass } from '..';
 import { PrimariaApi } from '../api/api';
 
-import Newable = interfaces.Newable;
-export declare const registerRequest: (api: PrimariaApi, container: Container) => (command: IRequestClass<any>, handler: Newable<any>) => {
+export declare const registerRequest: (api: PrimariaApi, container: Container) => (command: IRequestClass<any>, handler: interfaces.Newable<any>) => {
     dispose: () => void;
 };

package/dist/primary/shell/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/component.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 export declare class ActivityHistoryBusy extends LitElement {
     render(): import('lit').TemplateResult<1>;
     static styles: import('lit').CSSResult;
-    isAnyCollectionLoadingWithoutAnyLoaded: boolean;
+    isCollectionInitialState: boolean;
     isSomeCollectionLoadedAndOtherLoading: boolean;
+    get skeletons(): import('lit').TemplateResult<1>[];
 }

package/dist/primary/shell/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/selectors.d.ts

@@ -1,4 +1,4 @@
 import { RootState } from '../../../infrastructure/state/store';
 
-export declare const isAnyCollectionLoadingWithoutAnyLoaded: (state: RootState) => boolean;
 export declare const isSomeCollectionLoadedAndOtherLoading: (state: RootState) => boolean;
+export declare const isCollectionInitialState: (state: RootState) => boolean;

package/dist/primary/shell/src/internal-plugins/activity-history/activity-history-item/list/UI/main-view/activity-history-main.d.ts

@@ -11,6 +11,8 @@ export declare class ActivityHistoryMain extends ActivityHistoryMain_base {
     maximized: boolean;
     api: PrimariaApi;
     historyItems: any[];
+    isCollectionInitialState: boolean;
+    isSomeCollectionLoadedAndOtherLoading: boolean;
     _maximize(): void;
     _minimize(): void;
     _subscribeEvents(): void;

package/dist/primary/shell/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/activity-history-timeline.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, PropertyValues } from 'lit';
+import { IActivityHistoryGroup } from '../../../domain/model';
+
+export declare class ActivityHistoryTimeline extends LitElement {
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+    historyGroups: IActivityHistoryGroup[];
+    isCollectionInitialState: boolean;
+    isSomeCollectionLoadedAndOtherLoading: boolean;
+    searchString: string;
+    private _virtualizer;
+    _hasUpdatedOnce: boolean;
+    firstUpdated(_changeProps: PropertyValues): void;
+    updated(changedProperties: any): Promise<void>;
+    prepareComponents(historyGroups: any): Promise<void>;
+    highlightMatch(text: string, searchString: string): string;
+    highlighted(text?: string): import('lit/directive.js').DirectiveResult<typeof import('lit/directives/unsafe-html.js').UnsafeHTMLDirective> | null;
+    _scrollIntoDate(selectedDate: number): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@primaria/plugins-core": "^1.0.14",
     "@reduxjs/toolkit": "^2.6.1",
-    "@salut/design-system-salut": "../../design-system-salut-2.5.1.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.6.0.tgz",
     "@types/react": "^19.0.12",
     "@uxland/lit-utilities": "^1.0.0",
     "@uxland/localization": "^1.0.3",

package/src/UI/components/bootstrapper.ts

@@ -7,6 +7,7 @@ import { PocEventsEcap } from "./poc-events-ecap/poc-events-ecap";
 import { FinalizeVisitButton } from "../../features/visit/finalize-visit/component/finalize-visit-button";
 import { PrimariaAccordion } from "./primaria-accordion/primaria-accordion";
 import { CommunicationActionMenu } from "./communication-action-menu/communication-action-menu";
+import { HeaderDivider } from "./primaria-shell/shell-header/header-divider/header-divider";
 
 export const useComponents = () => {
   //@ts-ignore
@@ -16,6 +17,7 @@ export const useComponents = () => {
   customElement("primaria-error-view")(PrimariaErrorView);
   customElement("quick-actions-menu")(QuickActionsMenu);
   customElement("finalize-visit-button")(FinalizeVisitButton);
+  customElement('header-divider')(HeaderDivider);
   customElement("communication-action-menu")(CommunicationActionMenu);
   //@ts-ignore
   customElement("poc-events-ecap")(PocEventsEcap);

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

@@ -0,0 +1,13 @@
+import { html, LitElement, css, unsafeCSS } from "lit";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+
+export class HeaderDivider extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+  ${unsafeCSS(styles)}
+`;
+}

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

@@ -0,0 +1,5 @@
+.header-container {
+  width: 1px;
+  height: 40px;
+  background-color: var(--color-neutral-100);
+}

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

@@ -0,0 +1,8 @@
+import { html } from "lit";
+import { HeaderDivider } from "./header-divider";
+
+export const template = (props: HeaderDivider) => {
+  return html`
+    <div class="header-container"></div>
+  `;
+};

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

@@ -44,4 +44,31 @@ export class PrimariaShellHeader extends PrimariaRegionHost(LitElement) {
       this.professional = response;
     });
   }
+
+  firstUpdated() {
+    const container = this.renderRoot?.querySelector('#header-region-container');
+    if (!container) return;
+
+    let observer: MutationObserver;
+
+    const updateDividers = () => {
+      observer.disconnect();
+
+      Array.from(container.querySelectorAll('header-divider')).forEach(div => (div as HTMLElement).remove());
+
+      const children = Array.from(container.children).filter(
+        el => (el as HTMLElement).tagName !== 'HEADER-DIVIDER'
+      );
+
+      for (let i = 1; i < children.length; i++) {
+        const divider = document.createElement('header-divider');
+        container.insertBefore(divider, children[i]);
+      }
+
+      observer.observe(container, { childList: true });
+    };
+
+    observer = new MutationObserver(updateDividers);
+    observer.observe(container, { childList: true });
+  }
 }

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

@@ -1,5 +1,5 @@
 :host {
-  z-index: 101;
+  z-index: 205;
 }
 .header {
   display: flex;
@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 24px;
+    gap: 16px;
 
     .header-logo {
       align-self: center;
@@ -27,7 +27,7 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 24px;
+      gap: 16px;
     }
   }
 
@@ -35,7 +35,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 24px;
+    gap: 16px;
 
     #header-actions-region-container {
       display: flex;

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

@@ -15,11 +15,13 @@ export const template = (props: PrimariaShellHeader) => {
       <div class="header-logo">
         <img src=${salutLogo} alt="logo" />
       </div>
+      <header-divider></header-divider>
       <div id="header-region-container"></div>
     </div>
     <div class="header__right">
       <finalize-visit-button></finalize-visit-button>
       <div id="header-actions-region-container"></div>
+      <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}">

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

@@ -57,16 +57,13 @@
       display: flex;
       flex-direction: column;
       gap: 4px;
-    }
-
-    /*Temporary scrollbar*/
-    #menu-region-container {
       overflow-y: auto;
       margin-right: -14px; 
       padding-right: 14px; 
-      scrollbar-color: var(--color-primary-800) var(--color-primary-700);
+      scrollbar-color: var(--color-primary-200) var(--color-primary-700);
       scrollbar-width: thin;
     }
+
     #menu-region-container::-webkit-scrollbar {
       width: 6px; 
     }
@@ -77,7 +74,6 @@
       background-color: var(--color-primary-400);
       border-radius: 4px;
     }
-    /**/
 
     .bottom-content {
       display: flex;
@@ -140,6 +136,11 @@
     height: 100%;
     flex: 1;
   }
+  #navigation-menu-lower-region-container{
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
   #floating-region-container {
     position: fixed;
     z-index: 300;

package/src/UI/internal-views/handle-views.ts

@@ -10,7 +10,7 @@ export const useInternalViews = () => {
   registerMainViews();
   registerCommunicationNavMenuItem();
   registerUpperNavMenuViews();
-  registerLowerNavMenuViews();
+  // registerLowerNavMenuViews();
 
   registerCommunicationMenuActions();
 };

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

@@ -1,19 +1,2 @@
-import { shellApi } from "../../api/api";
-import { shellRegions } from "../../api/region-manager/regions";
-import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
-
 export const registerLowerNavMenuViews = () => {
-  shellApi.regionManager.registerView(shellRegions.navigationLowerLeftMenu, {
-    id: "configuration-center",
-    factory: () => {
-      const menuItem = new PrimariaNavItem({
-        icon: "settings",
-        label: "Centre de configuració",
-        callbackFn: () => {
-          // shellApi.regionManager.activateView(shellRegions.main, "");
-        },
-      });
-      return Promise.resolve(menuItem);
-    },
-  });
 };

package/src/UI/internal-views/upper-nav-views.ts

@@ -7,6 +7,7 @@ import { CommunicationActionMenu } from "../components/communication-action-menu
 import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
 import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "../shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
+import { GetVisitId } from "../../features/visit/get-visit-id/request";
 
 type MenuItemConfig =
   | {
@@ -56,7 +57,7 @@ const upperNavMenuItems: MenuItemConfig[] = [
     actionMenuItems: [
       {
         icon: "open_in_new",
-        label: "ARES",
+        label: "Proces d'atenció - ARES",
         callbackFn: () => navigateToEcapWithoutClosingWithCip("PROCES_ATENCIO"),
       },
       {
@@ -89,7 +90,7 @@ const upperNavMenuItems: MenuItemConfig[] = [
   {
     id: "unique-petition",
     icon: "playlist_add",
-    label: "Petitori",
+    label: "Peticionari",
     type: "tree",
     sortHint: "0050",
     actionMenuItems: [
@@ -273,8 +274,33 @@ export const registerCommunicationMenuActions = () => {
         });
       },
     },
-    { id: "2", sortHint: "0020", icon: "open_in_new", label: "eConsulta", callbackFn: () => {} },
-    { id: "3", icon: "open_in_new", label: "Mail", callbackFn: () => {} },
+    {
+      id: "2",
+      sortHint: "0020",
+      icon: "open_in_new",
+      label: "eConsulta",
+      callbackFn: async () => {
+        const CIP = await getPatientCip(shellApi);
+        const visiId = (await shellApi.broker.send(new GetVisitId())) as string;
+
+        shellApi.ecapEventManager.publish("NAVEGACIO_ECAP_ECONSULTA", "NO_TANCAR", {
+          CIP: CIP || "",
+          VisiID: visiId || "",
+        });
+      },
+    },
+    {
+      id: "3",
+      icon: "open_in_new",
+      label: "Mail",
+      callbackFn: async () => {
+        const CIP = await getPatientCip(shellApi);
+        shellApi.ecapEventManager.publish("COMUNICACIO_MISSATGES_CREAR", "NO_TANCAR", {
+          CIP: CIP || "",
+          TipusMissatge: "SMS",
+        });
+      },
+    },
     {
       id: "4",
       sortHint: "0030",

package/src/UI/shared-components/primaria-text-editor/styles.css

@@ -964,6 +964,3 @@ button.ql-indent {
 .ql-snow a {
   color: #06c;
 }
-.ql-container.ql-snow {
-
-}

package/src/features/utils.ts

@@ -1,12 +1,12 @@
-import { Container, injectable, interfaces } from "inversify";
+import { Container, injectable } from "inversify";
+import type { interfaces } from "inversify";
 import { IRequest, IRequestClass } from "..";
 import { PrimariaApi } from "../api/api";
-import Newable = interfaces.Newable;
 
 //TODO aixo ho fan ja les Broker extensions de plugins/core. Veure si s'ha de canviar
 export const registerRequest =
   (api: PrimariaApi, container: Container) =>
-  (command: IRequestClass<any>, handler: Newable<any>) => {
+  (command: IRequestClass<any>, handler: interfaces.Newable<any>) => {
     container.bind(handler).to(handler).inTransientScope();
     injectable()(handler);
     const disposable = api.broker.registerRequest(command, (cmd: IRequest<any>) => {

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/component.ts

@@ -3,10 +3,7 @@ import { customElement } from "lit/decorators.js";
 import styles from "./styles.css?inline";
 import { template } from "./template";
 import { connectedProperty } from "../../../../infrastructure/state/connected-property";
-import {
-  isAnyCollectionLoadingWithoutAnyLoaded,
-  isSomeCollectionLoadedAndOtherLoading,
-} from "../selectors";
+import { isSomeCollectionLoadedAndOtherLoading, isCollectionInitialState } from "../selectors";
 
 //@ts-ignore
 @customElement("activity-history-busy")
@@ -19,9 +16,13 @@ export class ActivityHistoryBusy extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
-  @connectedProperty(isAnyCollectionLoadingWithoutAnyLoaded)
-  isAnyCollectionLoadingWithoutAnyLoaded: boolean;
+  @connectedProperty(isCollectionInitialState)
+  isCollectionInitialState: boolean;
 
   @connectedProperty(isSomeCollectionLoadedAndOtherLoading)
   isSomeCollectionLoadedAndOtherLoading: boolean;
+
+  get skeletons() {
+    return Array.from({ length: 12 }, () => html`<dss-skeleton width="100" height="10"></dss-skeleton>`);
+  }
 }

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/styles.css

@@ -1,15 +1,12 @@
 .spinner-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 24px;
-        justify-content: center;
-        padding-top:16px
-      }
-      .spinner-full-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  justify-content: center;
+  padding-top:16px
+}
+.skeleton-container {
+  padding: 20px;
+  height: 100%;
+}

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/template.ts

@@ -3,8 +3,8 @@ import { ActivityHistoryBusy } from "./component";
 import { translate } from "../../../../localization";
 
 export const template = (props: ActivityHistoryBusy) =>
-  props.isAnyCollectionLoadingWithoutAnyLoaded
-    ? html`<div class="spinner-full-container"><dss-spinner></dss-spinner></div>`
+  props.isCollectionInitialState
+    ? html`<div class="skeleton-container">${props.skeletons}</div>`
     : props.isSomeCollectionLoadedAndOtherLoading
       ? html`<div class="spinner-container"><dss-spinner size="sm"></dss-spinner><div class="busy-description">${translate("busyEntriesLoading")}</div></div>`
       : nothing;

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/selectors.ts

@@ -1,13 +1,13 @@
 import { RootState } from "../../../infrastructure/state/store";
 
-const isAnyCollectionBusySelector = (state: RootState) =>
-  state.activityHistoryCollections.busy.length > 0;
-export const isAnyCollectionLoadingWithoutAnyLoaded = (state: RootState) => {
-  const collections = Object.values(state.activityHistoryCollections.collections);
-  return !collections?.length && isAnyCollectionBusySelector(state);
-};
+const isAnyCollectionBusySelector = (state: RootState) => state.activityHistoryCollections.busy.length > 0;
 
 export const isSomeCollectionLoadedAndOtherLoading = (state: RootState) => {
   const collections = Object.values(state.activityHistoryCollections.collections);
   return collections && isAnyCollectionBusySelector(state);
 };
+
+export const isCollectionInitialState = (state: RootState) => {
+  const collections = Object.values(state.activityHistoryCollections.collections);
+  return !collections?.length && !isAnyCollectionBusySelector(state);
+};

package/src/internal-plugins/activity-history/activity-history-item/add/handle-error/selectors.ts

@@ -1,19 +1,17 @@
 import { RootState } from "../../../infrastructure/state/store";
-import { isAnyCollectionLoadingWithoutAnyLoaded, isSomeCollectionLoadedAndOtherLoading } from "../handle-busy/selectors";
+import { isSomeCollectionLoadedAndOtherLoading } from "../handle-busy/selectors";
 
 export const isErrorOccurred = (state: RootState) => state.activityHistoryCollections.error.length > 0;
 
 const areCollectionsEmpty = (state: RootState) => {
   const collections = state.activityHistoryCollections.collections;
 
-  return Object.values(collections).every(collection => {
+  return Object.values(collections).every((collection) => {
     return !collection.items || collection.items.length === 0;
   });
 };
 export const isAllDataFailedToLoad = (state: RootState) => {
-  return !isAnyCollectionLoadingWithoutAnyLoaded(state) && 
-         !isSomeCollectionLoadedAndOtherLoading(state) && 
-         isErrorOccurred(state) && areCollectionsEmpty(state); 
+  return !isSomeCollectionLoadedAndOtherLoading(state) && isErrorOccurred(state) && areCollectionsEmpty(state);
 };
 
-export const selectErrorMessages = (state: RootState) => state.activityHistoryCollections.error;
+export const selectErrorMessages = (state: RootState) => state.activityHistoryCollections.error;

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/search-string-spec.ts

@@ -12,7 +12,7 @@ const commonFieldsSearchPredicate = (item: IActivityHistoryItem, searchString: s
     item.professional?.role?.description && propContainsString(item.professional?.role.description, searchString);
   const serviceNameContainsSearchString = item.service?.description && propContainsString(item.service.description, searchString);
   const diagnosticsMatch = item.diagnostics?.some(
-    (diagnostic) => propContainsString(diagnostic.id, searchString) || propContainsString(diagnostic.description, searchString),
+    (diagnostic) => propContainsString(diagnostic.descripcio, searchString),
   );
   return (
     professionalNameContainsSearchString ||

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/active-filters-badges.ts

@@ -6,9 +6,15 @@ import { PrimariaApi } from "../../../../../../api/api";
 import { TYPES } from "../../../../infrastructure/ioc/types";
 import { template } from "./template";
 import styles from "./styles.css?inline";
-import { activeGroupsWithEnabledFilters } from "../../custom-filters/selectors";
+
 import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
-import { IActivityHistoryCustomFilterGroup, IActivityHistoryDiagnosticsFilter, IActivityHistoryFilter, IActivityHistoryUpFilter } from "../../model";
+import {
+  IActivityHistoryCustomFilter,
+  IActivityHistoryCustomFilterGroup,
+  IActivityHistoryDiagnosticsFilter,
+  IActivityHistoryFilter,
+  IActivityHistoryUpFilter,
+} from "../../model";
 import { activityHistoryEnabledCommonFiltersSelector } from "../../common-filters/selectors";
 import { SetCommonFilter } from "../../common-filters/set-common-filter/request";
 import { diagnosticFilterSelector } from "../../diagnostic-filters/selectors";
@@ -17,6 +23,7 @@ import { ResetCommonFilter } from "../../common-filters/reset-common-filter/requ
 import { ResetCustomFilter } from "../../custom-filters/reset-custom-filter/request";
 import { upFilterSelector } from "../../up-filters/selectors";
 import { SetUpFiltersCommand } from "../../up-filters/set/request";
+import { customFilterGroupsWithOptionsSelector } from "../../../selectors";
 
 //@ts-ignore
 @customElement("active-filters-badges")
@@ -37,12 +44,12 @@ export class ActiveFiltersBadges extends LitElement {
   @connectedProperty(activityHistoryEnabledCommonFiltersSelector)
   enabledCommonFilters: IActivityHistoryFilter[];
 
-  @connectedProperty(activeGroupsWithEnabledFilters)
+  @connectedProperty(customFilterGroupsWithOptionsSelector)
   enabledFilters: IActivityHistoryCustomFilterGroup[];
 
   @connectedProperty(diagnosticFilterSelector)
   diagnosticFilterEnabled: IActivityHistoryDiagnosticsFilter;
-  
+
   @connectedProperty(upFilterSelector)
   upFilterEnabled: IActivityHistoryUpFilter;
 
@@ -63,18 +70,12 @@ export class ActiveFiltersBadges extends LitElement {
 
   _onDeleteDiagnosticFilterValue(diagnosticValue: string) {
     this.api.broker.send(
-      new SetDiagnosticFiltersCommand([
-        ...this.diagnosticFilterEnabled.enabledValues.filter((v) => v !== diagnosticValue),
-      ]),
+      new SetDiagnosticFiltersCommand([...this.diagnosticFilterEnabled.enabledValues.filter((v) => v !== diagnosticValue)]),
     );
   }
 
-    _onDeleteUpFilterValue(upValue: string) {
-    this.api.broker.send(
-      new SetUpFiltersCommand([
-        ...this.upFilterEnabled.enabledValues.filter((v) => v !== upValue),
-      ]),
-    );
+  _onDeleteUpFilterValue(upValue: string) {
+    this.api.broker.send(new SetUpFiltersCommand([...this.upFilterEnabled.enabledValues.filter((v) => v !== upValue)]));
   }
 
   resetFilters() {

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/template.ts

@@ -5,14 +5,14 @@ import { formatShowFilterTitle, normalizeDeletedFilterBooleanValue, normalizeEmp
 
 const MAX_VISIBLE_CHIPS = 5;
 
-const renderChip = (id, filter, value, props) => html`
+const renderChip = (id, filter, option, props) => html`
   <dss-chip
-    label=${normalizeEmptyFilterValue(value, filter.title)}
+    label=${normalizeEmptyFilterValue(option.title, filter.title)}
     size="sm"
     hasdelete
     selected
-    @click=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
-    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
+    @click=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
+    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
   ></dss-chip>
 `;
 
@@ -52,6 +52,7 @@ const renderUpChip = (id, value, props) => html`
 const renderFilterTitle = (title) => html`<div class="filter-title">${`${title}:`}</div>`;
 
 export const template = (props: ActiveFiltersBadges) => {
+  //TODO: refactor chips render
   if (
     props.enabledFilters.length === 0 &&
     props.enabledCommonFilters.length === 0 &&
@@ -97,7 +98,7 @@ export const template = (props: ActiveFiltersBadges) => {
     }
   }
 
-  const up = props.upFilterEnabled;  
+  const up = props.upFilterEnabled;
 
   if (up) {
     const { title, values, enabledValues } = up;
@@ -127,7 +128,7 @@ export const template = (props: ActiveFiltersBadges) => {
         }
       }
     }
-  }  
+  }
 
   for (const filter of props.enabledCommonFilters) {
     const chip = renderCommonChip(filter, props);
@@ -147,7 +148,21 @@ export const template = (props: ActiveFiltersBadges) => {
 
     for (const filter of filters) {
       for (const value of [...new Set(filter.enabledValues)]) {
-        const chip = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
+        let filterOption = filter?.options?.find((o) => o.id === value);
+
+        if (filterOption) {
+          //Fill when filter option doesnt have title (description)
+          filterOption.title = filterOption.title !== "" ? filterOption.title : value;
+        } else {
+          //Hi ha un filtre de curs clinic "veure eliminats" booleà que no serà un filterOption, per tant entra aquí
+          //Aqui es crea el objecte que es passa al chip
+          const deletedFiltersOption = normalizeDeletedFilterBooleanValue(value);
+          filterOption = { title: deletedFiltersOption, id: deletedFiltersOption };
+        }
+
+        //const chip2 = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
+
+        const chip = renderChip(id, filter, filterOption, props);
 
         if (visibleCount < MAX_VISIBLE_CHIPS) {
           if (!titleAddedToVisible) {