@uxland/primary-shell 3.4.1 → 3.5.1

package/src/api/broker/factory.ts

@@ -1,9 +1,21 @@
-import { HarmonixBroker, IEvent, IEventClass, IRequest, IRequestClass } from "@uxland/harmonix";
+import { IEvent, IEventClass, IRequest, IRequestClass } from "@uxland/harmonix";
 import { Mediator, mediatorSettings, notificationHandler, requestHandler } from "mediatr-ts";
-import { PrimariaBroker } from "./primaria-broker";
+import { type PrimariaBroker, type BrokerDisposableHandler } from "./primaria-broker";
 
 type messageHandler = (payload: unknown) => unknown | Promise<unknown>;
 
+const disposableFactory = (handler: any) => {
+  return {
+    dispose: () => {
+      mediatorSettings.resolver.remove(handler.name);
+      const mappingIndex = mediatorSettings.dispatcher.notifications._mappings.findIndex(
+        (mapping) => mapping.handler.name === handler.name,
+      );
+      mappingIndex > -1 &&
+        mediatorSettings.dispatcher.notifications._mappings.splice(mappingIndex, 1);
+    },
+  };
+};
 class Broker implements PrimariaBroker {
   private mediator: Mediator;
   constructor() {
@@ -41,29 +53,34 @@ class Broker implements PrimariaBroker {
   subscribe<TEvent extends IEvent>(
     event: TEvent,
     handler: (message: TEvent) => void,
-  ): HarmonixBroker;
-  subscribe<TPayload>(eventName: string, handler: (message: TPayload) => void): HarmonixBroker;
-  subscribe(event: string | IEventClass, handler: messageHandler): HarmonixBroker {
+  ): BrokerDisposableHandler;
+  subscribe<TPayload>(
+    eventName: string,
+    handler: (message: TPayload) => void,
+  ): BrokerDisposableHandler;
+  subscribe(event: string | IEventClass, handler: messageHandler): BrokerDisposableHandler {
     const eventType = typeof event === "function" ? event : this.getEventType(event as string);
-    notificationHandler(eventType)(createDynamicEventHandler(handler));
-    return this;
+    const wrappedHandler = createDynamicEventHandler(handler);
+    notificationHandler(eventType)(wrappedHandler);
+    return disposableFactory(wrappedHandler);
   }
   registerRequest<TRequest extends IRequest<TResponse>, TResponse>(
     request: TRequest,
     handler: (message: TRequest) => TResponse,
-  ): HarmonixBroker;
+  ): BrokerDisposableHandler;
   registerRequest<TPayload, TResponse>(
     requestName: string,
     handler: (message: TPayload) => TResponse,
-  ): HarmonixBroker;
+  ): BrokerDisposableHandler;
   registerRequest(
     request: string | IRequestClass<unknown>,
     handler: messageHandler,
-  ): HarmonixBroker {
+  ): BrokerDisposableHandler {
     const requestType =
       typeof request === "function" ? request : this.getRequestType(request as string);
-    requestHandler(requestType)(createDynamicRequestHandler(handler));
-    return this;
+    const wrappedHandler = createDynamicRequestHandler(handler);
+    requestHandler(requestType)(wrappedHandler);
+    return disposableFactory(wrappedHandler);
   }
 
   private getEvent(eventName: string, payload: unknown): IEvent {

package/src/api/broker/primaria-broker.ts

@@ -9,3 +9,5 @@ export type {
   IRequest,
   IRequestClass,
 } from "@uxland/harmonix";
+
+export type { BrokerDisposableHandler } from "@uxland/harmonix";

package/src/api/ecap-event-manager/ecap-event-manager.ts

@@ -25,7 +25,7 @@ class EcapEventManagerImpl implements EcapEventManager {
   }
   private raiseEcapEvent(ecapEvent: IEcapEvent) {
     if (window.parent) window.parent.postMessage(JSON.stringify(ecapEvent), "*");
-    console.log("metod", JSON.stringify(ecapEvent));
+    console.log("method", JSON.stringify(ecapEvent));
   }
 }
 

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

@@ -1,7 +1,9 @@
 import { HarmonixRegionManager, IRegionManager, HarmonixViewDefinition } from "@uxland/harmonix";
-import { PluginInfo } from "../../plugin";
+import { PluginInfo } from "../../handle-plugins";
 import { IRegion } from "@uxland/regions";
 import { shellRegions } from "./regions";
+import { PrimariaBroker } from "../broker/primaria-broker";
+import { shellEvents } from "../../events";
 
 export interface PrimariaRegionManager extends HarmonixRegionManager {
   registerQuickAction(view: HarmonixViewDefinition): Promise<void>;
@@ -15,6 +17,7 @@ class RegionManagerProxy implements PrimariaRegionManager {
   constructor(
     private pluginInfo: PluginInfo,
     private regionManager: IRegionManager,
+    private broker: PrimariaBroker,
   ) {}
   /**
    * Register a view in a specific region.
@@ -51,6 +54,7 @@ class RegionManagerProxy implements PrimariaRegionManager {
    */
   activateView(regionName: string, viewId: string): Promise<void> {
     this.regionManager.getRegion(regionName).activate(`${this.pluginInfo.pluginId}::${viewId}`);
+    if (regionName === shellRegions.main) this._notifyMainViewChanged(viewId);
     return Promise.resolve();
   }
   /**
@@ -123,6 +127,7 @@ class RegionManagerProxy implements PrimariaRegionManager {
     this.regionManager
       .getRegion(shellRegions.main)
       .activate(`${this.pluginInfo.pluginId}::${viewId}`);
+    this._notifyMainViewChanged(viewId);
     return Promise.resolve();
   }
 
@@ -131,6 +136,10 @@ class RegionManagerProxy implements PrimariaRegionManager {
       .currentActiveViews[0] as HarmonixViewDefinition;
     return mainView?.id;
   }
+
+  _notifyMainViewChanged(viewId: string) {
+    this.broker.publish(shellEvents.mainViewChanged, { viewId });
+  }
 }
 
 /**
@@ -143,4 +152,5 @@ class RegionManagerProxy implements PrimariaRegionManager {
 export const createRegionManagerProxy = (
   pluginInfo: PluginInfo,
   regionManager: IRegionManager,
-): PrimariaRegionManager => new RegionManagerProxy(pluginInfo, regionManager);
+  broker: PrimariaBroker,
+): PrimariaRegionManager => new RegionManagerProxy(pluginInfo, regionManager, broker);

package/src/api/token-manager/token-manager.test.ts

@@ -13,7 +13,7 @@ describe("Token Manager test", () => {
   it("should return initial token", () => {
     const tokenManager = createTokenManager();
     expect(tokenManager.getToken()).toBe(access_token);
-  });
+  });  
 
   it("should refresh token", async () => {
     const tokenManager = createTokenManager();

package/src/bootstrapper.ts

@@ -0,0 +1,16 @@
+import { selectableAdapterFactory as factory, regionAdapterRegistry } from "@uxland/regions";
+import "./UI/components/primaria-error-view/component";
+import { PrimariaShell } from "./UI/components/primaria-shell/primaria-shell";
+import { shellApi } from "./api/api";
+import { bootstrapFeatures } from "./features/bootstrapper";
+import { registerInternalViews } from "./handle-views";
+import { initializeLocalization } from "./locales";
+
+export const initializeShell = (hostAppElement: HTMLElement) => {
+  initializeLocalization(shellApi);
+  regionAdapterRegistry.registerAdapterFactory("primaria-content-switcher", factory);
+  const shell = new PrimariaShell();
+  hostAppElement.appendChild(shell as any);
+  registerInternalViews();
+  bootstrapFeatures(shellApi);
+};

package/src/constants.ts

@@ -1,2 +1,3 @@
 export const primariaShellId = "primaria-shell";
 export const clinicalMonitoringId = "clinical-monitoring";
+export const pocTestEventsId = "poc-events-ecap";

package/src/disposer.ts

@@ -0,0 +1,10 @@
+import { shellApi } from "./api/api";
+import { teardownFeatures } from "./features/bootstrapper";
+export const disposeShell = () => {
+  shellApi.ecapEventManager.publish("CLOSE_REQUESTED_RECEIVED", "", {});
+  teardownFeatures();
+};
+
+export const raiseCloseEvent = () => {
+  shellApi.ecapEventManager.publish("CLOSE_FORM", "", {});
+};

package/src/events.ts

@@ -1,3 +1,5 @@
 export const shellEvents = {
   openClinicalMonitoringRequested: "openClinicalMonitoringRequested",
+  appCrashed: "appCrashed",
+  mainViewChanged: "mainViewChanged",
 };

package/src/features/bootstrapper.ts

@@ -1,13 +1,16 @@
-import { PrimariaApi } from "@uxland/primary-shell";
+import { PrimariaApi, shellApi } from "../api/api";
 import { container } from "../infrastructure/ioc/container";
 import { TYPES } from "../infrastructure/ioc/types";
 import { bootstrapGetUserInfo, teardownGetUserInfo } from "./get-user-info/bootstrapper";
+import { GetUserInfo } from "./get-user-info/request";
 
 export const bootstrapFeatures = (api: PrimariaApi) => {
   container.bind(TYPES.primaryApi).toConstantValue(api);
   bootstrapGetUserInfo();
+  shellApi.broker.send(new GetUserInfo());
 };
 
 export const teardownFeatures = () => {
   teardownGetUserInfo();
+  container.unbindAll();
 };

package/src/features/get-user-info/bootstrapper.ts

@@ -1,17 +1,20 @@
 import { shellApi } from "../../api/api";
+import { BrokerDisposableHandler } from "../../api/broker/primaria-broker";
 import { container, registerDep, unregisterDep } from "../../infrastructure/ioc/container";
-import { registerRequest, unregisterRequest } from "../utils";
+import { registerRequest } from "../utils";
 import { GetUserInfoBackendAdapter } from "./backend-adapter";
 import { GetUserInfoHandler } from "./handler";
 import { GetUserInfo } from "./request";
 
+let request: BrokerDisposableHandler;
+
 export const bootstrapGetUserInfo = () => {
   teardownGetUserInfo();
-  registerRequest(shellApi, container)(GetUserInfo, GetUserInfoHandler);
+  request = registerRequest(shellApi, container)(GetUserInfo, GetUserInfoHandler);
   registerDep(GetUserInfoBackendAdapter);
 };
 
 export const teardownGetUserInfo = () => {
-  unregisterRequest(container)(GetUserInfoHandler);
+  request?.dispose();
   unregisterDep(GetUserInfoBackendAdapter);
 };

package/src/features/utils.ts

@@ -9,12 +9,14 @@ export const registerRequest =
   (command: IRequestClass<any>, handler: Newable<any>) => {
     container.bind(handler).to(handler).inTransientScope();
     injectable()(handler);
-    api.broker.registerRequest(command, (cmd: IRequest<any>) => {
+    const disposable = api.broker.registerRequest(command, (cmd: IRequest<any>) => {
       const handlerInstance = container.get(handler);
       return handlerInstance.handle(cmd);
     });
+    return {
+      dispose: () => {
+        container.isBound(handler) && container.unbind(handler);
+        disposable.dispose();
+      },
+    };
   };
-
-export const unregisterRequest = (container: Container) => (handler: Newable<any>) => {
-  container.isBound(handler) && container.unbind(handler);
-};

package/src/{plugin.ts → handle-plugins.ts}

@@ -5,7 +5,7 @@ import {
   initialize as activityHistoryInitialize,
   dispose as activityHistoryDispose,
 } from "./internal-plugins/activity-history/main";
-import { PrimariaApi, primariaApiFactory } from "./api/api";
+import { PrimariaApi, primariaApiFactory, shellApi } from "./api/api";
 
 const internalPlugins: PluginDefinition[] = [
   {
@@ -18,9 +18,14 @@ const internalPlugins: PluginDefinition[] = [
   },
 ];
 
-export const bootstrapPlugins = (plugins: PluginDefinition[]) => {
+export const bootstrapPlugins = async (plugins: PluginDefinition[]) => {
   const finalPlugins = internalPlugins.concat(plugins || []);
-  pluginBootstrapper(finalPlugins, primariaApiFactory);
+  const bootstrappedPlugins = await pluginBootstrapper(finalPlugins, primariaApiFactory);
+  return bootstrappedPlugins as Plugin[];
+};
+
+export const disposePlugins = async (plugins: Plugin[]) => {
+  return Promise.all(plugins.map((plugin) => plugin.dispose(shellApi)));
 };
 
 export type Plugin = PluginType<PrimariaApi>;

package/src/handle-views.ts

@@ -0,0 +1,279 @@
+import { shellApi } from "./api/api";
+import { shellRegions } from "./api/region-manager/regions";
+import { clinicalMonitoringId, pocTestEventsId } from "./constants";
+import { shellEvents } from "./events";
+import { ClinicalMonitoring } from "./UI/components/clinical-monitoring/clinical-monitoring";
+import { PocEventsEcap } from "./UI/components/poc-events-ecap/poc-events-ecap";
+import { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
+import { PrimariaNavTreeMenu } from "./UI/shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
+
+const registerUpperNavMenuViews = () => {
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: pocTestEventsId,
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "bolt",
+        label: "Prova Events ECAP",
+        callbackFn: () => {
+          shellApi.regionManager.activateMainView(pocTestEventsId);
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+    options: {
+      sortHint: "000100",
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "communication",
+    factory: () => {
+      const menuItem = new PrimariaNavTreeMenu({
+        icon: "add_box",
+        label: "Comunicació",
+        actionMenuItems: [
+          {
+            icon: "open_in_new",
+            label: "SMS",
+            callbackFn: () => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Econsulta",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Mail",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Veu IP",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Videoconsulta",
+            callbackFn: (): void => {},
+          },
+        ],
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "visits",
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "Visites",
+        callbackFn: () => {
+          // shellApi.regionManager.activateView(shellRegions.main, "");
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "it",
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "IT",
+        callbackFn: async (): Promise<void> => {
+          const CIP = (await shellApi.broker.send("get_patient_cip")) as string;
+          shellApi.ecapEventManager.publish("CRIDA_DOCS_USU", "NO_TANCAR", {
+            CIP: CIP || "",
+          });
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "unique-petition",
+    factory: () => {
+      const menuItem = new PrimariaNavTreeMenu({
+        icon: "add_box",
+        label: "Petitori únic",
+        actionMenuItems: [
+          {
+            icon: "open_in_new",
+            label: "Analítiques",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "OC",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "OC Exprés",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Sol·licitud de trasllat",
+            callbackFn: (): void => {},
+          },
+        ],
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "results-reports",
+    factory: () => {
+      const menuItem = new PrimariaNavTreeMenu({
+        icon: "add_box",
+        label: "Resultats i informes",
+        actionMenuItems: [
+          {
+            icon: "open_in_new",
+            label: "Resultats i informes ECAP",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Documents usuari",
+            callbackFn: async (): Promise<void> => {
+              const CIP = (await shellApi.broker.send("get_patient_cip")) as string;
+
+              setTimeout(() => {
+                shellApi.ecapEventManager.publish("CRIDA_DOCS_USU", "NO_TANCAR", {
+                  CIP: CIP || "",
+                });
+              }, 0);
+            },
+          },
+        ],
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "processes",
+    factory: () => {
+      const menuItem = new PrimariaNavTreeMenu({
+        icon: "add_box",
+        label: "Processos",
+        actionMenuItems: [
+          {
+            icon: "open_in_new",
+            label: "ARES",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Nen sa",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Procés Obstètric",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Odontologia",
+            callbackFn: (): void => {},
+          },
+          {
+            icon: "open_in_new",
+            label: "Situació d'especial cura",
+            callbackFn: (): void => {},
+          },
+        ],
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "variable activities",
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "Activitats variables",
+        callbackFn: async () => {
+          const CIP = (await shellApi.broker.send("get_patient_cip")) as string;
+          shellApi.ecapEventManager.publish("IA_DEV", "NO_TANCAR", {
+            CIP: CIP || "",
+          });
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: clinicalMonitoringId,
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "Seguiment clínic",
+        callbackFn: () => {
+          shellApi.regionManager.activateMainView(clinicalMonitoringId);
+          shellApi.broker.publish(shellEvents.openClinicalMonitoringRequested);
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "landing",
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "Pàgina inici",
+        callbackFn: () => {},
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+};
+
+const registerLowerNavMenuViews = () => {
+  shellApi.regionManager.registerView(shellRegions.navigationLowerLeftMenu, {
+    id: "configuration-center",
+    factory: () => {
+      const menuItem = new PrimariaNavItem({
+        icon: "add_box",
+        label: "Centre de configuració",
+        callbackFn: () => {
+          // shellApi.regionManager.activateView(shellRegions.main, "");
+        },
+      });
+      return Promise.resolve(menuItem);
+    },
+  });
+};
+
+const registerMainViews = () => {
+  shellApi.regionManager.registerMainView({
+    id: clinicalMonitoringId,
+    factory: () => {
+      const mainItem = new ClinicalMonitoring();
+      return Promise.resolve(mainItem as unknown as HTMLElement);
+    },
+    options: {
+      isDefault: true,
+    },
+  });
+  shellApi.regionManager.registerMainView({
+    id: pocTestEventsId,
+    factory: () => {
+      const mainItem = new PocEventsEcap();
+      return Promise.resolve(mainItem as unknown as HTMLElement);
+    },
+  });
+};
+
+export const registerInternalViews = () => {
+  registerMainViews();
+  registerUpperNavMenuViews();
+  registerLowerNavMenuViews();
+};
+
+export const activateDefaultView = () => {
+  shellApi.regionManager.activateMainView(clinicalMonitoringId);
+};

package/src/index.ts

@@ -1,11 +1,12 @@
 import "reflect-metadata";
-export * from "./initializer";
+export * from "./bootstrapper";
+export * from "./disposer";
 export * from "./api/region-manager/regions";
-export * from "./plugin";
+export * from "./handle-plugins";
 export * from "./api/api";
 export * from "./api/broker/primaria-broker";
 import "./UI/index";
-export { PrimariaMenuItem } from "./UI/shared-components/primaria-menu-item/primaria-menu-item";
+export { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
 export { confirmMixin } from "./UI/shared-components/primaria-interaction";
 export type { CustomConfirmOptions } from "./UI/shared-components/primaria-interaction";
 export {
@@ -15,3 +16,4 @@ export {
 export type { IEcapEvent } from "./api/ecap-event-manager/typings";
 export * from "./internal-plugins";
 export * from "@uxland/harmonix-adapters";
+export * from "./events";

package/src/internal-plugins/activity-history/components/activity-history/activity-history-search-header/activity-history-search-header.ts

@@ -0,0 +1,20 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+
+//@ts-ignore
+@customElement("activity-history-search-header")
+export class ActivityHistorySearchHeader extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @property()
+  searchQuery = "";
+
+}

package/src/internal-plugins/activity-history/components/activity-history/activity-history-search-header/styles.css

@@ -0,0 +1,14 @@
+.search-header {
+  padding-inline: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  gap: var(--dds-spacing-xs);
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #D8D8D8;
+  background-color: #FFFFFF;
+  color: var(--color-neutral-900);
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+}

package/src/internal-plugins/activity-history/components/activity-history/activity-history-search-header/template.ts

@@ -0,0 +1,8 @@
+import { html } from "lit";
+import { ActivityHistorySearchHeader } from "./activity-history-search-header";
+import { translate } from "../../../localization";
+
+export const template = (props: ActivityHistorySearchHeader) =>
+  html`<div class="search-header">
+    ${translate("searchBarResults")} “${props.searchQuery}”
+  </div>`;

package/src/internal-plugins/activity-history/components/activity-history/activity-history-timeline/activity-history-timeline.ts

@@ -1,7 +1,12 @@
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { PrimariaRegionHost } from "../../../../../api/api";
 import { customElement } from "lit/decorators.js";
-import { activityHistoryGroupedItems } from "../../../infrastructure/state/selectors";
+import {
+  activityHistoryGroupedItems,
+  activityHistorySearchStringSelector,
+  isAnyCollectionLoadingWithoutAnyLoaded,
+  isSomeCollectionLoadedAndOtherLoading,
+} from "../../../infrastructure/state/selectors";
 import { connectedProperty } from "../../../infrastructure/state/connected-property";
 import styles from "./styles.css?inline";
 import { template } from "./template";
@@ -20,4 +25,25 @@ export class ActivityHistoryTimeline extends PrimariaRegionHost(LitElement) {
 
   @connectedProperty(activityHistoryGroupedItems)
   historyGroups: IActivityHistoryGroup[];
+
+  @connectedProperty(isAnyCollectionLoadingWithoutAnyLoaded)
+  isAnyCollectionLoadingWithoutAnyLoaded: boolean;
+
+  @connectedProperty(isSomeCollectionLoadedAndOtherLoading)
+  isSomeCollectionLoadedAndOtherLoading: boolean;
+
+  @connectedProperty(activityHistorySearchStringSelector)
+  searchString: string;
+
+  _hasUpdatedOnce = false;
+
+  firstUpdated() {
+    this._hasUpdatedOnce = true;
+  }
+
+  highlightMatch(text: string, searchString: string): string {
+    if (!this.searchString || this.searchString.length < 2) return text;
+    const regex = new RegExp(`(${searchString})`, "gi");
+    return text.replace(regex, `<span class="highlight">$1</span>`);
+  }
 }