@uxland/primary-shell 3.2.7 → 3.3.0

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/components/dialog-component.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
-import { IConfirmMixin } from '../confirm-mixin';
-import { ConfirmOptions, CustomConfirmOptions } from '../typings';
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions } from '../typings';
 
 export declare class DialogComponent extends LitElement {
     render(): import('lit').TemplateResult<1>;
@@ -10,8 +9,8 @@ export declare class DialogComponent extends LitElement {
     _cancel(e: any): void;
     _accept(e: any): void;
     componentCloseRequest(e: CustomEvent): void;
-    close(result: boolean): Promise<void>;
-    getCustomComponent(): IConfirmMixin | any;
+    close(result: ConfirmResult): Promise<void>;
+    getCustomComponent(): any;
     acceptButton: HTMLElement;
     actionsContainer: HTMLElement;
     header: HTMLElement;

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/confirm-mixin.d.ts

@@ -1,16 +1,11 @@
 import { LitElement } from 'lit';
-import { Constructor } from './typings';
+import { ConfirmResult, Constructor } from './typings';
 
-export interface IConfirmMixin {
-    model: any;
-    close(result: boolean): void;
-    canAccept(): Promise<boolean> | boolean;
-    accept(): Promise<void> | void;
-}
 export declare class ConfirmMixinBase {
     model: any;
-    close(result: boolean): void;
+    outputModel: any;
+    close(result: ConfirmResult): void;
     canAccept(): Promise<boolean> | boolean;
-    accept(): Promise<void> | void;
+    accept(result: ConfirmResult): Promise<ConfirmResult>;
 }
 export declare function confirmMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<ConfirmMixinBase> & T;

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

@@ -1,3 +1,3 @@
-import { ConfirmOptions, CustomConfirmOptions } from './typings';
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions } from './typings';
 
-export declare const doConfirm: (options: (ConfirmOptions & CustomConfirmOptions) | any) => Promise<any>;
+export declare const confirm: (options: (ConfirmOptions & CustomConfirmOptions) | any) => Promise<ConfirmResult>;

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

@@ -1,4 +1,5 @@
 export * from './confirm';
 export * from './notify';
+export * from './open-dialog';
 export * from './confirm-mixin';
 export * from './typings';

package/dist/primary/shell/src/UI/shared-components/primaria-interaction/open-dialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogOptions } from './typings';
+
+export declare const openDialog: (options: DialogOptions | any) => void;

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

@@ -0,0 +1,3 @@
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions } from './typings';
+
+export declare const buildDialogComponent: (options: DialogOptions & ConfirmOptions & CustomConfirmOptions) => Promise<ConfirmResult>;

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

@@ -7,18 +7,23 @@ export interface ConfirmOptions {
     type: ConfirmType;
     acceptLabel: string;
     cancelLabel: string;
-    modal?: boolean;
 }
 export interface CustomConfirmOptions<T = any> {
     title: string;
     componentConstructor: Constructor<LitElement | any>;
     type: ConfirmType;
-    modal?: boolean;
     acceptLabel?: string;
     cancelLabel?: string;
     model?: T;
     fullCustomization?: boolean;
 }
+export interface DialogOptions<T = any> {
+    title: string;
+    componentConstructor: Constructor<LitElement | any>;
+    model?: T;
+    showCloseButton?: boolean;
+    fullCustomization?: boolean;
+}
 export type ConfirmType = "danger" | "warning" | "info" | "success";
 export interface NotifyOptions {
     message?: string;
@@ -26,6 +31,10 @@ export interface NotifyOptions {
     position?: NotifyPosition;
     order?: string;
 }
+export interface ConfirmResult<T = any> {
+    confirmed: boolean;
+    outputModel?: T;
+}
 export type NotifyOrder = "first" | "second" | "third" | "fourth" | "fifth";
 export type NotifyPosition = "bottom" | "center" | "top";
 export type NotifyType = "danger" | "warning" | "info" | "success" | "error";

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

@@ -1,8 +1,9 @@
-import { ConfirmOptions, CustomConfirmOptions, NotifyOptions } from '../../UI/shared-components/primaria-interaction';
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions, NotifyOptions } from '../../UI/shared-components/primaria-interaction';
 
 export interface PrimariaInteractionManager {
-    notify(options: NotifyOptions): Promise<any>;
-    doConfirm(options: ConfirmOptions): Promise<boolean>;
-    doCustomConfirm(options: CustomConfirmOptions): Promise<boolean>;
+    notify(options: NotifyOptions): void;
+    confirm(options: ConfirmOptions): Promise<ConfirmResult>;
+    customConfirm(options: CustomConfirmOptions): Promise<ConfirmResult>;
+    openDialog(options: DialogOptions): void;
 }
 export declare const createInteractionManager: () => PrimariaInteractionManager;

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

@@ -6,7 +6,7 @@ export * from './api/api';
 export * from './api/broker/primaria-broker';
 export { PrimariaMenuItem } from './UI/shared-components/primaria-menu-item/primaria-menu-item';
 export { confirmMixin } from './UI/shared-components/primaria-interaction';
-export type { IConfirmMixin, CustomConfirmOptions, } from './UI/shared-components/primaria-interaction';
+export type { CustomConfirmOptions } from './UI/shared-components/primaria-interaction';
 export { EcapEventManager, createEcapEventManager, } from './api/ecap-event-manager/ecap-event-manager';
 export type { IEcapEvent } from './api/ecap-event-manager/typings';
 export * from './internal-plugins';

package/package.json

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

package/src/UI/shared-components/primaria-interaction/components/dialog-component-styles.css

@@ -34,12 +34,15 @@
     .dialog__header {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: center;
       padding: 24px;
       border-top-left-radius: 8px;
       border-top-right-radius: 8px;
-      justify-content: center;
       align-items: center;
+
+      &.with-close{
+        justify-content: space-between;
+      }
       h2 {
         color: var(--color-neutral-900);
         padding: 0;

package/src/UI/shared-components/primaria-interaction/components/dialog-component.ts

@@ -1,7 +1,13 @@
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { when } from "lit/directives/when.js";
 import { customElement, property, query } from "lit/decorators.js";
-import { IConfirmMixin } from "../confirm-mixin";
-import { ConfirmOptions, ConfirmType, CustomConfirmOptions } from "../typings";
+import {
+  ConfirmOptions,
+  ConfirmResult,
+  ConfirmType,
+  CustomConfirmOptions,
+  DialogOptions,
+} from "../typings";
 import styles from "./dialog-component-styles.css?inline";
 
 const dssToConfirmTypeClass = (type: ConfirmType) => {
@@ -28,9 +34,9 @@ const renderActions = (props: DialogComponent) => {
 const renderMessage = (options: ConfirmOptions) =>
   html` <div id="message">${options.message || ""}</div> `;
 
-function renderCustomContent(options: CustomConfirmOptions, props: DialogComponent) {
-  if (options.componentConstructor) {
-    const component = new options.componentConstructor() as LitElement;
+function renderCustomContent(props: DialogComponent) {
+  if (props.options.componentConstructor) {
+    const component = new props.options.componentConstructor() as LitElement;
     component.setAttribute("id", "__custom-element__");
     component.addEventListener("closed", props.componentCloseRequest.bind(props));
     return html`${component}`;
@@ -38,33 +44,36 @@ function renderCustomContent(options: CustomConfirmOptions, props: DialogCompone
   return nothing;
 }
 
+function renderDefaultContent(props: DialogComponent) {
+  const showClose = (props.options as DialogOptions).showCloseButton;
+  return html`<div class="dialog__header ${props.options.type} ${showClose ? "with-close" : ""}">
+            <h2 part="title">${props.options.title || ""}</h2>
+            ${when(
+              showClose,
+              () =>
+                html`<dss-icon-button size="md" icon="cancel" @click="${
+                  props._cancel
+                }"></dss-icon-button>`,
+              () => nothing,
+            )}
+          </div>
+          <div class="dialog__content">
+            ${when(
+              props.options.message,
+              () => renderMessage(props.options),
+              () => renderCustomContent(props),
+            )}
+          </div>
+          ${renderActions(props)}`;
+}
+
 @customElement("dialog-component")
 export class DialogComponent extends LitElement {
   render() {
     return html`
-      <div
-        class="modal"
-        @click=${(e) => e.target === this.modal && !this.options.modal && this.close(false)}
-      >
-        <div
-          class="dialog"
-        >
-        ${
-          this.options.fullCustomization
-            ? renderCustomContent(this.options, this)
-            : html`<div class="dialog__header ${this.options.type}">
-            <h2 part="title">${this.options.title || ""}</h2>
-          </div>
-          <div class="dialog__content">
-            ${
-              this.options.message
-                ? renderMessage(this.options)
-                : renderCustomContent(this.options, this)
-            }
-          </div>
-          ${renderActions(this)}`
-        }
-          
+      <div class="modal">
+        <div class="dialog">
+        ${this.options.fullCustomization ? renderCustomContent(this) : renderDefaultContent(this)}
         </div>
       </div>
     `;
@@ -83,33 +92,34 @@ export class DialogComponent extends LitElement {
   modal: any;
 
   _cancel(e) {
-    console.log("canceling modal");
-    this.close(false);
+    this.close({ confirmed: false });
   }
 
   _accept(e) {
-    console.log("accepting modal");
-    this.close(true);
+    this.close({ confirmed: true });
   }
 
   componentCloseRequest(e: CustomEvent) {
     this.close(e.detail);
   }
 
-  async close(result: boolean) {
-    if (result) {
+  async close(result: ConfirmResult) {
+    let finalResult = result;
+    if (finalResult?.confirmed) {
       const component = this.getCustomComponent();
       if (component?.canAccept) {
         const canAccept = await component.canAccept();
         if (!canAccept) return;
-        if (component.accept) await component.accept();
+      }
+      if (component?.accept) {
+        finalResult = await component.accept(finalResult);
       }
     }
+    this.dispatchEvent(new CustomEvent("closed", { detail: finalResult }));
     this.modal.style.display = "none";
-    this.dispatchEvent(new CustomEvent("closed", { detail: result }));
   }
 
-  getCustomComponent(): IConfirmMixin | any {
+  getCustomComponent(): any {
     return this.shadowRoot?.querySelector("#__custom-element__");
   }
 

package/src/UI/shared-components/primaria-interaction/confirm-mixin.ts

@@ -1,34 +1,30 @@
 import { dedupeMixin } from "@uxland/lit-utilities";
 import { LitElement } from "lit";
 import { property } from "lit/decorators.js";
-import { Constructor } from "./typings";
-
-export interface IConfirmMixin {
-  model: any;
-  close(result: boolean): void;
-  canAccept(): Promise<boolean> | boolean;
-  accept(): Promise<void> | void;
-}
+import { ConfirmResult, Constructor } from "./typings";
 
 export declare class ConfirmMixinBase {
   model: any;
-  close(result: boolean): void;
+  outputModel: any;
+  close(result: ConfirmResult): void;
   canAccept(): Promise<boolean> | boolean;
-  accept(): Promise<void> | void;
+  accept(result: ConfirmResult): Promise<ConfirmResult>;
 }
 
 const ConfirmMixin = dedupeMixin(<T extends Constructor<LitElement>>(superClass: T) => {
   class ConfirmMixinClass extends superClass implements ConfirmMixinBase {
     @property()
     model: T;
-    close(result: boolean) {
+    @property()
+    outputModel: T;
+    close(result: ConfirmResult) {
       (this as any).dispatchEvent(new CustomEvent("closed", { detail: result }));
     }
     canAccept(): Promise<boolean> | boolean {
       return Promise.resolve(true);
     }
-    accept(): Promise<void> | void {
-      return Promise.resolve();
+    accept(result: ConfirmResult): Promise<ConfirmResult> {
+      return Promise.resolve(result);
     }
   }
   return ConfirmMixinClass as Constructor<ConfirmMixinBase> & T;

package/src/UI/shared-components/primaria-interaction/confirm.ts

@@ -1,30 +1,9 @@
 import "./components/dialog-component";
-import { ConfirmOptions, CustomConfirmOptions } from "./typings";
+import { buildDialogComponent } from "./shared";
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions } from "./typings";
 
-export const doConfirm = async (
+export const confirm = async (
   options: (ConfirmOptions & CustomConfirmOptions) | any,
-): Promise<any> => {
-  if (!options.message && !options.componentConstructor) {
-    throw new Error("message, componentConstructor options properties are required");
-  }
-  return new Promise((resolve) => {
-    const component: any = document.body.appendChild(document.createElement("dialog-component"));
-
-    component.options = options;
-    const result = component.updateComplete;
-
-    result.then(() => {
-      if (options.componentConstructor) {
-        const customComponent = component.shadowRoot.querySelector(`#__custom-element__`);
-        customComponent.model = options.model;
-      }
-      component.addEventListener("closed", closeComponent);
-      component.options && component.show();
-    });
-
-    function closeComponent(e: { detail: any }) {
-      component.remove();
-      resolve(e.detail);
-    }
-  });
+): Promise<ConfirmResult> => {
+  return buildDialogComponent(options);
 };

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

@@ -1,4 +1,5 @@
 export * from "./confirm";
 export * from "./notify";
+export * from "./open-dialog";
 export * from "./confirm-mixin";
 export * from "./typings";

package/src/UI/shared-components/primaria-interaction/open-dialog.ts

@@ -0,0 +1,8 @@
+import "./components/dialog-component";
+import { buildDialogComponent } from "./shared";
+import { DialogOptions } from "./typings";
+
+export const openDialog = (options: DialogOptions | any): void => {
+  options.showCloseButton = "showCloseButton" in options ? options.showCloseButton : true;
+  buildDialogComponent(options);
+};

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

@@ -0,0 +1,29 @@
+import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions } from "./typings";
+
+export const buildDialogComponent = (
+  options: DialogOptions & ConfirmOptions & CustomConfirmOptions,
+): Promise<ConfirmResult> => {
+  if (!options.message && !options.componentConstructor) {
+    throw new Error("message, componentConstructor options properties are required");
+  }
+  return new Promise((resolve) => {
+    const component: any = document.body.appendChild(document.createElement("dialog-component"));
+
+    component.options = options;
+    const result = component.updateComplete;
+
+    result.then(() => {
+      if (options.componentConstructor) {
+        const customComponent = component.shadowRoot.querySelector("#__custom-element__");
+        customComponent.model = options.model;
+      }
+      component.addEventListener("closed", closeComponent);
+      component.options && component.show();
+    });
+
+    function closeComponent(e: { detail: ConfirmResult }) {
+      component.remove();
+      resolve(e.detail);
+    }
+  });
+};

package/src/UI/shared-components/primaria-interaction/typings.ts

@@ -7,20 +7,26 @@ export interface ConfirmOptions {
   type: ConfirmType;
   acceptLabel: string;
   cancelLabel: string;
-  modal?: boolean;
 }
 
 export interface CustomConfirmOptions<T = any> {
   title: string;
   componentConstructor: Constructor<LitElement | any>;
   type: ConfirmType;
-  modal?: boolean;
   acceptLabel?: string;
   cancelLabel?: string;
   model?: T;
   fullCustomization?: boolean;
 }
 
+export interface DialogOptions<T = any> {
+  title: string;
+  componentConstructor: Constructor<LitElement | any>;
+  model?: T;
+  showCloseButton?: boolean;
+  fullCustomization?: boolean;
+}
+
 export type ConfirmType = "danger" | "warning" | "info" | "success";
 
 export interface NotifyOptions {
@@ -30,6 +36,11 @@ export interface NotifyOptions {
   order?: string;
 }
 
+export interface ConfirmResult<T = any> {
+  confirmed: boolean;
+  outputModel?: T;
+}
+
 export type NotifyOrder = "first" | "second" | "third" | "fourth" | "fifth";
 export type NotifyPosition = "bottom" | "center" | "top";
 export type NotifyType = "danger" | "warning" | "info" | "success" | "error";

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

@@ -1,21 +1,26 @@
 import {
   ConfirmOptions,
+  ConfirmResult,
   CustomConfirmOptions,
+  DialogOptions,
   NotifyOptions,
-  doConfirm,
+  confirm,
   notify,
+  openDialog,
 } from "../../UI/shared-components/primaria-interaction";
 
 export interface PrimariaInteractionManager {
-  notify(options: NotifyOptions): Promise<any>;
-  doConfirm(options: ConfirmOptions): Promise<boolean>;
-  doCustomConfirm(options: CustomConfirmOptions): Promise<boolean>;
+  notify(options: NotifyOptions): void;
+  confirm(options: ConfirmOptions): Promise<ConfirmResult>;
+  customConfirm(options: CustomConfirmOptions): Promise<ConfirmResult>;
+  openDialog(options: DialogOptions): void;
 }
 
 export const createInteractionManager: () => PrimariaInteractionManager = () => {
   return {
     notify: (options: NotifyOptions) => notify(options),
-    doConfirm: (options: ConfirmOptions) => doConfirm(options),
-    doCustomConfirm: (options: CustomConfirmOptions) => doConfirm(options),
+    confirm: (options: ConfirmOptions) => confirm(options),
+    customConfirm: (options: CustomConfirmOptions) => confirm(options),
+    openDialog: (options: DialogOptions) => openDialog(options),
   } as PrimariaInteractionManager;
 };

package/src/index.ts

@@ -7,10 +7,7 @@ export * from "./api/broker/primaria-broker";
 import "./UI/index";
 export { PrimariaMenuItem } from "./UI/shared-components/primaria-menu-item/primaria-menu-item";
 export { confirmMixin } from "./UI/shared-components/primaria-interaction";
-export type {
-  IConfirmMixin,
-  CustomConfirmOptions,
-} from "./UI/shared-components/primaria-interaction";
+export type { CustomConfirmOptions } from "./UI/shared-components/primaria-interaction";
 export {
   EcapEventManager,
   createEcapEventManager,

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

@@ -7,11 +7,10 @@ export class ExportToPdfHandler {
   constructor(@inject(TYPES.primaryApi) private api: PrimariaApi) {}
   async handle() {
     try {
-      this.api.interactionManager.doCustomConfirm({
+      this.api.interactionManager.customConfirm({
         title: "Exportar a PDF",
         componentConstructor: ExportPdfModal,
         type: "info",
-        modal: true,
         cancelLabel: "Cancel·lar",
         acceptLabel: "Exportar",
       });