@uxland/primary-shell 7.41.7 → 7.41.8

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

@@ -22,10 +22,13 @@ export interface ConfirmationOptions {
     showCancelButton?: boolean | undefined;
     confirmButtonText?: string | undefined;
     cancelButtonText?: string | undefined;
+    confirmButtonIcon?: string | undefined;
+    cancelButtonIcon?: string | undefined;
     showCloseButton?: boolean | undefined;
     fullCustomization?: boolean | undefined;
     closeOnOutsideClick?: boolean | undefined;
     state?: "success" | "info" | "alert" | "error";
+    hideIcon?: boolean;
 }
 export interface ConfirmComponentUI<TData = undefined, TResult = undefined> {
     component: React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>> | (new () => HTMLElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.41.7",
+  "version": "7.41.8",
   "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

@@ -19,6 +19,7 @@ const defaultOptions: ConfirmationOptions = {
   showCloseButton: true,
   fullCustomization: false,
   closeOnOutsideClick: false,
+  hideIcon: false
 };
 
 export class ParimariaInteractionServiceImpl extends PrimariaInteractionService {
@@ -126,9 +127,18 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
         };
 
         const getCancelButtonVariant = () => {
-          if (finalOptions.state) return "alternative-dark";
           return "secondary";
         };
+        const getHeadIconVariantClass = () => {
+          if (finalOptions.state === "alert") return "warning";
+          if (finalOptions.state === "error") return "danger";
+          return "";
+        };
+        const getHeadIcon = () => {
+          if (finalOptions.state === "alert") return "error";
+          if (finalOptions.state === "error") return "warning";
+          return "";
+        };
 
         const _renderContent = () => {
           return isWebComponent ? (
@@ -151,7 +161,19 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
             <div className="dialog" ref={dialogRef}>
               {!finalOptions.fullCustomization && (
                 <div className="dss-dialog-header">
-                  <div className="dss-dialog-header-title">{finalOptions.title}</div>
+                  <div className="dialog-header-wrapper">
+                    <div className="dss-dialog-header-title">
+                      {!finalOptions.hideIcon && (
+                        <dss-icon
+                          size="xl"
+                          fill
+                          class={`dss-dialog-header-state--${getHeadIconVariantClass()}`}
+                          icon={getHeadIcon()}
+                        ></dss-icon>
+                      )}
+                      {finalOptions.title}
+                    </div>
+                  </div>
                   {finalOptions.showCloseButton && (
                     <dss-icon-button
                       class="dss-dialog-header-close" 

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

@@ -26,15 +26,19 @@ export interface ConfirmationOptions {
   showCancelButton?: boolean | undefined;
   confirmButtonText?: string | undefined;
   cancelButtonText?: string | undefined;
+  confirmButtonIcon?: string | undefined;
+  cancelButtonIcon?: string | undefined;
   showCloseButton?: boolean | undefined;
   fullCustomization?: boolean | undefined;
   closeOnOutsideClick?: boolean | undefined;
   state?: "success" | "info" | "alert" | "error";
+  hideIcon?: boolean;
 }
 
 export interface ConfirmComponentUI<TData = undefined, TResult = undefined> {
-  component: | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
-  | (new () => HTMLElement);
+  component:
+    | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
+    | (new () => HTMLElement);
   styles?: string;
 }
 
@@ -44,9 +48,6 @@ export abstract class PrimariaInteractionService {
     componentUI: ConfirmComponentUI<TData, TResult>,
     options?: ConfirmationOptions | undefined,
   ): Promise<ConfirmationResult<TResult | undefined>>;
-  abstract confirmMessage(
-    message: string,
-    options?: ConfirmationOptions | undefined,
-  ): Promise<ConfirmationResult>;
+  abstract confirmMessage(message: string, options?: ConfirmationOptions | undefined): Promise<ConfirmationResult>;
   abstract dispose(): void;
 }

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

@@ -25,6 +25,13 @@
   box-shadow: 0 8px 12px 6px rgba(0 0 0 / 5%), 0 4px 4px rgba(0 0 0 / 10%);
 }
 
+.dialog-header-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 .dss-dialog-header {
   position: relative;
   display: flex;
@@ -45,6 +52,9 @@
   line-height: 30px;
   font-weight: var(--font-bold);
   color: var(--color-neutral-900);
+  padding-left: var(--dss-spacing-xl);
+  padding-right: var(--dss-spacing-xl);
+  text-align: center;
 }
 .dss-dialog-header-close {
   position: absolute;
@@ -69,4 +79,19 @@
   padding: 24px;
   border-bottom-left-radius: 16px;
   border-bottom-right-radius: 16px;
-}
+}
+.dss-dialog-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--dss-spacing-xs);
+}
+.dss-dialog-header-state {
+  display: flex;
+}
+.dss-dialog-header-state--warning {
+  color: var(--color-yellow-700);
+}
+.dss-dialog-header-state--danger {
+  color: var(--color-red-500);
+}