@uxland/primary-shell 5.7.0 → 6.0.0

package/dist/primary/shell/src/api/interaction-service/interaction-service-impl.d.ts

@@ -1,7 +1,6 @@
-import { ConfirmationContentProps, ConfirmationOptions, ConfirmationResult, ConfirmationWithResultContentProps, PrimariaInteractionService } from './interaction-service';
+import { ConfirmationOptions, ConfirmationResult, ConfirmComponentUI, PrimariaInteractionService } from './interaction-service';
 
-import * as React from "react";
 export declare class ParimariaInteractionServiceImpl extends PrimariaInteractionService {
-    confirm<TData = undefined, TResult = undefined>(data: TData | undefined, DialogComponent: React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>> | (new () => HTMLElement), options?: ConfirmationOptions | undefined): Promise<ConfirmationResult<TResult | undefined>>;
+    confirm<TData = undefined, TResult = undefined>(data: TData | undefined, componentUI: ConfirmComponentUI<TData, TResult>, options?: ConfirmationOptions | undefined): Promise<ConfirmationResult<TResult | undefined>>;
     confirmMessage(message: string, options?: ConfirmationOptions | undefined): Promise<ConfirmationResult>;
 }

package/dist/primary/shell/src/api/interaction-service/interaction-service.d.ts

@@ -26,7 +26,11 @@ export interface ConfirmationOptions {
     closeOnOutsideClick?: boolean | undefined;
     state?: "success" | "info" | "alert" | "error";
 }
+export interface ConfirmComponentUI<TData = undefined, TResult = undefined> {
+    component: React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>> | (new () => HTMLElement);
+    styles?: string;
+}
 export declare abstract class PrimariaInteractionService {
-    abstract confirm<TData = undefined, TResult = undefined>(data: TData | undefined, dialogComponent: React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>> | (new () => HTMLElement), options?: ConfirmationOptions | undefined): Promise<ConfirmationResult<TResult | undefined>>;
+    abstract confirm<TData = undefined, TResult = undefined>(data: TData | undefined, componentUI: ConfirmComponentUI<TData, TResult>, options?: ConfirmationOptions | undefined): Promise<ConfirmationResult<TResult | undefined>>;
     abstract confirmMessage(message: string, options?: ConfirmationOptions | undefined): Promise<ConfirmationResult>;
 }

package/package.json

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

package/src/api/interaction-service/interaction-service-impl.tsx

@@ -1,8 +1,7 @@
 import {
-  ConfirmationContentProps,
   ConfirmationOptions,
   ConfirmationResult,
-  ConfirmationWithResultContentProps,
+  ConfirmComponentUI,
   PrimariaInteractionService,
 } from "./interaction-service";
 import * as React from "react";
@@ -25,19 +24,24 @@ const defaultOptions: ConfirmationOptions = {
 export class ParimariaInteractionServiceImpl extends PrimariaInteractionService {
   confirm<TData = undefined, TResult = undefined>(
     data: TData | undefined,
-    DialogComponent:
-      | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
-      | (new () => HTMLElement),
-    options?: ConfirmationOptions | undefined,
+    componentUI: ConfirmComponentUI<TData, TResult>,
+    options?: ConfirmationOptions | undefined
   ): Promise<ConfirmationResult<TResult | undefined>> {
     const finalOptions: ConfirmationOptions = { ...defaultOptions, ...(options || {}) };
     return new Promise((resolve) => {
       const div = document.createElement("div");
       document.body.appendChild(div);
-      const style = document.createElement("style");
-      style.textContent = modalStyles;
-
-      document.head.appendChild(style);
+      const wrapperHeadStyles = document.createElement("style");
+      wrapperHeadStyles.textContent = modalStyles;
+      document.head.appendChild(wrapperHeadStyles);
+      const DialogComponent = componentUI.component;
+      const DialogComponentStyles = componentUI.styles;
+      let componentHeadStyles;
+      if(DialogComponentStyles) {
+        componentHeadStyles = document.createElement("style");
+        componentHeadStyles.textContent = componentUI?.styles;
+        document.head.appendChild(componentHeadStyles);
+      }
 
       const DialogWrapper = () => {
         const [result, setResult] = useState<ConfirmationResult<TResult | undefined>>();
@@ -106,7 +110,9 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
             };
             resolve(confirmationResult);
             document.body.removeChild(div);
-            document.head.removeChild(style);
+            document.head.removeChild(wrapperHeadStyles);
+            if (DialogComponentStyles)
+              document.head.removeChild(componentHeadStyles);
             window.removeEventListener('keydown', handleKeydown);
           }, 300);
         };
@@ -198,6 +204,6 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
     message: string,
     options?: ConfirmationOptions | undefined,
   ): Promise<ConfirmationResult> {
-    return this.confirm(message, ConfirmationMessage, options);
+    return this.confirm(message, {component: ConfirmationMessage}, options);
   }
 }

package/src/api/interaction-service/interaction-service.ts

@@ -31,12 +31,16 @@ export interface ConfirmationOptions {
   state?: "success" | "info" | "alert" | "error";
 }
 
+export interface ConfirmComponentUI<TData = undefined, TResult = undefined> {
+  component: | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
+  | (new () => HTMLElement);
+  styles?: string;
+}
+
 export abstract class PrimariaInteractionService {
   abstract confirm<TData = undefined, TResult = undefined>(
     data: TData | undefined,
-    dialogComponent:
-      | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
-      | (new () => HTMLElement),
+    componentUI: ConfirmComponentUI<TData, TResult>,
     options?: ConfirmationOptions | undefined,
   ): Promise<ConfirmationResult<TResult | undefined>>;
   abstract confirmMessage(

package/src/features/exit/handler.test.ts

@@ -74,8 +74,8 @@ describe("ExitShellHandler", () => {
 
     await handler.handle(message);
 
-    expect(mockApi.interactionService.confirm).toHaveBeenCalledWith({ busyTasks }, PluginBusyList, {
-      title: expect.any(String),
+    expect(mockApi.interactionService.confirm).toHaveBeenCalledWith({ busyTasks }, {component: PluginBusyList}, {
+      title: "actions.askExit",
       state: "error",
       confirmButtonText: "Sí",
       cancelButtonText: "No",

package/src/features/exit/handler.ts

@@ -23,7 +23,7 @@ export class ExitShellHandler {
       // Per si un plugin tarda molt en fer dispose, màxim deixarem 5 segons, per no interrompre el tancar infinitament
       await Promise.race([
         disposePlugins(), // S'intenta executar un dispose normal
-        this.timeout(5000), // Si passen 5s, es segueix amb l'execució
+        this.timeout(10000), // Si passen 5s, es segueix amb l'execució
       ]);
       disposeShell();
       this.emitClose(evt);
@@ -34,7 +34,7 @@ export class ExitShellHandler {
   }
 
   private askForClose(busyTasks: PluginBusyTask[]) {
-    return this.api.interactionService.confirm({ busyTasks }, PluginBusyList, {
+    return this.api.interactionService.confirm({ busyTasks }, {component: PluginBusyList}, {
       title: translate("actions.askExit"),
       state: "error",
       confirmButtonText: "Sí",

package/src/internal-plugins/activity-history/activity-history-item/export-to-pdf/handler.ts

@@ -5,7 +5,7 @@ import { ExportPdfModal } from "./export-pdf-modal/export-pdf-modal";
 export class ExportToPdfHandler extends ApiBaseHandler {
   async handle() {
     try {
-      this.api.interactionService.confirm(undefined, ExportPdfModal, {
+      this.api.interactionService.confirm(undefined, {component: ExportPdfModal}, {
         title: translate("modal.selectExportOption"),
         confirmButtonText: "Exportar",
         cancelButtonText: "Cancelar",

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

@@ -9,6 +9,7 @@ import {
   IActivityHistoryFilter,
 } from "../../model";
 import { translate } from "../../../../localization";
+import { when } from "lit/directives/when.js";
 
 const filterTemplates = {
   [ActivityHistoryFilterType.Switch]: (id, title, handleChange, isSelected, isEnabled) => html`
@@ -108,8 +109,10 @@ const customFilterTemplate = (
   group: IActivityHistoryCustomFilterGroup,
 ) => {
   if (filter.type === ActivityHistoryFilterType.Dropdown) {
-    const elements = filter?.options.map(option => ({ value: option.id, label: option.title || option.id }));
-    return html`
+    const elements = filter?.options.map((option) => ({ value: option.id, label: option.title || option.id }));
+    return when(
+      elements.length > 0,
+      () => html`
       <dss-input-dropdown
         inputsize="md"
         icon=""
@@ -117,28 +120,30 @@ const customFilterTemplate = (
         dropdownFixed
         type="default"
         .elements=${elements}
-        @onInputDropdownChange=${(e) =>
-          props._onChangeCustomFilterAllValues(group.id, filter.id, e.detail.selectedValue)
-        }
+        @onInputDropdownChange=${(e) => props._onChangeCustomFilterAllValues(group.id, filter.id, e.detail.selectedValue)}
         .selectedValue=${filter.enabledValues}
         selectorStyle="max-height: 450px"
       >
         <label slot="label">${filter.title}</label>
         <input slot="input" type="text" class="dss-input" autocomplete="off" />
       </dss-input-dropdown>
-    `;
+    `,
+    );
   }
 
   return filter.singleOption
     ? getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group)
-    : html`
+    : when(
+        !!filter.options?.length,
+        () => html`
         <primaria-accordion isOpen>
           <div class="custom-filter-title" slot="title">${filter.title}</div>
           <div class="custom-filter-content" slot="content">
-            ${filter.options.map(option =>
-              getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group, option)
+            ${filter.options.map((option) =>
+              getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group, option),
             )}
           </div>
         </primaria-accordion>
-      `;
+      `,
+      );
 };